+
+ 公共啟事：FPS付款
+
+
+ + 支付金額 +
+ $ +
+
+ + 二維碼有效期限10分鐘 +
+ 請在規定時間內完成付款流程 +
')); + + const paymentStatusApi = async () => { + const paymentStatusResp = await payment.paymentEnquiry(transactionid, webtoken); + return paymentStatusResp; + } + const validatePaymentStatus = paymentStatusResp => { + if (paymentStatusResp.paymentdetail.result.paymentstatuscode !== 'INPR') { + return true; + } + return false; + } + + renderFpsQRCodeTemplate(fpsQRCodeImgBase64, $('#fpsQRCodeTemplate').html()); + payment.showLog('fpsQRCodeImgBase64:' + fpsQRCodeImgBase64); + payment.showLog('fpsPollInterval:' + payment.config.fpsPollInterval); + payment.showLog('fpsMerchantTimeoutDateTime:' + fpsMerchantTimeoutDateTime); + + if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) { + payment.showLog('Mobile web browser'); + renderOpenFPSPaymentAppTemplate(openPASGUrl, $('#openFPSPaymentAppTemplate').html()); + } else { + payment.showLog('Desktop web browser'); + } + + poll({ + fn: paymentStatusApi, + validate: validatePaymentStatus, + interval: payment.config.fpsPollInterval, + timeout: fpsMerchantTimeoutDateTime + }).then(resp => { + sessionStorage.setItem('walletRsp', JSON.stringify(resp)); + + const paymentstatuscode = resp.paymentdetail.result.paymentstatuscode; + payment.showLog('pollForPaymentStatus:' + 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; + } + }).catch(err => { + payment.showLog('pollForPaymentStatus error: ' + err); + cancelFPSPayment(); + window.top.location.href = payment.config.domain + payment.config.errPagePath; + }); + +} + +function renderFpsQRCodeTemplate(fpsQRCodeImgBase64, template) { + // payment.showLog('template:' + template); + Mustache.parse(template); + const rendered = Mustache.render(template, {fpsQRCodeImgBase64: fpsQRCodeImgBase64}); + $('#fpsQRCodePanel').html(rendered); + // $('#fpsQRCodePanel').removeClass('hidden'); +} + +function renderOpenFPSPaymentAppTemplate(openPASGUrl, template) { + payment.showLog('renderOpenFPSPaymentAppTemplate template:' + template); + payment.showLog('renderOpenFPSPaymentAppTemplate openPASGUrl:' + openPASGUrl); + Mustache.parse(template); + const rendered = Mustache.render(template, {openPASGUrl: openPASGUrl}); + payment.showLog('renderOpenFPSPaymentAppTemplate rendered:' + rendered); + $('#openFPSPaymentAppContent').html(rendered); + // $('#openFPSPaymentApp').removeClass('hidden'); +} + +function cancelFPSPayment() { + const walletSession = sessionStorage.getItem('walletPayment'); + const walletPayment = $.parseJSON(walletSession); + const walletRspSession = sessionStorage.getItem('walletRsp'); + const walletRsp = $.parseJSON(walletRspSession); + const reqJson = { + 'transactionid':walletPayment.transactionid, + 'webtoken':walletPayment.webtoken, + 'paymentid': walletRsp.paymentid, + } + payment.cancelPayment(reqJson); +} + +function cancelBtnOnClick(event) { + event.onclick=null; + $('#cancelBtnIcon').remove(); + $('#cancelBtn').removeClass("btn-danger").addClass("btn-secondary disabled"); + $('#cancelBtnText').html('Cancelling ... '); + +} diff --git a/src/pages/Payment/FPS/index.js b/src/pages/Payment/FPS/index.js new file mode 100644 index 0000000..11c9f24 --- /dev/null +++ b/src/pages/Payment/FPS/index.js @@ -0,0 +1,12 @@ +import * as React from "react"; +import Loadable from 'components/Loadable'; +const FPS = Loadable(React.lazy(() => import('./FPS'))); + + +const Index = () => { + return ( +
", // e.g. "02,BCMP,ApplePay" = "PAYMENT_MTD_CODE, FI_CODE, subtype"
+ "subtype": "", //ApplePay, AndroidPay, Visa, MasterCard, CreditCard, PPS, eChq
+ "active":"",//Y/N
+ "pointstonote":[
+ {
+ "type":"",
+ "content":"",
+ "order":
+ } , ...
+ ]
+ "supportedcard"
+ :[
+ "",... //Visa, MasterCard
+ ]
+ },...
+ ]
+ }
+ */
+ }
+ });
+ }
+
+ const getTransactionId = () => {
+ HttpUtils.get({
+ url: getTransactionIdUrl,
+ onSuccess: (responseData)=>{
+ /*
+ {
+ "transactionid":""
+ }
+ */
+ }
+ });
+ }
+
+ return (
+