alex
/
PNSPS-frontend-MaterialUI
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

add after payment success page

master
Alex Cheung 1 år sedan
förälder
ecb6a28ae3
incheckning
7cd6142c60
4 ändrade filer med 503 tillägg och 288 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +223
    -0
      src/pages/Payment/FPS/AckPage.js
  2. +96
    -109
      src/pages/Payment/FPS/FPS.js
  3. +179
    -179
      src/pages/Payment/index.js
  4. +5
    -0
      src/routes/PublicUserRoutes.js

+ 223
- 0
src/pages/Payment/FPS/AckPage.js Visa fil

@@ -0,0 +1,223 @@
// material-ui
import {
Grid,
Typography,
Stack,
// Button,
FormLabel,
} from '@mui/material';
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')));

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const AckPage = () => {
// const navigate = useNavigate()
const location = useLocation();

const [paymentData, setPaymentData] = React.useState({});
const [transactionData, setTransactionData] = React.useState({});
const [transactionDate, setTransactionDate] = React.useState("");
const [transactionTime, setTransactionTime] = React.useState("");
const [onReady, setOnReady] = React.useState(false);
const paymentStatusApi = "/api/payment/status/";
const [paymentid, setPaymentid] = React.useState("");

React.useEffect(() => {
if(location.state != undefined){
console.log(location.state)
setPaymentData(location.state)
}
}, []);

React.useEffect(() => {
if(Object.keys(transactionData).length > 0 ){
setOnReady(true);
}
}, [transactionData]);

React.useEffect(() => {
if (Object.keys(paymentData).length > 0){
const dateTime = paymentData.transactionDateTime;
const date = new Date(dateTime);
const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear();
const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
setTransactionDate(trnDate)
setTransactionTime(trnTime)
setPaymentid(paymentData.paymentid)
}
// setTransactionData(
// {
// "amount": 999.99,
// "currencycode": "HKD",
// "paymentdetail": {
// "attemptno": 1,
// "channel": "MobileWallet",
// "paymentid": "C202310268000681",
// "paymentmethod": "04",
// "result": {
// "canretry": "Y",
// "description": "CANC - Cancelled by user or Payment Server.",
// "paymentstatuscode": "CANC",
// "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
// },
// "subtype": "FPS",
// "time": "2023-10-26T09:02:17Z[UTC]"
// },
// "transactionid": "20231026170103921"
// }
// )
HttpUtils.post({
url: paymentPath+paymentStatusApi+paymentid,
params:{
"apprefid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
},
onSuccess: function(responseData){
setTransactionData(responseData)
}
});
}, [paymentData]);

return (
!onReady ?
<LoadingComponent />
:
(
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：FPS付款</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} >
<Grid container justifyContent="flex-start" alignItems="center" >
<center>
<Grid item xs={12} md={12} >

<Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
Your application and payment have been received
</Typography>

<Grid container>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Transaction Reference No:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Transaction Date:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionDate+" (DD/MM/YYYY)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Transaction Time:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionTime+" (HH:MI:SS)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
EGIS Reference No:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Payment Amount
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ "+transactionData.amount}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
Payment Method:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{transactionData.paymentdetail.subtype}
</FormLabel>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</center>
</Grid>
</Grid>
{/*row 2*/}
</Grid >
)


);
};

export default AckPage;

+ 96
- 109
src/pages/Payment/FPS/FPS.js Visa fil

@@ -38,13 +38,13 @@ const Index = () => {
const [paymentid, setPaymentid] = React.useState("");
const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
// const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
// const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
// const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
// const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
// const loadPaymentUrl = "/api/payment/wallet/fps";
const loadPaymentUrl = "/api/payment/wallet/fps";
const cancelPaymentUrl = "/api/payment/cancelpayment";
// const paymentStatusApi = "/api/payment/status/";
const paymentStatusApi = "/api/payment/status/";
// const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
// const receiverUrl = "/noti-api/payment/payment-notification";
@@ -56,13 +56,8 @@ const Index = () => {
setFpsqrcodeimgbase64("")
if(location.state != undefined){
setPaymentData(location.state)
loadForm();
}
loadForm();
currentTimer.current = setInterval(() => {
getPaymentStatus();
setTime((prevTime) => prevTime + 1);
}, 500);
return () => clearInterval(currentTimer.current);
}, []);

React.useEffect(() => {
@@ -71,86 +66,107 @@ const Index = () => {


const loadForm = () => {
const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
const convertedDateString = timeoutdatetime.replace("[UTC]", "");
setFpsmerchanttimeoutdatetime(convertedDateString)
setPaymentid("C202310268000681")
// HttpUtils.post({
// url: paymentPath+loadPaymentUrl,
// params:{
// "transactionid": paymentData.transactionid,
// "webtoken": paymentData.webtoken,
// "paymentmethod":"04,BCFP,FPS",
// "order": {
// "totalamount":paymentData.amount,
// "currency":"HKD",
// "orderdetail":
// [
// {
// "itemid": "1",
// "qty":"1",
// "unitprice":paymentData.amount,
// "amount":paymentData.amount
// },
// ]
// },
// // "locale":"<locale>",
// // "eserviceid":"<eserviceid>"
// },
// onSuccess: function(responseData){
// /*
// {
// "paymentid": "<paymentid>",
// "paymentstatus": "<paymentstatus>",
// "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
// "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
// "fpsqrcodeurl": "<fpsqrcodeurl>"
// }
// */
// setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
// setPaymentid(responseData.paymentid);
// setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
// setPaymentstatuscode(responseData.paymentstatuscode);
// // const parsedUrl = new URL(responseData.fpsqrcodeurl);
// // const fpsqrcodeurl = parsedUrl.pathname;
// // const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
// // + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
// // setFpsqrcodeurl(openPASGUrl)
// }
// });
// const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
// const convertedDateString = timeoutdatetime.replace("[UTC]", "");
// setFpsmerchanttimeoutdatetime(convertedDateString)
// setPaymentid("C202310268000681")
// setPaymentstatuscode("APPR")
HttpUtils.post({
url: paymentPath+loadPaymentUrl,
params:{
"transactionid": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"paymentmethod":"04,BCFP,FPS",
"order": {
"totalamount":paymentData.amount,
"currency":"HKD",
"orderdetail":
[
{
"itemid": "1",
"qty":"1",
"unitprice":paymentData.amount,
"amount":paymentData.amount
},
]
},
// "locale":"<locale>",
// "eserviceid":"<eserviceid>"
},
onSuccess: function(responseData){
/*
{
"paymentid": "<paymentid>",
"paymentstatus": "<paymentstatus>",
"fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
"fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
"fpsqrcodeurl": "<fpsqrcodeurl>"
}
*/
setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
setPaymentid(responseData.paymentid);

const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
const convertedDateString = timeoutdatetime.replace("[UTC]", "");
setFpsmerchanttimeoutdatetime(convertedDateString)
setPaymentstatuscode(responseData.paymentstatuscode);
// const parsedUrl = new URL(responseData.fpsqrcodeurl);
// const fpsqrcodeurl = parsedUrl.pathname;
// const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
// + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
// setFpsqrcodeurl(openPASGUrl)
}
});
currentTimer.current = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => clearInterval(currentTimer.current);
}

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 = paymentPath + payment.config.ackPagePath + timestamp;
// } else if (paymentstatuscode === 'CANC') {
// window.top.location.href = paymentPath + payment.config.indexPagePath;
// } else {
// window.top.location.href = paymentPath + payment.config.errPagePath;
// }
// },
// onError: function(){
// cancelPayment()
// clearInterval(currentTimer.current);
console.log(paymentstatuscode)
// if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
// if (paymentstatuscode === 'APPR') {
// const timestamp = Date.now();
// navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
// } else if (paymentstatuscode === 'CANC') {
// navigate('/payment');
// } else {
// alert("error")
// }
// });
// }
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 = Date.now();
navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
} else if (paymentstatuscode === 'CANC') {
window.top.location.href = paymentPath + payment.config.indexPagePath;
} else {
window.top.location.href = paymentPath + payment.config.errPagePath;
}
},
onError: function(){
cancelPayment()
clearInterval(currentTimer.current);
}
});
};
React.useEffect(() => {
const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
const currentTime = new Date;
if (timeOutDate.getTime()<currentTime.getTime()){
console.log(time)
getPaymentStatus();
if (timeOutDate.getTime()>currentTime.getTime()){
console.log("stop");
clearInterval(currentTimer.current);
}
@@ -170,35 +186,6 @@ const Index = () => {
});
}

// const getPayload = ()=>{
// HttpUtils.get({
// url: payloadUrl+"<paymenttoken>",
// onSuccess: function(responseData){
// /*
// {
// "payload": "<payload>"
// }

// */
// }
// });
// }

// const getReceiver = ()=>{
// HttpUtils.get({
// url: receiverUrl+"<paymenttoken>",
// onSuccess: function(responseData){
// /*
// {
// "payload": "<payload>"
// }

// */
// }
// });
// }


return (
!onReady ?
<LoadingComponent />


+ 179
- 179
src/pages/Payment/index.js Visa fil

@@ -82,187 +82,187 @@ const Index = () => {
}, [confirmPayment]);
const getAvailablePayment = () => {
const responseData = {
"availablepaymentmethods": [
{
"active": "Y",
"code": "04,BCFP,FPS",
"pointstonote": [
{
"content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
"order": 10,
"type": "INFO"
},
{
"content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
"order": 11,
"type": "INFO"
}
],
"subtype": "FPS"
},
{
"active": "Y",
"code": "02,BCMP,CreditCard",
"pointstonote": [
{
"content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
"order": 10,
"type": "INFO"
},
{
"content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
"order": 11,
"type": "INFO"
},
{
"content": "Merchant Name is applicable to credit card payment method only.",
"order": 40,
"type": "INFO"
},
{
"content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
"order": 41,
"type": "INFO"
},
{
"content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
"order": 42,
"type": "INFO"
},
{
"content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
"order": 43,
"type": "INFO"
}
],
"subtype": "CreditCard",
"supportedcard": [
"JCB",
"MasterCard",
"Visa"
]
},
{
"active": "Y",
"code": "03,BCMP,CreditCard",
"pointstonote": [
{
"content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
"order": 10,
"type": "INFO"
},
{
"content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
"order": 11,
"type": "INFO"
},
{
"content": "Merchant Name is applicable to credit card payment method only.",
"order": 40,
"type": "INFO"
},
{
"content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
"order": 41,
"type": "INFO"
},
{
"content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
"order": 42,
"type": "INFO"
},
{
"content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
"order": 43,
"type": "INFO"
}
],
"subtype": "CreditCard",
"supportedcard": [
"UnionPay"
]
},
{
"active": "Y",
"code": "01,PPSB,PPS",
"pointstonote": [
{
"content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
"order": 10,
"type": "INFO"
},
{
"content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
"order": 11,
"type": "INFO"
},
{
"content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
"order": 21,
"type": "INFO"
}
],
"subtype": "PPS"
}
]
};
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)
}
});
}

// HttpUtils.post({
// url: paymentPath+getAvailablePaymentUrl,
// params: {
// // "locale": local.zh,;
// "amount": totalAmount,
// // "eserviceids": [
// // "<eserviceid>", "<eserviceid>"
// // ],
// "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)
// const responseData = {
// "availablepaymentmethods": [
// {
// "active": "Y",
// "code": "04,BCFP,FPS",
// "pointstonote": [
// {
// "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
// "order": 10,
// "type": "INFO"
// },
// {
// "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
// "order": 11,
// "type": "INFO"
// }
// ],
// "subtype": "FPS"
// },
// {
// "active": "Y",
// "code": "02,BCMP,CreditCard",
// "pointstonote": [
// {
// "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
// "order": 10,
// "type": "INFO"
// },
// {
// "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
// "order": 11,
// "type": "INFO"
// },
// {
// "content": "Merchant Name is applicable to credit card payment method only.",
// "order": 40,
// "type": "INFO"
// },
// {
// "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
// "order": 41,
// "type": "INFO"
// },
// {
// "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
// "order": 42,
// "type": "INFO"
// },
// {
// "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
// "order": 43,
// "type": "INFO"
// }
// });
// ],
// "subtype": "CreditCard",
// "supportedcard": [
// "JCB",
// "MasterCard",
// "Visa"
// ]
// },
// {
// "active": "Y",
// "code": "03,BCMP,CreditCard",
// "pointstonote": [
// {
// "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
// "order": 10,
// "type": "INFO"
// },
// {
// "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
// "order": 11,
// "type": "INFO"
// },
// {
// "content": "Merchant Name is applicable to credit card payment method only.",
// "order": 40,
// "type": "INFO"
// },
// {
// "content": "Under exceptional conditions, a refund may need to be arranged. If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
// "order": 41,
// "type": "INFO"
// },
// {
// "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
// "order": 42,
// "type": "INFO"
// },
// {
// "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
// "order": 43,
// "type": "INFO"
// }
// ],
// "subtype": "CreditCard",
// "supportedcard": [
// "UnionPay"
// ]
// },
// {
// "active": "Y",
// "code": "01,PPSB,PPS",
// "pointstonote": [
// {
// "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
// "order": 10,
// "type": "INFO"
// },
// {
// "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
// "order": 11,
// "type": "INFO"
// },
// {
// "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
// "order": 21,
// "type": "INFO"
// }
// ],
// "subtype": "PPS"
// }
// }
// });
// ]
// };
// 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)
// }
// });
// }

HttpUtils.post({
url: paymentPath+getAvailablePaymentUrl,
params: {
// "locale": local.zh,;
"amount": totalAmount,
// "eserviceids": [
// "<eserviceid>", "<eserviceid>"
// ],
"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)
}
});
}
}
});
}

const getTransactionId = () => {


+ 5
- 0
src/routes/PublicUserRoutes.js Visa fil

@@ -17,6 +17,7 @@ const ProofPayment = Loadable(lazy(() => import('pages/Proof/Payment')));
const Payment_Multi = Loadable(lazy(() => import('pages/Payment')));
const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS')));
const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage')));

// ==============================|| MAIN ROUTING ||============================== //

@@ -75,6 +76,10 @@ const PublicDashboard = {
path: 'payment/fps/fpscallback',
element: <Payment_FPS_CallBack/>
},
{
path: 'payment/fps/ackpage',
element: <Payment_FPS_Ackpage/>
},
]
},
]


Skriv Förhandsgranska
Laddar…
Avbryt
Spara