alex
/
PNSPS-frontend-MaterialUI
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1540 Commits
4 Branches
27 MiB
 
 
Tree: b7b7a9c246
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'b7b7a9c246'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Payment/FPS/FPS.js

510 lines
25 KiB
Raw Blame History 

  1. // material-ui

  2. import {

  3.     Grid,

  4.     Typography,

  5.     Stack,

  6.     Button,

  7. } from '@mui/material';

  8. import * as React from "react";

  9. import * as HttpUtils from "utils/HttpUtils";

  10. import * as UrlUtils from "utils/ApiPathConst";

  11. import { useNavigate } from "react-router-dom";

  12. import FpsIcon from "assets/images/icons/fps.svg";

  13. import expiredQrcodeEN from "assets/images/icons/expiredQrcodeEN.png";

  14. import expiredQrcodeZH from "assets/images/icons/expiredQrcodeZH.png";

  15. import expiredQrcodeCN from "assets/images/icons/expiredQrcodeCN.png";

  16. import { useLocation } from 'react-router-dom';

  17. // import {paymentPath} from "auth/utils";

  18. import {currencyFormat} from "utils/FormatUtils";

  19. // import {poll} from "utils/Utils";

  20. 

  21. import Loadable from 'components/Loadable';

  22. const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

  23. 

  24. import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

  25. import {FormattedMessage, useIntl} from "react-intl";

  26. const BackgroundHead = {

  27.     backgroundImage: `url(${titleBackgroundImg})`,

  28.     width: '100%',

  29.     height: '100%',

  30.     backgroundSize: 'contain',

  31.     backgroundRepeat: 'no-repeat',

  32.     backgroundColor: '#0C489E',

  33.     backgroundPosition: 'right'

  34. }

  35. 

  36. 

  37. // ==============================|| DASHBOARD - DEFAULT ||============================== //

  38. 

  39. const Index = () => {

  40.     const navigate = useNavigate()

  41.     const location = useLocation();

  42.     const intl = useIntl();

  43.     const { locale } = intl;

  44. 

  45.     const [locationData, setLocationData] = React.useState({});

  46.     const [paymentData, setPaymentData] = React.useState({});

  47.     const [onReady, setOnReady] = React.useState(false);

  48.     const [qrCodeTimeout, setqrCodeTimeout] = React.useState(false);

  49.     const [paymentStatusCode, setPaymentStatusCode] = React.useState("");

  50.     const [expiredQrcode, setExpiredQrcode] = React.useState(expiredQrcodeEN);

  51.     

  52.     const [responeData, setResponeDataData] = React.useState({});

  53.     const [fpsTransctionData, setFpsTransctionData] = React.useState({});

  54.     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");

  55.     const [timeDownCount, setTimeDownCount] = React.useState(0);

  56.     const [paymentId, setPaymentId] = React.useState("");

  57.     const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");

  58.     const [fpsqrcodeurlPrd, setFpsqrcodeurlPrd] = React.useState("");

  59.     const [fpsqrcodeurlFps, setFpsqrcodeurlFps] = React.useState("");

  60.     const [browserType, setBrowserType] = React.useState("");

  61.     const [sysEnv, setSysEnv] = React.useState("");

  62.     const [isError, setIsError] = React.useState(false);

  63.     const mobileBrowser = "Mobile";

  64.     const desktopBrowser = "Desktop";

  65.     

  66.     const pasgPathPrd = 'https://fps.payapps.hkicl.com.hk'; //PRD

  67.     const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing

  68.     // const loadPaymentUrl = "/api/payment/wallet/fps";

  69.     // const cancelPaymentUrl = "/api/payment/cancelpayment";

  70.     // const paymentStatusApi = "/api/payment/status/";

  71.     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";

  72.     // const receiverUrl = "/noti-api/payment/payment-notification";

  73.     

  74.     //timer

  75.     const currentTimer = React.useRef();

  76.     const [time, setTime] = React.useState(0);

  77. 

  78.     React.useEffect(() => {

  79.         // console.log (location.state)

  80.         if(Object.keys(location.state).length > 0){

  81.             // console.log (location.state)

  82.             setLocationData(location.state)

  83.             setBrowserType(desktopBrowser)

  84. 

  85.             if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {

  86.                 // console.log('Mobile web browser');

  87.                 setBrowserType(mobileBrowser)

  88.                 // setFpsqrcodeurl(openPASGUrl)

  89.             } else {

  90.                 // console.log('Desktop web browser');

  91.                 setBrowserType(desktopBrowser)

  92.             }

  93.         }

  94.     }, []);

  95. 

  96.     React.useEffect(() => {

  97.         // console.log (locationData)

  98.         if (Object.keys(locationData).length > 0){

  99.             setPaymentData(locationData)

  100.             // loadForm();

  101.         }

  102.     }, [locationData]);

  103. 

  104.     React.useEffect(() => {

  105.         // console.log (locationData)

  106.         if (locale === 'zh-HK'){

  107.             setExpiredQrcode(expiredQrcodeZH)

  108.         } else if (locale === 'en'){

  109.             setExpiredQrcode(expiredQrcodeEN)

  110.         } else {

  111.             setExpiredQrcode(expiredQrcodeCN)

  112.         }

  113.     }, [locale]);

  114. 

  115.     React.useEffect(() => {

  116.         // console.log (paymentData)

  117.         if (Object.keys(paymentData).length > 0){

  118.             loadForm();

  119.         }

  120.     }, [paymentData]);

  121. 

  122.     React.useEffect(() => {

  123.         // console.log(responeData)

  124.         if(Object.keys(responeData).length > 0 && fpsmerchanttimeoutdatetime!=""){

  125.             setFpsTransctionData(responeData)

  126.         }

  127.     }, [responeData]);

  128. 

  129.     React.useEffect(() => {

  130.         // console.log(fpsTransctionData)

  131.         if(Object.keys(fpsTransctionData).length > 0 ){

  132.             setPaymentId(fpsTransctionData.paymentid)

  133.             currentTimer.current = setInterval(() => {

  134.                 setTime((prevTime) => prevTime + 1);

  135.             }, 1000);

  136.             setOnReady(true);

  137.             return () => clearInterval(currentTimer.current);

  138.         }

  139.     }, [fpsTransctionData]);

  140. 

  141. 

  142.     const loadForm = () => {

  143.         const webtoken = paymentData.webtoken;

  144.         const transactionid = paymentData.transactionid;

  145.         console.log(webtoken)

  146.         console.log(transactionid)

  147.         localStorage.removeItem("transactionid")

  148.         localStorage.removeItem("webtoken")

  149.         localStorage.setItem("transactionid", transactionid)

  150.         localStorage.setItem("webtoken", webtoken)

  151. 

  152.         HttpUtils.post({

  153.             url: UrlUtils.LOAD_PAYMENT_FPS_URL,

  154.             params:{

  155.                 "transactionid": transactionid,

  156.                 "webtoken": webtoken,

  157.                 "paymentmethod":"04,BCFP,FPS",

  158.                 "order": { 

  159.                     "totalamount":paymentData.amount,

  160.                     "currency":"HKD",

  161.                     "orderdetail": 

  162.                     [ 

  163.                         { 

  164.                             "itemid": "1",

  165.                             "qty":"1",

  166.                             "unitprice":paymentData.amount,

  167.                             "amount":paymentData.amount

  168.                         },

  169.                     ]

  170.                 },

  171.                 // "locale":"<locale>",

  172.                 // "eserviceid":"<eserviceid>"

  173.             },

  174.             onSuccess: function(responseData){

  175.                 try {

  176.                     /*

  177.                         {

  178.                             "paymentid": "<paymentid>",

  179.                             "paymentstatus": "<paymentstatus>",

  180.                             "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,

  181.                             "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",

  182.                             "fpsqrcodeurl": "<fpsqrcodeurl>"

  183.                         }

  184.                     */

  185.                    if (!responseData || !responseData.fpsqrcodeurl) {

  186.                        throw new Error("Missing expected response data");

  187.                    }

  188.                    setResponeDataData(responseData)

  189.                    const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime

  190.                    setSysEnv(responseData.sysEnv)

  191.                    const searchString = "[UTC]";

  192.                    let convertedDateString = "";

  193.                    if ( timeoutdatetime.toString().includes(searchString) ){

  194.                         convertedDateString = timeoutdatetime.replace("[UTC]", "");

  195.                     } else {

  196.                         convertedDateString = timeoutdatetime;

  197.                     }

  198.                     setFpsmerchanttimeoutdatetime(convertedDateString)

  199.                    

  200.                     const parsedUrl = new URL(responseData.fpsqrcodeurl);

  201.                     const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;

  202.                     const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;

  203.                     console.log(parsedUrl)

  204.                     console.log(fpsqrcodeurl)

  205.                     console.log(fpsqrcodeurlwithFps)

  206.      

  207.                     const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  208.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  209.                     const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  210.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  211.                     const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  212.                                      + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId"));

  213.                     // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  214.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  215.                     // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  216.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  217.                     // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  218.                     //                  + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  219.                     setFpsqrcodeurl(openPASGUrl)

  220.                     setFpsqrcodeurlPrd(openPASGUrlPrd)

  221.                     setFpsqrcodeurlFps(openPASGUrlPrdFps)

  222.                 } catch (e) {

  223.                     console.error("Error processing response:", e);

  224.                     setIsError(true);

  225.                     setOnReady(true);

  226.                 }

  227.             },

  228.             onFail: function(error){

  229.                 console.error("post onFail:", error);

  230.                 setIsError(true);

  231.                 setOnReady(true);

  232.             },

  233.             onError: function(error){

  234.                 console.error("post onError:", error);

  235.                 setIsError(true);

  236.                 setOnReady(true);

  237.             }

  238.         });

  239. 

  240.         //testing

  241.         // const timeoutdatetime = "2024-11-18T07:04:35Z[UTC]"

  242.         // const convertedDateString = timeoutdatetime.replace("[UTC]", "");

  243.         // setFpsmerchanttimeoutdatetime(convertedDateString)

  244.         // setPaymentId("C202310268000681")

  245.         // const responseData= 

  246.         // {

  247.         //     "paymentid": "C202310268000681",

  248.         //     "paymentstatus": "INPR",

  249.         //     "fpsmerchanttimeoutdatetime": "2024-11-18T07:04:35Z[UTC]",

  250.         //     "fpsqrcodeimgbase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAuyklEQVR4Xu3dfcy/d1nff2IAAAAASUVORK5CYII=",

  251.         //     "fpsqrcodeurl": "http://127.0.0.1:8080/api/payment/wallet/fps/enquiryfpspayload/vm.JKDDlTOavR3ASviSwUnS1Lw4-"

  252.         // }

  253.         // setResponeDataData(responseData)

  254.         // const parsedUrl = new URL(responseData.fpsqrcodeurl);

  255.         // const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname;

  256.         // const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname;

  257.         // console.log(parsedUrl)

  258.         // console.log(fpsqrcodeurl)

  259.         // console.log(fpsqrcodeurlwithFps)

  260. 

  261.         // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurl) + '&callback='

  262.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  263.         // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurl) + '&callback='

  264.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  265.         // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback='

  266.         //                     + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId"));

  267.         // setFpsqrcodeurl(openPASGUrl)

  268.         // setFpsqrcodeurlPrd(openPASGUrlPrd)

  269.         // setFpsqrcodeurlFps(openPASGUrlPrdFps)

  270. 

  271.     }

  272. 

  273.     const getPaymentStatus = () => {

  274.         if(Object.keys(paymentData).length > 0){

  275.             HttpUtils.post({

  276.                 url: UrlUtils.PAYMENT_STATUS_API,

  277.                 params:{

  278.                     "apprefid": paymentData.transactionid,

  279.                     // "webtoken": paymentData.webtoken, 

  280.                     "transactionid":Number(paymentData.transactionid)  

  281.                 },

  282.                 onSuccess: function(responseData){

  283.                     const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;

  284.                     setPaymentStatusCode(paymentstatuscode)

  285.                     if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){

  286.                         if (paymentstatuscode === 'APPR') {

  287.                             // const timestamp = Date.now();

  288.                             let page = '/paymentPage/fps/ackpage';

  289.                             let stateParams = { state: { transactionid: paymentData.transactionid} }

  290.                             navigate(page, stateParams);

  291.                         } else if (paymentstatuscode === 'CANC') {

  292.                             // const timestamp = Date.now();

  293.                             let page = '/paymentPage/fps/ackpage';

  294.                             let stateParams = { state: { transactionid: paymentData.transactionid} }

  295.                             navigate(page, stateParams);

  296.                         } else {

  297.                             // window.top.location.href = paymentPath + payment.config.errPagePath;

  298.                             alert("ERROR")

  299.                         }

  300.                     }

  301.                 },

  302.                 onError: function(){

  303.                     alert("ERROR")

  304.                     // cancelPayment()

  305.                     // clearInterval(currentTimer.current);

  306.                 }

  307.             });

  308.         }

  309.     };

  310.     

  311.     React.useEffect(() => {

  312.         const timeOutDate = new Date(fpsmerchanttimeoutdatetime);

  313.         const currentTime = new Date;

  314.         const timedowncount = Math.round((timeOutDate.getTime() - currentTime.getTime()) / 1000);

  315.         // console.log(time)

  316.         // console.log(timeOutDate)

  317.         // console.log(currentTime)

  318.         // console.log(timeOutDate.getTime()-currentTime.getTime())

  319.         if (browserType === desktopBrowser){

  320.             getPaymentStatus();

  321.             if (timeOutDate.getTime()<currentTime.getTime()){

  322.                 // console.log("stop");

  323.                 clearInterval(currentTimer.current);

  324.                 setqrCodeTimeout(true)

  325.                 setTimeDownCount(0);

  326.                 // cancelPayment()

  327.             }else{

  328.                 setTimeDownCount(timedowncount);

  329.             }

  330.         }

  331.     },[time])

  332. 

  333.     const cancelPayment = ()=>{

  334.         if (Object.keys(paymentData).length>0){

  335.             getPaymentStatus()

  336.             if (paymentStatusCode === "INPR" || isError || paymentStatusCode === ""){

  337.                 HttpUtils.post({

  338.                     url: UrlUtils.CANCEL_PAYMENT_URL,

  339.                     params:{

  340.                         "transactionid": paymentData.transactionid,

  341.                         "webtoken": paymentData.webtoken,

  342.                         "paymentid": fpsTransctionData.paymentid || localStorage.getItem("paymentId")

  343.                     },

  344.                     onSuccess: function(){

  345.                         navigate('/paymentPage/fps/ackpage');

  346.                         let page = '/paymentPage/fps/ackpage';

  347.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  348.                         navigate(page, stateParams);                    

  349.                     },

  350.                     onFail: function(){

  351.                         let page = '/paymentPage/fps/ackpage';

  352.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  353.                         navigate(page, stateParams);                    

  354.                     },

  355.                     onError: function(){

  356.                         let page = '/paymentPage/fps/ackpage';

  357.                         let stateParams = { state: { transactionid: paymentData.transactionid} }

  358.                         navigate(page, stateParams);                    

  359.                     }

  360.                 });

  361.             }

  362.         }

  363.     }

  364. 

  365.     const mobliePayment = ()=>{

  366.         window.location.assign(fpsqrcodeurl);

  367.     }

  368. 

  369.     const mobliePaymentPrd = ()=>{

  370.         window.location.assign(fpsqrcodeurlPrd);

  371.     }

  372. 

  373.     const mobliePaymentFps = ()=>{

  374.         window.location.assign(fpsqrcodeurlFps);

  375.     }

  376. 

  377.     return (

  378.         !onReady ?

  379.             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">

  380.                 <Grid item>

  381.                     <LoadingComponent />

  382.                 </Grid>

  383.             </Grid>

  384.             :

  385.             (

  386.                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >

  387.                     <Grid item xs={12} width="100%">

  388.                         <div style={BackgroundHead} width="100%">

  389.                             <Stack direction="row" height='70px'>

  390.                                 <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>

  391.                                     <FormattedMessage id="publicNoticePaymentFPSPay"/>

  392.                                 </Typography>

  393.                             </Stack>

  394.                         </div>

  395.                     </Grid>

  396.                     {/*row 1*/}

  397.                     <Grid item xs={12} md={12} >

  398.                         <Grid container justifyContent="flex-start" alignItems="center" >

  399.                             <center>

  400.                                 <Grid item xs={12} md={12} >

  401. 

  402.                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  403.                                         <FormattedMessage id="payAlert"/>

  404.                                         <br /><br />

  405.                                         <img src={FpsIcon} width="80" height="80" alt="FPS"></img>

  406.                                         <br />

  407.                                         <FormattedMessage id="payTotalDeatail"/>

  408.                                         <br />

  409.                                         {"HK$ " + currencyFormat(paymentData.amount)}

  410.                                     </Typography>

  411.                                     {isError ?

  412.                                         <Typography variant="h3" color="error" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  413.                                             <FormattedMessage id="fpsPaymentErrorMsg"/>

  414.                                         </Typography>

  415.                                         :

  416.                                         browserType==mobileBrowser?

  417.                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  418.                                             {

  419.                                                 sysEnv=="prod"?

  420.                                                     <Button

  421.                                                         component="span"

  422.                                                         variant="contained"

  423.                                                         size="large"

  424.                                                         color="primary"

  425.                                                         onClick={()=>{

  426.                                                             mobliePaymentPrd();

  427.                                                         }}

  428.                                                         sx={{ m: 4 }}

  429.                                                     >請選擇支付程式付款</Button>

  430.                                                 :

  431.                                                 <>

  432.                                                     <Button

  433.                                                         component="span"

  434.                                                         variant="contained"

  435.                                                         size="large"

  436.                                                         color="primary"

  437.                                                         onClick={()=>{

  438.                                                             mobliePayment();

  439.                                                         }}

  440.                                                         sx={{ m: 4 }}

  441.                                                     >請選擇支付程式付款-Testing</Button>

  442.                                                     <Button

  443.                                                         component="span"

  444.                                                         variant="contained"

  445.                                                         size="large"

  446.                                                         color="primary"

  447.                                                         onClick={()=>{

  448.                                                             mobliePaymentFps();

  449.                                                         }}

  450.                                                         sx={{ m: 4 }}

  451.                                                     >請選擇支付程式付款-fps prefix</Button>

  452.                                                 </>

  453.                                             }

  454.                                         </Typography>

  455.                                         :

  456.                                         <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  457.                                             <FormattedMessage id="fpsQrcodeTitle1"/>

  458.                                             <br />

  459.                                             { 

  460.                                                 !qrCodeTimeout?

  461.                                                 <img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/>

  462.                                                 :<img src={expiredQrcode} alt="Expired QR Code"/>

  463.                                             }

  464.                                             <br />

  465.                                             {"["+paymentId+"]"}

  466.                                             <br/>

  467.                                             

  468.                                             {

  469.                                                 timeDownCount<=0?

  470.                                                 <FormattedMessage id="fpsQrcodeExpired"/>:

  471.                                                 <>

  472.                                                     <FormattedMessage id="fpsQrcodeTitle2"/>

  473.                                                     <br />

  474.                                                     <FormattedMessage id="fpsQrcodeTitle3"/>

  475.                                                     <br />

  476.                                                     <FormattedMessage id="fpsQrcodeTitle4"/>&nbsp;

  477.                                                     {timeDownCount}&nbsp; 

  478.                                                     <FormattedMessage id="fpsQrcodeTitle5"/>

  479.                                                 </>

  480.                                             }

  481.                                         </Typography>

  482.                                     }

  483.                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

  484.                                         <Button

  485.                                             component="span"

  486.                                             variant="contained"

  487.                                             size="large"

  488.                                             color="error"

  489.                                             onClick={()=>{

  490.                                                 cancelPayment();

  491.                                             }}

  492.                                             sx={{ m: 4 }}

  493.                                         >

  494.                                             <FormattedMessage id="payCancel"/>

  495.                                         </Button>

  496.                                     </Typography>

  497.                                 </Grid>

  498.                             </center>

  499.                         </Grid>

  500.                     </Grid>

  501.                     {/*row 2*/}

  502.                 </Grid >

  503.             )

  504. 

  505. 

  506.     );

  507. };

  508. 

  509. export default Index;