|
|
@@ -43,16 +43,18 @@ const Index = () => { |
|
|
|
const [timeDownCount, setTimeDownCount] = React.useState(0); |
|
|
|
const [paymentId, setPaymentId] = React.useState(""); |
|
|
|
const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); |
|
|
|
const [browserType, setBrowserType] = React.useState(""); |
|
|
|
const mobileBrowser = "Mobile"; |
|
|
|
const desktopBrowser = "Desktop"; |
|
|
|
|
|
|
|
// const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD |
|
|
|
// const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing |
|
|
|
const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing |
|
|
|
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"; |
|
|
|
const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing |
|
|
|
// const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD |
|
|
|
|
|
|
|
|
|
|
|
//timer |
|
|
|
const currentTimer = React.useRef(); |
|
|
|
const [time, setTime] = React.useState(0); |
|
|
@@ -64,10 +66,10 @@ const Index = () => { |
|
|
|
setLocationData(location.state) |
|
|
|
if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) { |
|
|
|
console.log('Mobile web browser'); |
|
|
|
console.log(openPASGUrl) |
|
|
|
// renderOpenFPSPaymentAppTemplate(openPASGUrl, $('#openFPSPaymentAppTemplate').html()); |
|
|
|
setBrowserType(mobileBrowser) |
|
|
|
} else { |
|
|
|
console.log('Desktop web browser'); |
|
|
|
setBrowserType(desktopBrowser) |
|
|
|
} |
|
|
|
} |
|
|
|
}, []); |
|
|
@@ -97,11 +99,11 @@ const Index = () => { |
|
|
|
React.useEffect(() => { |
|
|
|
// console.log(fpsTransctionData) |
|
|
|
if(Object.keys(fpsTransctionData).length > 0 ){ |
|
|
|
setOnReady(true); |
|
|
|
setPaymentId(fpsTransctionData.paymentid) |
|
|
|
currentTimer.current = setInterval(() => { |
|
|
|
setTime((prevTime) => prevTime + 1); |
|
|
|
}, 1000); |
|
|
|
setOnReady(true); |
|
|
|
return () => clearInterval(currentTimer.current); |
|
|
|
} |
|
|
|
}, [fpsTransctionData]); |
|
|
@@ -258,32 +260,34 @@ const Index = () => { |
|
|
|
<br /> |
|
|
|
{"$HK " + paymentData.amount} |
|
|
|
</Typography> |
|
|
|
|
|
|
|
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> |
|
|
|
請掃描以下二維碼 |
|
|
|
<br /> |
|
|
|
<img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/> |
|
|
|
<br /> |
|
|
|
{paymentId} |
|
|
|
<br/> |
|
|
|
二維碼有效期限3分鐘 |
|
|
|
<br /> |
|
|
|
請在規定時間內完成付款流程 |
|
|
|
<br /> |
|
|
|
{"剩餘時間:"+timeDownCount} |
|
|
|
</Typography> |
|
|
|
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> |
|
|
|
<Button |
|
|
|
component="span" |
|
|
|
variant="contained" |
|
|
|
size="large" |
|
|
|
color="primary" |
|
|
|
onClick={()=>{ |
|
|
|
mobliePayment(); |
|
|
|
}} |
|
|
|
sx={{ m: 4 }} |
|
|
|
>請選擇支付程式付款</Button> |
|
|
|
</Typography> |
|
|
|
{browserType==mobileBrowser? |
|
|
|
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> |
|
|
|
<Button |
|
|
|
component="span" |
|
|
|
variant="contained" |
|
|
|
size="large" |
|
|
|
color="primary" |
|
|
|
onClick={()=>{ |
|
|
|
mobliePayment(); |
|
|
|
}} |
|
|
|
sx={{ m: 4 }} |
|
|
|
>請選擇支付程式付款</Button> |
|
|
|
</Typography> |
|
|
|
: |
|
|
|
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> |
|
|
|
請掃描以下二維碼 |
|
|
|
<br /> |
|
|
|
<img src={fpsTransctionData.fpsqrcodeimgbase64} alt="QR Code"/> |
|
|
|
<br /> |
|
|
|
{paymentId} |
|
|
|
<br/> |
|
|
|
二維碼有效期限3分鐘 |
|
|
|
<br /> |
|
|
|
請在規定時間內完成付款流程 |
|
|
|
<br /> |
|
|
|
{"剩餘時間:"+timeDownCount} |
|
|
|
</Typography> |
|
|
|
} |
|
|
|
<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}> |
|
|
|
<Button |
|
|
|
component="span" |
|
|
|