diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index d3284a4..eb009af 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/src/pages/Payment/FPS/FPS.js @@ -59,6 +59,7 @@ const Index = () => { const [fpsqrcodeurlFps, setFpsqrcodeurlFps] = React.useState(""); const [browserType, setBrowserType] = React.useState(""); const [sysEnv, setSysEnv] = React.useState(""); + const [isError, setIsError] = React.useState(false); const mobileBrowser = "Mobile"; const desktopBrowser = "Desktop"; @@ -171,49 +172,68 @@ const Index = () => { // "eserviceid":"" }, onSuccess: function(responseData){ - /* - { - "paymentid": "", - "paymentstatus": "", - "fpsmerchanttimeoutdatetime": , - "fpsqrcodeimgbase64": "", - "fpsqrcodeurl": "" + try { + /* + { + "paymentid": "", + "paymentstatus": "", + "fpsmerchanttimeoutdatetime": , + "fpsqrcodeimgbase64": "", + "fpsqrcodeurl": "" + } + */ + if (!responseData || !responseData.fpsqrcodeurl) { + throw new Error("Missing expected response data"); + } + setResponeDataData(responseData) + const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime + setSysEnv(responseData.sysEnv) + const searchString = "[UTC]"; + let convertedDateString = ""; + if ( timeoutdatetime.toString().includes(searchString) ){ + convertedDateString = timeoutdatetime.replace("[UTC]", ""); + } else { + convertedDateString = timeoutdatetime; } - */ - setResponeDataData(responseData) - const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime - setSysEnv(responseData.sysEnv) - const searchString = "[UTC]"; - let convertedDateString = ""; - if ( timeoutdatetime.toString().includes(searchString) ){ - convertedDateString = timeoutdatetime.replace("[UTC]", ""); - } else { - convertedDateString = timeoutdatetime; + setFpsmerchanttimeoutdatetime(convertedDateString) + + const parsedUrl = new URL(responseData.fpsqrcodeurl); + const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname; + const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname; + console.log(parsedUrl) + console.log(fpsqrcodeurl) + console.log(fpsqrcodeurlwithFps) + + const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); + const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); + const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); + // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); + // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); + // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' + // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); + setFpsqrcodeurl(openPASGUrl) + setFpsqrcodeurlPrd(openPASGUrlPrd) + setFpsqrcodeurlFps(openPASGUrlPrdFps) + } catch (e) { + console.error("Error processing response:", e); + setIsError(true); + setOnReady(true); } - setFpsmerchanttimeoutdatetime(convertedDateString) - - const parsedUrl = new URL(responseData.fpsqrcodeurl); - const fpsqrcodeurl = "https://"+window.location.hostname+'/payment'+parsedUrl.pathname; - const fpsqrcodeurlwithFps = "https://"+"fps."+window.location.hostname+parsedUrl.pathname; - console.log(parsedUrl) - console.log(fpsqrcodeurl) - console.log(fpsqrcodeurlwithFps) - - const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); - const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); - const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?&PAYMENT_ID='+localStorage.getItem("paymentId")); - // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); - // const openPASGUrlPrd = pasgPathPrd + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); - // const openPASGUrlPrdFps = pasgPath + '?pay_req_obj=' + encodeURIComponent(fpsqrcodeurlwithFps) + '&callback=' - // + encodeURIComponent("https://"+window.location.hostname+ '/paymentPage/fps/fpscallback?TRANSACTION_ID='+transactionid+"&WEB_TOKEN="+webtoken+"&PAYMENT_ID="+localStorage.getItem("paymentId")); - setFpsqrcodeurl(openPASGUrl) - setFpsqrcodeurlPrd(openPASGUrlPrd) - setFpsqrcodeurlFps(openPASGUrlPrdFps) + }, + onFail: function(error){ + console.error("post onFail:", error); + setIsError(true); + setOnReady(true); + }, + onError: function(error){ + console.error("post onError:", error); + setIsError(true); + setOnReady(true); } }); @@ -313,19 +333,29 @@ const Index = () => { const cancelPayment = ()=>{ if (Object.keys(paymentData).length>0){ getPaymentStatus() - if (paymentStatusCode === "INPR"){ + if (paymentStatusCode === "INPR" || isError || paymentStatusCode === ""){ HttpUtils.post({ url: UrlUtils.CANCEL_PAYMENT_URL, params:{ "transactionid": paymentData.transactionid, "webtoken": paymentData.webtoken, - "paymentid": fpsTransctionData.paymentid + "paymentid": fpsTransctionData.paymentid || localStorage.getItem("paymentId") }, onSuccess: function(){ navigate('/paymentPage/fps/ackpage'); let page = '/paymentPage/fps/ackpage'; let stateParams = { state: { transactionid: paymentData.transactionid} } navigate(page, stateParams); + }, + onFail: function(){ + let page = '/paymentPage/fps/ackpage'; + let stateParams = { state: { transactionid: paymentData.transactionid} } + navigate(page, stateParams); + }, + onError: function(){ + let page = '/paymentPage/fps/ackpage'; + let stateParams = { state: { transactionid: paymentData.transactionid} } + navigate(page, stateParams); } }); } @@ -378,7 +408,12 @@ const Index = () => {
{"HK$ " + currencyFormat(paymentData.amount)} - {browserType==mobileBrowser? + {isError ? + + + + : + browserType==mobileBrowser? { sysEnv=="prod"? diff --git a/src/translations/en.json b/src/translations/en.json index 24e9187..194e47f 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -511,6 +511,7 @@ "fpsQrcodeTitle4":"Remaining time:", "fpsQrcodeTitle5":"s", "fpsQrcodeExpired":"QR code has expired.", + "fpsPaymentErrorMsg":"An error occurred while loading the payment. Please do not refresh the page. If the payment was not made successfully, please click 'Cancel payment' and try the payment again.", "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to gld_acct@gld.gov.hk by {date} 12:30 p.m.", "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m.", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 0ae936b..100b61f 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -90,6 +90,7 @@ "fpsQrcodeTitle4":"剩余时间:", "fpsQrcodeTitle5":"秒", "fpsQrcodeExpired":"二维码已过期", + "fpsPaymentErrorMsg":"载入付款时发生错误。请勿重新整理页面。如果付款未能成功完成，请按「取消付款」并重新尝试付款。", "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 gld_acct@gld.gov.hk", "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index 4558449..2af3014 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -90,6 +90,7 @@ "fpsQrcodeTitle4":"剩餘時間:", "fpsQrcodeTitle5":"秒", "fpsQrcodeExpired":"二維碼已過期", + "fpsPaymentErrorMsg":"載入付款時發生錯誤。請勿重新整理頁面。如果付款未能成功完成，請按「取消付款」並重新嘗試付款。", "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 gld_acct@gld.gov.hk", "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款",