From e20135e8006242bbb93191132d0f42ce6b17e54a Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Fri, 27 Oct 2023 18:20:48 +0800 Subject: [PATCH] FPS update --- src/auth/utils.js | 2 + src/pages/Payment/FPS/FPS.js | 109 ++++++++++++++++-------- src/pages/Payment/MultiPaymentWindow.js | 56 +++++++++--- src/pages/Payment/index.js | 71 ++++++--------- 4 files changed, 150 insertions(+), 88 deletions(-) diff --git a/src/auth/utils.js b/src/auth/utils.js index 6678a13..30fef45 100644 --- a/src/auth/utils.js +++ b/src/auth/utils.js @@ -12,6 +12,8 @@ export const hostPath = `http://${hostname}:${hostPort}`; //export const apiPath = `http://192.168.0.112:8090/api`; export const apiPath = `${hostPath}/api`; //export const apiPath = `/api`; +export const paymentPath = `https://pnspsdev.gld.gov.hk/payment`; + export const isUserLoggedIn = () => { return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js index 49855bd..f9c2885 100644 --- a/src/pages/Payment/FPS/FPS.js +++ b/src/pages/Payment/FPS/FPS.js @@ -9,6 +9,9 @@ import * as React from "react"; import * as HttpUtils from "utils/HttpUtils"; import { useNavigate } from "react-router-dom"; import FpsIcon from "assets/images/icons/fps.svg"; +import { useLocation } from 'react-router-dom'; +import {paymentPath} from "auth/utils"; +// import {poll} from "utils/Utils"; import Loadable from 'components/Loadable'; const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); @@ -28,53 +31,56 @@ const BackgroundHead = { const Index = () => { const navigate = useNavigate() + const location = useLocation(); - const [fpsqrcodeimgUrl, setFpsqrcodeimgUrl] = React.useState(); + const [paymentData, setPaymentData] = React.useState({}); const [onReady, setOnReady] = React.useState(false); + const [paymentid, setPaymentid] = React.useState(""); + const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState(""); + const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState(""); + const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState(""); 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"; React.useEffect(() => { + setFpsqrcodeimgbase64("") + if(location.state != undefined){ + setPaymentData(location.state) + } loadForm(); }, []); React.useEffect(() => { setOnReady(true); - }, [fpsqrcodeimgUrl]); + }, [fpsqrcodeimgbase64]); const loadForm = () => { - HttpUtils.post({ - url: loadPaymentUrl, + url: paymentPath+loadPaymentUrl, params:{ - "transactionid": "", - "webtoken": "", - "paymentmethod": "", + "transactionid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + "paymentmethod":"04,BCFP,FPS", "order": { - "totalamount":"", - "currency":"", + "totalamount":paymentData.amount, + "currency":"HKD", "orderdetail": [ { - "itemid": "", - "qty":"", - "unitprice":"", - "amount":"" - }, - { - "itemid": "", - "qty":"", - "unitprice":"", - "amount":"" + "itemid": "1", + "qty":"1", + "unitprice":paymentData.amount, + "amount":paymentData.amount }, ] }, - "locale":"", - "eserviceid":"" + // "locale":"", + // "eserviceid":"" }, onSuccess: function(responseData){ /* @@ -86,27 +92,60 @@ const Index = () => { "fpsqrcodeurl": "" } */ - - setFpsqrcodeimgUrl(responseData.fpsqrcodeurl); + setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64); + setPaymentid(responseData.paymentid); + setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime); + const parsedUrl = new URL(responseData.fpsqrcodeurl); + const fpsqrcodeurl = parsedUrl.pathname + setFpsqrcodeurl(fpsqrcodeurl) + polling() } }); } + const getPaymentStatus = () => { + HttpUtils.post({ + url: paymentPath+paymentStatusApi+paymentid, + params:{ + "apprefid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + }, + onSuccess: function(responseData){ + const paymentstatuscode = responseData.paymentdetail.result.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; + } + }, + onError: function(){ + cancelPayment() + } + }); + }; + + useEffect(() => { + const timeOut = fpsmerchanttimeoutdatetime=now()?500:null; + const interval = setInterval(() => { + getPaymentStatus(); + console.log("test"); + }, timeOut); + + return () => clearInterval(interval); + }, []); + const cancelPayment = ()=>{ HttpUtils.post({ - url: cancelPaymentUrl, + url: paymentPath+cancelPaymentUrl, params:{ - "transactionid": "", - "webtoken": "", - "paymentid": "" + "transactionid": paymentData.transactionid, + "webtoken": paymentData.webtoken, + "paymentid": paymentid }, onSuccess: function(){ - /* - { - "resultcode": "", - "reason": "" - } - */ navigate("/dashboard"); } }); @@ -165,13 +204,13 @@ const Index = () => {
支付金額
- $ + {"$HK " + paymentData.amount} 請掃描以下二維碼
- QR Code + QR Code
二維碼有效期限10分鐘
diff --git a/src/pages/Payment/MultiPaymentWindow.js b/src/pages/Payment/MultiPaymentWindow.js index 6d81b2a..dca60f7 100644 --- a/src/pages/Payment/MultiPaymentWindow.js +++ b/src/pages/Payment/MultiPaymentWindow.js @@ -24,12 +24,27 @@ const MultiPaymentWindow = (props) => { const windowTitle = "請選擇付款方式"; const [content, setContent] = useState(); + const [paymentMethod, setPaymentMethod] = useState(""); useEffect(() => { - console.log(props.fpsStatus) - console.log(props.creditCardStatus) - console.log(props.unionPayStatus) - console.log(props.ppsStatus) + console.log(paymentMethod) + }, [paymentMethod]); + + const selectedPaymentMethodHandle = (method) => () =>{ + setPaymentMethod(method) + props.setSelectedPaymentMethod(method); + }; + + const confirmPaymentHandle = () => () =>{ + props.setConfirmPayment(true); + }; + + + useEffect(() => { + if(props.selectedPaymentMethod === ""){ + setPaymentMethod("") + } + setPaymentMethod if(props.availableMethods.length > 0){ setContent( @@ -69,27 +84,48 @@ const MultiPaymentWindow = (props) => { - - - - + + + + {paymentMethod !=""? + + + + + 已選擇付款方式: + + + + + {paymentMethod} + + + + + : null} ) }else{ @@ -101,7 +137,7 @@ const MultiPaymentWindow = (props) => { ) } - }, [props.open]); + }, [props.open,paymentMethod]); const formik = useFormik({ initialValues: ({ @@ -145,7 +181,7 @@ const MultiPaymentWindow = (props) => { - diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js index 9513b0b..13395fa 100644 --- a/src/pages/Payment/index.js +++ b/src/pages/Payment/index.js @@ -5,6 +5,8 @@ import Loadable from 'components/Loadable'; const MultiPaymentWindow = Loadable(lazy(() => import('./MultiPaymentWindow'))); // const FPS = Loadable(React.lazy(() => import('./FPS'))); import {useEffect, useState} from "react"; +import {useNavigate} from "react-router-dom"; +import {paymentPath} from "auth/utils"; import { Button, @@ -27,20 +29,24 @@ const BackgroundHead = { const Index = () => { // const getAvailablePaymentUrl = "/payment/api/payment/availability"; const getTransactionIdUrl = "/payment/api/payment/transaction"; + const navigate = useNavigate() // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"}; // const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps']; const [totalAmount,setTotalAmount] = useState(0); const id =1; + + + //statusWindow + const [open, setOpen] = useState(false); const [availableMethods,setAvailableMethods] = useState([]); const [transactionData,setTransactionData] = useState({}); const [fpsStatus,setFPSStatus] = useState({}); const [creditCardStatus,setCreditCardStatus] = useState({}); const [unionPayStatus,setUnionPayStatus] = useState({}); const [ppsStatus,setPPSStatus] = useState({}); - - //statusWindow - const [open, setOpen] = useState(false); + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); + const [confirmPayment, setConfirmPayment] = useState(false); useEffect(() => { if(id > 0 ){ @@ -55,12 +61,25 @@ const Index = () => { const paymentClick = () => { setTotalAmount(totalAmount); + setSelectedPaymentMethod("") + setConfirmPayment(false) if (totalAmount>0){ setOpen(true) getAvailablePayment() getTransactionId() } }; + + useEffect(() => { + if (confirmPayment){ + setOpen(false); + if(selectedPaymentMethod === "FPS"){ + navigate('/payment/fps', {state:{amount:totalAmount,transactionid:"",webtoken:""} }); + // navigate('/payment/fps', {state:{amount:totalAmount,transactionid:transactionData.transactionid,webtoken:transactionData.webtoken} }); + } + + } + }, [confirmPayment]); const getAvailablePayment = () => { const responseData = { @@ -125,7 +144,7 @@ const Index = () => { ] }, { - "active": "N", + "active": "Y", "code": "03,BCMP,CreditCard", "pointstonote": [ { @@ -211,7 +230,7 @@ const Index = () => { } // HttpUtils.post({ - // url: getAvailablePaymentUrl, + // url: paymentPath+getAvailablePaymentUrl, // params: { // // "locale": local.zh,; // "amount": totalAmount, @@ -248,7 +267,7 @@ const Index = () => { const getTransactionId = () => { HttpUtils.get({ - url: getTransactionIdUrl, + url: paymentPath+getTransactionIdUrl, onSuccess: (responseData)=>{ const transactionData = responseData; setTransactionData(transactionData) @@ -256,43 +275,6 @@ const Index = () => { }); } - // const startFPSTransaction = () => { - // HttpUtils.post({ - // url: getAvailablePaymentUrl, - // params: { - // // "locale": local.zh,; - // "amount": totalAmount, - // // "eserviceids": [ - // // "", "" - // // ], - // "preferpaymentmethods": preferpaymentmethods - // }, - // onSuccess: (responseData)=>{ - // let availableMethods = responseData.availablepaymentmethods; - // setAvailableMethods(availableMethods); - // if (availableMethods.length>0){ - // availableMethods.forEach((method)=>{ - // if(method.subtype === "FPS" ){ - // setFPSStatus(method) - // }else if (method.subtype === "CreditCard"){ - // method.supportedcard.forEach((supportedcard)=>{ - // if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){ - // setCreditCardStatus(method) - // } else { - // if (supportedcard === "UnionPay"){ - // setUnionPayStatus(method) - // } - // } - // }) - // }else if (method.subtype === "PPS" ){ - // setPPSStatus(method) - // } - // }); - // } - // } - // }); - // } - return ( @@ -337,6 +319,9 @@ const Index = () => { creditCardStatus={creditCardStatus} unionPayStatus={unionPayStatus} ppsStatus={ppsStatus} + setSelectedPaymentMethod={setSelectedPaymentMethod} + selectedPaymentMethod={selectedPaymentMethod} + setConfirmPayment={setConfirmPayment} /> {/*row 2*/}