diff --git a/frontend/components/cart/global/CartSummary.vue b/frontend/components/cart/global/CartSummary.vue
index 2172d2b..7c2d9ab 100644
--- a/frontend/components/cart/global/CartSummary.vue
+++ b/frontend/components/cart/global/CartSummary.vue
@@ -3,6 +3,7 @@
 
 import useDeleteDiscountCode from "~/composables/api/orders/useDeleteDiscountCode";
 import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
+import usePayOrder from "~/composables/api/orders/usePayOrder";
 import useSubmitDiscountCode from "~/composables/api/orders/useSubmitDiscountCode";
 import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
@@ -29,10 +30,15 @@ const {
     isPending: deleteDiscountCodeIsPending,
 } = useDeleteDiscountCode();
 
+const { mutateAsync: pay, isPending: paymentIsPending } = usePayOrder();
+
 // computed
 
 const nextPage = computed(
-    () => route.meta.nextPage as { name: string; label: string } | undefined
+    () =>
+        route.meta.nextPage as
+            | { name: string; label: string; query?: string }
+            | undefined
 );
 
 const hasSubmittedDiscountCode = computed(() => !!cart.value?.discount_code);
@@ -76,6 +82,28 @@ const handleDeleteDiscountCode = () => {
         },
     });
 };
+
+const handlePayment = () => {
+    pay(
+        {
+            gateway_type: route.query["gw"] as any,
+        },
+        {
+            onSuccess: (data) => {
+                window.location.href = data.url;
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در پرداخت رخ داد",
+                    options: {
+                        description: "لطفا با پشتیبانی تماس بگیرید",
+                        status: "error",
+                    },
+                });
+            },
+        }
+    );
+};
 </script>
 
 <template>
@@ -175,11 +203,25 @@ const handleDeleteDiscountCode = () => {
                 </button>
             </div>
 
-            <NuxtLink :to="{ name: nextPage?.name }">
-                <Button start-icon="bi:arrow-right" class="w-full rounded-100">
+            <Button
+                v-if="nextPage?.name == 'payment'"
+                start-icon="ci:arrow-right"
+                class="w-full rounded-100 bg-blue-500"
+                @click="handlePayment"
+            >
+                {{ nextPage?.label }}
+            </Button>
+
+            <NuxtLink
+                v-else
+                :to="{ name: nextPage?.name, query: { gw: nextPage?.query } }"
+            >
+                <Button start-icon="arrow-right" class="w-full rounded-100">
                     {{ nextPage?.label }}
                 </Button>
             </NuxtLink>
+
+            <PaymentPendingModal v-model:isShow="paymentIsPending" />
         </div>
     </div>
 </template>