diff --git a/src/pages/order/components/TicketSection.tsx b/src/pages/order/components/TicketSection.tsx
index 0eab6a5..3aba63b 100644
--- a/src/pages/order/components/TicketSection.tsx
+++ b/src/pages/order/components/TicketSection.tsx
@@ -182,7 +182,7 @@ const TicketSection: FC = () => {
           <div className="w-full h-12 bg-white border border-border rounded-xl flex items-center px-3 gap-3 mt-3">
             <button
               onClick={togglePlayPause}
-              className="w-8 h-8 rounded-full bg-black flex items-center justify-center flex-shrink-0"
+              className="w-8 h-8 rounded-full bg-black flex items-center justify-center shrink-0"
             >
               {isPlaying ? (
                 <Pause size={16} color="#fff" variant="Bold" />
diff --git a/src/pages/payment/enum/Enum.ts b/src/pages/payment/enum/Enum.ts
new file mode 100644
index 0000000..1b30aea
--- /dev/null
+++ b/src/pages/payment/enum/Enum.ts
@@ -0,0 +1,14 @@
+export const enum PaymentMethodEnum {
+  Online = "Online",
+  Cash = "Cash",
+  Credit = "Credit",
+}
+export const enum PaymentStatusEnum {
+  Pending = "pending",
+  Paid = "paid",
+  Failed = "failed",
+  Refunded = "refunded",
+}
+export const enum PaymentGatewayEnum {
+  ZarinPal = "zarinpal",
+}
diff --git a/src/pages/payment/hooks/usePaymentData.ts b/src/pages/payment/hooks/usePaymentData.ts
new file mode 100644
index 0000000..6f7a918
--- /dev/null
+++ b/src/pages/payment/hooks/usePaymentData.ts
@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/PaymentService";
+import type { PayInvoiceParamsType } from "../types/Types";
+
+export const usePayInvoice = () => {
+  return useMutation({
+    mutationFn: ({
+      invoiceId,
+      params,
+    }: {
+      invoiceId: string;
+      params: PayInvoiceParamsType;
+    }) => api.payInvoice(invoiceId, params),
+  });
+};
diff --git a/src/pages/payment/service/PaymentService.ts b/src/pages/payment/service/PaymentService.ts
new file mode 100644
index 0000000..97c08a6
--- /dev/null
+++ b/src/pages/payment/service/PaymentService.ts
@@ -0,0 +1,13 @@
+import axios from "@/config/axios";
+import type { PayInvoiceParamsType } from "../types/Types";
+
+export const payInvoice = async (
+  invoiceId: string,
+  params: PayInvoiceParamsType,
+) => {
+  const { data } = await axios.post(
+    `/public/payments/invoice/${invoiceId}/pay`,
+    params,
+  );
+  return data;
+};
diff --git a/src/pages/payment/types/Types.ts b/src/pages/payment/types/Types.ts
new file mode 100644
index 0000000..9e8befd
--- /dev/null
+++ b/src/pages/payment/types/Types.ts
@@ -0,0 +1,9 @@
+import type { PaymentGatewayEnum, PaymentMethodEnum } from "../enum/Enum";
+
+export type PayInvoiceParamsType = {
+  amount: number;
+  method: PaymentMethodEnum;
+  gateway: PaymentGatewayEnum;
+  description: string;
+  attachments: string[];
+};