diff --git a/src/pages/Payment/PaymentCallback.js b/src/pages/Payment/PaymentCallback.js
new file mode 100644
index 0000000..a4f9815
--- /dev/null
+++ b/src/pages/Payment/PaymentCallback.js
@@ -0,0 +1,327 @@
+// material-ui
+import {
+ Grid,
+ Typography,
+ Stack,
+ // Button,
+ FormLabel,
+} from '@mui/material';
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+//import { useNavigate } from 'react-router-dom';
+import { paymentPath } from "auth/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 [responeData, setResponeDataData] = React.useState({});
+
+ const [transactionData, setTransactionData] = React.useState({});
+ const [transactionDate, setTransactionDate] = React.useState("");
+ const [transactionTime, setTransactionTime] = React.useState("");
+ const [onReady, setOnReady] = React.useState(false);
+ const updatePaymentApi = "/api/payment/updatepayment";
+ //const paymentStatusApi = "/api/payment/status/";
+
+
+ React.useEffect(() => {
+ console.log("webtoken: " + localStorage.getItem("webtoken"));
+ if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") {
+ loadForm();
+ }
+ // else{
+ // navigate("/dashboard");
+ // }
+ }, []);
+
+ React.useEffect(() => {
+ console.log(responeData)
+ if (Object.keys(responeData).length > 0) {
+ setTransactionData(responeData)
+ }
+ }, [responeData]);
+
+ React.useEffect(() => {
+ console.log(transactionData)
+ if (Object.keys(transactionData).length > 0) {
+ setOnReady(true);
+ }
+ }, [transactionData]);
+
+ const loadForm = () => {
+ const date = new Date();
+ const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();
+ const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
+ setTransactionDate(trnDate)
+ setTransactionTime(trnTime)
+ const params = new URLSearchParams(window.location.search);
+ let transactionid = params.get("TRANSACTION_ID")
+ let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=")
+
+ HttpUtils.post({
+ url: paymentPath + updatePaymentApi,
+ params: {
+ "transactionid": transactionid,
+ "receipttoken": receipt_token,
+ },
+ onSuccess: function () {
+ // {
+ // "amount": 999.99,
+ // "currencycode": "HKD",
+ // "paymentdetail": {
+ // "attemptno": 1,
+ // "channel": "MobileWallet",
+ // "paymentid": "C202310268000681",
+ // "paymentmethod": "04",
+ // "result": {
+ // "canretry": "Y",
+ // "description": "CANC - Cancelled by user or Payment Server.",
+ // "paymentstatuscode": "CANC",
+ // "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
+ // },
+ // "subtype": "FPS",
+ // "time": "2023-10-26T09:02:17Z[UTC]"
+ // },
+ // "transactionid": "20231026170103921"
+ // }
+ // )
+
+ HttpUtils.post({
+ url: paymentPath + paymentStatusApi + transactionid,
+ params: {
+ "apprefid": transactionid,
+ "webtoken": localStorage.getItem("webtoken"),
+ },
+ onSuccess: function (responseData) {
+ setResponeDataData(responseData)
+ if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
+ localStorage.removeItem("webtoken");
+ localStorage.removeItem("transactionid");
+ }
+ }
+ });
+ }
+ });
+
+
+ }
+
+ return (
+ !onReady ?
+
+ :
+ transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
+ (
+
+
+
+
+ 公共啟事：付款成功
+
+
+
+ {/*row 1*/}
+
+
+
+
+
+
+ 您的申請和付款已收到
+
+
+
+
+
+
+
+ 交易參考號:
+
+
+
+
+ {"P" + transactionData.transactionid}
+
+
+
+
+
+
+
+
+ 交易日期:
+
+
+
+
+ {transactionDate + " (DD/MM/YYYY)"}
+
+
+
+
+
+
+
+
+ 交易時間:
+
+
+
+
+ {transactionTime + " (HH:MI:SS)"}
+
+
+
+
+
+
+
+
+ EGIS 參考號:
+
+
+
+
+ {transactionData.transactionid}
+
+
+
+
+
+
+
+
+ 支付金額
+
+
+
+
+ {"HK$ " + transactionData.amount}
+
+
+
+
+
+
+
+
+ 付款方式:
+
+
+
+
+ {transactionData.paymentdetail.subtype ?? (transactionData.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
+
+
+
+
+
+
+
+
+
+ {/*row 2*/}
+
+ ) :
+ (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
+
+
+
+
+
+ 公共啟事：付款取消
+
+
+
+ {/*row 1*/}
+
+
+
+
+
+ 付款取消訊息：
+
+ 您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
+
+ 如果您主動取消了支付，請確認並確保取消是您的意願。
+
+ 如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
+
+ 檢查您的支付帳戶是否有任何異常或限制。
+
+ 確保您的付款資訊準確無誤。
+
+ 檢查您的網路連線是否正常。
+
+ 如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
+
+
+
+
+
+ {/*row 2*/}
+
+ :
+
+
+
+
+ 公共啟事：付款失敗
+
+
+
+ {/*row 1*/}
+
+
+
+
+
+
+ 付款失敗訊息：
+
+ 親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
+
+ 您的支付帳戶餘額是否足夠。
+
+ 您提供的付款資訊是否準確無誤。
+
+ 請檢查您的網路連線是否正常。
+
+ 如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
+
+ 嘗試使用其他付款方式進行付款。
+
+ 檢查您的支付帳戶是否有異常或限制。
+
+ 聯絡我們的客服人員尋求協助。
+
+ 如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
+
+
+
+
+
+
+ {/*row 2*/}
+
+ )
+
+ );
+};
+
+export default Index;
diff --git a/src/pages/Payment/PaymentSuccess.js b/src/pages/Payment/PaymentSuccess.js
deleted file mode 100644
index 01960dc..0000000
--- a/src/pages/Payment/PaymentSuccess.js
+++ /dev/null
@@ -1,330 +0,0 @@
-// material-ui
-import {
- Grid,
- Typography,
- Stack,
- // Button,
- FormLabel,
-} from '@mui/material';
-import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
-//import { useNavigate } from 'react-router-dom';
-import { paymentPath } from "auth/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 [responeData, setResponeDataData] = React.useState({});
-
- const [transactionData, setTransactionData] = React.useState({});
- const [transactionDate, setTransactionDate] = React.useState("");
- const [transactionTime, setTransactionTime] = React.useState("");
- const [onReady, setOnReady] = React.useState(false);
- const updatePaymentApi = "/api/payment/updatepayment";
- //const paymentStatusApi = "/api/payment/status/";
-
-
- React.useEffect(() => {
- console.log("webtoken: " + localStorage.getItem("webtoken"));
- if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") {
- loadForm();
- }
- // else{
- // navigate("/dashboard");
- // }
- }, []);
-
- React.useEffect(() => {
- console.log(responeData)
- if (Object.keys(responeData).length > 0) {
- setTransactionData(responeData)
- }
- }, [responeData]);
-
- React.useEffect(() => {
- console.log(transactionData)
- if (Object.keys(transactionData).length > 0) {
- setOnReady(true);
- }
- }, [transactionData]);
-
- const loadForm = () => {
- const date = new Date();
- const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();
- const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
- setTransactionDate(trnDate)
- setTransactionTime(trnTime)
- const params = new URLSearchParams(window.location.search);
- let transactionid = params.get("TRANSACTION_ID")
- let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=")
-
- HttpUtils.post({
- url: paymentPath + updatePaymentApi,
- params: {
- "transactionid": transactionid,
- "receipttoken": receipt_token,
- },
- onSuccess: function (responseData) {
- // {
- // "transactionid": "",
- // "currencycode":"",
- // "amount":,
- // "paymentdetail":{
- // "paymentid": "",
- // "paymentmethod": "",
- // "time": "