diff --git a/src/pages/Payment/Card/card.js b/src/pages/Payment/Card/card.js
new file mode 100644
index 0000000..03a3e5f
--- /dev/null
+++ b/src/pages/Payment/Card/card.js
@@ -0,0 +1,249 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    Button,
+} from '@mui/material';
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import { useNavigate } from "react-router-dom";
+import FpsIcon from "assets/images/icons/fps.svg";
+import { useLocation } from 'react-router-dom';
+import {paymentPath} from "auth/utils";
+// import {poll} from "utils/Utils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const navigate = useNavigate()
+    const location = useLocation();
+
+    const [paymentData, setPaymentData] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+    const [paymentid, setPaymentid] = React.useState("");
+    const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
+    const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
+    const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
+
+    const loadPaymentUrl = "/api/payment/wallet/fps";
+    const cancelPaymentUrl = "/api/payment/cancelpayment";
+    const paymentStatusApi = "/api/payment/status/";
+    // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
+    // const receiverUrl = "/noti-api/payment/payment-notification";
+
+    React.useEffect(() => {
+        setFpsqrcodeimgbase64("")
+        if(location.state != undefined){
+            setPaymentData(location.state)
+        }
+        loadForm();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [fpsqrcodeimgbase64]);
+
+
+    const loadForm = () => {
+        HttpUtils.post({
+            url: paymentPath+loadPaymentUrl,
+            params:{
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentmethod":"04,BCFP,FPS",
+                "order": { 
+                    "totalamount":paymentData.amount,
+                    "currency":"HKD",
+                    "orderdetail": 
+                    [ 
+                        { 
+                            "itemid": "1",
+                            "qty":"1",
+                            "unitprice":paymentData.amount,
+                            "amount":paymentData.amount
+                        },
+                    ]
+                },
+                // "locale":"<locale>",
+                // "eserviceid":"<eserviceid>"
+            },
+            onSuccess: function(responseData){
+                /*
+                    {
+                        "paymentid": "<paymentid>",
+                        "paymentstatus": "<paymentstatus>",
+                        "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
+                        "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
+                        "fpsqrcodeurl": "<fpsqrcodeurl>"
+                    }
+                */
+               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
+               setPaymentid(responseData.paymentid);
+               setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
+               const parsedUrl = new URL(responseData.fpsqrcodeurl);
+               const fpsqrcodeurl = parsedUrl.pathname
+               setFpsqrcodeurl(fpsqrcodeurl)
+               polling()
+            }
+        });
+    }
+
+    const getPaymentStatus = () => {
+        HttpUtils.post({
+            url: paymentPath+paymentStatusApi+paymentid,
+            params:{
+                "apprefid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+            },
+            onSuccess: function(responseData){
+                const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
+                if (paymentstatuscode === 'APPR') {
+                    const timestamp = '?t=' + Date.now();
+                    window.top.location.href = payment.config.domain + payment.config.ackPagePath + timestamp;
+                } else if (paymentstatuscode === 'CANC') {
+                    window.top.location.href = payment.config.domain + payment.config.indexPagePath;
+                } else {
+                    window.top.location.href = payment.config.domain + payment.config.errPagePath;
+                }
+            },
+            onError: function(){
+                cancelPayment()
+            }
+        });
+    };
+
+    React.useEffect(() => {
+
+        //Fake
+            setFpsmerchanttimeoutdatetime(new Date().now()?500:null);
+        //
+        const timeOut = fpsmerchanttimeoutdatetime;
+        const interval = setInterval(() => {
+            getPaymentStatus();
+            console.log("test");
+        }, timeOut);
+    
+        return () => clearInterval(interval);
+    }, []);
+
+    const cancelPayment = ()=>{
+        HttpUtils.post({
+            url: paymentPath+cancelPaymentUrl,
+            params:{
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentid": paymentid
+            },
+            onSuccess: function(){
+                navigate("/dashboard");
+            }
+        });       
+    }
+
+    // const getPayload = ()=>{
+    //     HttpUtils.get({
+    //         url: payloadUrl+"<paymenttoken>",
+    //         onSuccess: function(responseData){
+    //     /* 
+    //         {
+    //             "payload": "<payload>"
+    //         }
+
+    //     */
+    //         }
+    //     });       
+    // }
+
+    // const getReceiver = ()=>{
+    //     HttpUtils.get({
+    //         url: receiverUrl+"<paymenttoken>",
+    //         onSuccess: function(responseData){
+    //     /* 
+    //         {
+    //             "payload": "<payload>"
+    //         }
+
+    //     */
+    //         }
+    //     });       
+    // }
+
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            (
+                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid item xs={12} width="100%">
+                        <div style={BackgroundHead} width="100%">
+                            <Stack direction="row" height='70px'>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：FPS付款</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} >
+                        <Grid container justifyContent="flex-start" alignItems="center" >
+                            <center>
+                                <Grid item xs={12} md={12} >
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
+                                        <br />
+                                        支付金額
+                                        <br />
+                                        {"$HK " + paymentData.amount}
+                                    </Typography>
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        請掃描以下二維碼
+                                        <br />
+                                        <img src={fpsqrcodeimgbase64} alt="QR Code"/>
+                                        <img src={fpsqrcodeurl} alt="QR Code"/>
+                                        <br />
+                                        二維碼有效期限10分鐘
+                                        <br />
+                                        請在規定時間內完成付款流程
+                                    </Typography>
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                        <Button
+                                            component="span"
+                                            variant="contained"
+                                            size="large"
+                                            color="error"
+                                            onClick={()=>{
+                                                cancelPayment();
+                                            }}
+                                            sx={{ m: 4 }}
+                                        >取消付款</Button>
+                                    </Typography>
+                                </Grid>
+                            </center>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+            )
+
+
+    );
+};
+
+export default Index;
diff --git a/src/pages/Payment/Card/index.js b/src/pages/Payment/Card/index.js
index e69de29..77ac890 100644
--- a/src/pages/Payment/Card/index.js
+++ b/src/pages/Payment/Card/index.js
@@ -0,0 +1,12 @@
+import * as React from "react";
+import Loadable from 'components/Loadable';
+const Card = Loadable(React.lazy(() => import('./card')));
+
+
+const Index = () => {
+    return (
+        <Card/>
+    );
+}
+
+export default Index;
\ No newline at end of file
diff --git a/src/routes/PublicUserRoutes.js b/src/routes/PublicUserRoutes.js
index dad37d4..e8d4ea5 100644
--- a/src/routes/PublicUserRoutes.js
+++ b/src/routes/PublicUserRoutes.js
@@ -18,6 +18,7 @@ const Payment_Multi = Loadable(lazy(() => import('pages/Payment')));
 const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS')));
 const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
 const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage')));
+const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -73,13 +74,17 @@ const PublicDashboard = {
           element: <Payment_FPS/>
         },
         {
-          path: 'payment/fps/fpscallback',
-          element: <Payment_FPS_CallBack/>
+          path: 'payment/card',
+          element: <Payment_Card/>
         },
         {
           path: 'payment/fps/ackpage',
           element: <Payment_FPS_Ackpage/>
         },
+        {
+          path: 'payment/fps/fpscallback',
+          element: <Payment_FPS_CallBack/>
+        },
       ]
     },
   ]