diff --git a/frontend/pages/transaction.vue b/frontend/pages/transaction.vue
index 71f4dc2..771d148 100644
--- a/frontend/pages/transaction.vue
+++ b/frontend/pages/transaction.vue
@@ -3,6 +3,7 @@
 
 import useGetTransaction from "~/composables/api/orders/useGetTransaction";
 import usePersianDate from "~/composables/global/usePersianDate";
+import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";
 
 // meta
 
@@ -30,6 +31,8 @@ const tracking_code = computed(() => route.query["tc"] as string);
 
 const { data: transaction, isLoading: transactionIsLoading, suspense } = useGetTransaction(tracking_code);
 
+const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(transaction.value?.bank_result?.tracking_code));
+
 await suspense();
 
 // computed
@@ -181,6 +184,8 @@ const statusTitle = computed(() => {
                         >
                     </NuxtLink>
                     <Button
+                        @click="!downloadIsLoading ? downloadFn() : undefined"
+                        :disabled="downloadIsLoading"
                         v-if="transaction?.bank_result?.status == 'succeeded'"
                         class="w-full rounded-full max-lg:py-2 bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
                         start-icon="ci:share"