diff --git a/frontend/composables/api/orders/usePayOrder.ts b/frontend/composables/api/orders/usePayOrder.ts
new file mode 100644
index 0000000..26d11fa
--- /dev/null
+++ b/frontend/composables/api/orders/usePayOrder.ts
@@ -0,0 +1,37 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type PayOrderRequest = {
+    gateway_type: Pick<PaymentGateway, "type">;
+};
+
+export type PayOrderResponse = {
+    url: string;
+};
+
+const usePayOrder = () => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handlePayOrder = async (params: PayOrderRequest) => {
+        const { data } = await axios.post<PayOrderResponse>(
+            API_ENDPOINTS.orders.checkout.payment,
+            { ...params }
+        );
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (PaymentData: PayOrderRequest) =>
+            handlePayOrder(PaymentData),
+    });
+};
+
+export default usePayOrder;