diff --git a/pages/[qrCode]/payment-order/index.js b/pages/[qrCode]/payment-order/index.js
index 485dec6..2d3713c 100644
--- a/pages/[qrCode]/payment-order/index.js
+++ b/pages/[qrCode]/payment-order/index.js
@@ -1,8 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import DefaultLayout from "../../../components/Layout/DefaultLayout";
 import {observer} from "mobx-react-lite";
-import Image from "next/image";
-import {Button, Divider, Form, Input, Modal, Spin} from "antd";
+import {Button, Divider, Form, Image, Input, Modal, Spin} from "antd";
 import Constraint from "../../../components/Constraint";
 import Ask from "../../../components/Ask";
 import Location from "../../../components/Location";
@@ -12,11 +11,14 @@ import Countdown from "react-countdown";
 import {useRouter} from "next/router";
 import BottomSheet from "../../../components/BottomSheet";
 import { botsRepository } from '../../../repository/bots';
+import { useStore } from '../../../components/StoreProvider';
 
 const Payment = observer(() => {
     const [form] = Form.useForm();
     const router = useRouter();
+    const store = useStore();
     const { qrCode } = router.query;
+    const [price, setPrice] = useState(0);
     const [open, setOpen] = useState(false);
     const [openOrderOut, setOpenOrderOut] = useState(false);
     const [notOrder, setNotOrder] = useState(false);
@@ -40,6 +42,32 @@ const Payment = observer(() => {
         }
     };
 
+    useEffect(() => {
+        if (typeof window !== undefined) {
+            let price = localStorage.getItem("price")
+            setPrice(price)
+        }
+    }, [])
+
+    const handleSubmitPhoneNumber = async () => {
+        try {
+            const values = await form.validateFields();
+            setOpen(false);
+            setIsLoading(true);
+            
+            const body = {
+                phoneNumber: values.phoneNumber,
+            };
+
+            await store.lockey.createPayment(body);
+            form.resetFields();
+            setIsLoading(false)
+        } catch (err) {
+            console.log(err);
+            setIsLoading(false);
+        }
+    }
+
     return (
         <>
             {isNotComplete ? (
@@ -66,7 +94,7 @@ const Payment = observer(() => {
 
                 <Form form={form} layout={'vertical'}>
                     <div className={'mt-5'}>
-                        <Form.Item name="phone"
+                        <Form.Item name="phoneNumber"
                                    label={<span className={'font-semibold text-xl'}>Nomor Telepon Pembayaran</span>}
                                    rules={[
                                        {required: true, message: "Silahkan masukan Nomor Ponsel!"},
@@ -93,7 +121,7 @@ const Payment = observer(() => {
 
                     <div className={'flex justify-between'}>
                         <h3 className={'text-lg font-bold'}>Total Pembayaran</h3>
-                        <h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. 99.000</h3>
+                        <h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. {price}</h3>
                     </div>
 
                     <Form.Item shouldUpdate>
@@ -127,14 +155,16 @@ const Payment = observer(() => {
 
             {/*MODAL LOADING*/}
             <Modal
-                className={'rounded-lg'}
+                className={'rounded-3xl'}
                 open={isLoading}
                 footer={null}
                 closable={false}
                 maskClosable={false}
                 bodyStyle={{paddingLeft: 5, paddingRight: 5}}>
-                <div className={'flex flex-col justify-center'}>
-                    <Spin size={'large'}/>
+                <div className={'flex flex-col justify-center items-center'}>
+                    <div className='flex justify-center items-center'>
+                        <Image src={'/assets/icons/Load_Logo_CP.gif'} width={35} height={48} alt={'gif'} preview={false} />
+                    </div>
                     <span className={'text-center font-semibold'}>Mohon tunggu</span>
                     <span className={'text-center text-sm'}>Saat ini pemesanan LOCKEY anda sedang di proses. </span>
                 </div>
@@ -145,7 +175,7 @@ const Payment = observer(() => {
                 <div className={'px-5 max-w-lg'}>
                     <div className={'flex justify-center'}>
                         <Image src={'/assets/images/confirmation.svg'} width={200} height={200}
-                               alt={'confirmation'}/>
+                            alt={'confirmation'} preview={false} />
                     </div>
 
                     <h3 className={'text-lg font-bold'}>Konfirmasi Pembayaran?</h3>
@@ -154,11 +184,8 @@ const Payment = observer(() => {
                     <div className={'flex justify-between gap-4'}>
                         <Button size={'large'} className={'w-full rounded-lg'}
                                 onClick={onCloseSheet}>Cancel</Button>
-                        <Button size={'large'} className={'w-full rounded-lg bg-black text-white'}
-                                onClick={() => {
-                                    setOpen(false)
-                                    setIsLoading(true)
-                                }}>Bayar</Button>
+                        <Button size={'large'} htmlType={'submit'} className={'w-full rounded-lg bg-black text-white'}
+                            onClick={handleSubmitPhoneNumber}>Bayar</Button>
                     </div>
                 </div>
             </BottomSheet>
diff --git a/public/assets/icons/Load_Logo_CP.gif b/public/assets/icons/Load_Logo_CP.gif
new file mode 100644
index 0000000..ff25a80
Binary files /dev/null and b/public/assets/icons/Load_Logo_CP.gif differ
diff --git a/repository/order.js b/repository/order.js
index 59fcea1..2b913de 100644
--- a/repository/order.js
+++ b/repository/order.js
@@ -7,9 +7,9 @@ const url = {
 const hooks = {}
 
 const api = {
-    async usePayment(data) {
-        return await http.post(url.payment, data)
-    },
+    // async usePayment(data) {
+    //     return await http.post(url.payment, data)
+    // },
 }
 
 export const orderRepository = {
diff --git a/store/lockey.js b/store/lockey.js
index 9158622..0e860ce 100644
--- a/store/lockey.js
+++ b/store/lockey.js
@@ -1,5 +1,6 @@
 import {http} from "../utils/http";
 import {botsRepository} from "../repository/bots";
+import { orderRepository } from "../repository/order";
 
 export class LockeyStore {
     constructor(context) {
@@ -9,4 +10,8 @@ export class LockeyStore {
     createOrder(body) {
         return http.post(botsRepository.url.createOrder(), body);
     }
+
+    createPayment(body) {
+        return http.post(orderRepository.url.payment(), body);
+    }
 }