(null);\n\n return (\n \n Payment Information \n \n {/* PAN */}\n {\n var number = (dynamicMasked.value + appended).replace(/\\D/g, '');\n\n for (let item of dynamicMasked.compiledMasks) {\n let re = new RegExp(item.regex);\n\n if (number.match(re) != null) {\n return item;\n }\n }\n }}\n onAccept={(value: any, mask: any) => {\n const cardTypeName: string = mask.masked.currentMask.cardTypeName;\n\n const tempCardType: { [key: string]: string } = {\n 'american express': 'cc-amex',\n visa: 'cc-visa',\n jcb: 'cc-jcb',\n jcb15: 'cc-jcb',\n mastercard: 'cc-mastercard',\n unknown: 'cc-unknown',\n };\n\n setCardDisplay(tempCardType[cardTypeName]);\n\n setPaymentData((prev: any) => {\n return {\n ...prev,\n card: {\n ...prev.card,\n cardNumber: value,\n },\n };\n });\n }}\n onComplete={() => {\n expiryDateInput.current?.focus();\n expiryDateInput.current?.select();\n }}\n />\n\n {/* Expiry Date */}\n (expiryDateInput.current = el)} // access to nested input\n value={\n paymentData.card.expiryMonth + '/' + paymentData.card.expiryYear ||\n undefined\n }\n // IMask Props\n mask={'MM{/}YY'}\n blocks={{\n YY: {\n mask: IMask.MaskedRange,\n from: 0,\n to: 99,\n },\n MM: {\n mask: IMask.MaskedRange,\n from: 1,\n to: 12,\n },\n }}\n onAccept={(value: any, mask: any) => {\n const [month, year] = value.split('/');\n\n setPaymentData((prev: any) => {\n return {\n ...prev,\n card: {\n ...prev.card,\n expiryMonth: month,\n expiryYear: year,\n },\n };\n });\n }}\n onComplete={() => {\n cvcInput.current?.focus();\n cvcInput.current?.select();\n }}\n />\n\n {/* CVC */}\n (cvcInput.current = el)}\n // IMask Props\n mask={'0000'}\n onAccept={(value: any, mask: any) => {\n setPaymentData((prev: any) => {\n return {\n ...prev,\n card: {\n ...prev.card,\n cvc: value,\n },\n };\n });\n }}\n />\n \n
\n );\n};\n\nexport default CreditCard;\n","import { LoadingOverlay, Modal } from '@mantine/core';\nimport { useEffect } from 'react';\nimport { AuthStatus3DS } from '../../../../shared/enums/AuthStatus3DS.enum';\nimport {\n ThreeDSMessage,\n ThreeDSMessageContext,\n ThreeDsFormModalConfig,\n} from '../../../../shared/interfaces/ThreeDsFormModalConfig.interface';\n\n// const vSafe3dsOrigin = process.env.NEXT_PUBLIC_VESTA_3DS_ORIGIN;\n\ninterface ThreeDsFormModalProps {\n threeDsFormModalConfig: ThreeDsFormModalConfig;\n setThreeDsFormModalConfig: (params: any) => void;\n createEcomPayment: (threeDSecure: {\n authenticationStatus: string | undefined;\n errorMessage: ThreeDSMessageContext;\n transactionToken: string | undefined;\n }) => void;\n}\n\nconst ThreeDsFormModal = (props: ThreeDsFormModalProps) => {\n const {\n threeDsFormModalConfig,\n setThreeDsFormModalConfig,\n createEcomPayment,\n } = props;\n\n useEffect(() => {\n //@ts-ignore\n const challengeLifecycle = new Spreedly.ThreeDS.Lifecycle({\n environmentKey: '1TMW3B0AAJ9GPV3BKCTZBKGTVP',\n hiddenIframeLocation: 'device-fingerprint',\n challengeIframeLocation: 'challenge',\n transactionToken: threeDsFormModalConfig.transactionToken,\n challengeIframeClasses: 'challenge_iframe_size',\n });\n\n //@ts-ignore\n const statusUpdates = async (event: ThreeDSMessage) => {\n const threeDsParam = {\n transactionToken:\n event.token || threeDsFormModalConfig.transactionToken,\n errorMessage: event.context,\n authenticationStatus: AuthStatus3DS.AUTHENTICATION_FAILED,\n };\n\n if (\n event.action === 'succeeded' ||\n event.action === 'error' ||\n event.action === 'finalization-timeout' ||\n event.action === 'trigger-completion'\n ) {\n if (event.action === 'succeeded') {\n threeDsParam.authenticationStatus =\n AuthStatus3DS.SUCCESSFUL_AUTHENTICATION;\n } else if (event.action === 'error') {\n threeDsParam.errorMessage = event.context;\n } else if (event.action === 'finalization-timeout') {\n threeDsParam.errorMessage =\n '3DS authentication was not completed within the expected timeframe.';\n } else if (event.action === 'trigger-completion') {\n // TODO - Improve error message\n threeDsParam.errorMessage = 'trigger-completion';\n }\n\n setThreeDsFormModalConfig((prev: ThreeDsFormModalConfig) => ({\n ...prev,\n isLoading: true,\n }));\n\n createEcomPayment(threeDsParam);\n } else if (event.action === 'challenge') {\n document.getElementById('challenge-modal')?.classList.remove('hidden');\n }\n };\n // @ts-ignore\n Spreedly.on('3ds:status', statusUpdates);\n\n challengeLifecycle.start();\n }, []);\n\n return (\n <>\n {\n setThreeDsFormModalConfig((prev: ThreeDsFormModalConfig) => ({\n ...prev,\n isOpened: false,\n }));\n }}\n size='auto'\n padding='sm'\n hideCloseButton\n closeOnClickOutside={false}\n closeOnEscape={false}\n >\n
\n \n \n \n );\n};\n\nexport default ThreeDsFormModal;\n","export enum MinAmount {\n PHP = 15.00,\n USD = 1.00\n}\n ","import { Group, Space, Text } from '@mantine/core';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport IconButton from '@material-ui/core/IconButton';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Alert from '@material-ui/lab/Alert';\nimport axios from 'axios';\nimport { KeyLike } from 'jose';\nimport { useState } from 'react';\nimport { initialPaymentData } from '../..';\nimport { AuthStatus3DS } from '../../../../shared/enums/AuthStatus3DS.enum';\nimport { PaymayaPayResultStatus } from '../../../../shared/enums/PaymayaPayResultStatus';\nimport { TransactionResult } from '../../../../shared/enums/TransactionResult';\nimport { CreateEcomPaymentReqPayload } from '../../../../shared/interfaces/P3.request.interface';\nimport {\n ThreeDSMessageContext,\n ThreeDsFormModalConfig,\n} from '../../../../shared/interfaces/ThreeDsFormModalConfig.interface';\nimport {\n Currency,\n PaymentData,\n} from '../../../../shared/interfaces/interfaces.interface';\nimport { EncodeToBase64 } from '../../../../shared/utils/base64.util';\nimport { GenerateDateTimeSystemTrace } from '../../../../shared/utils/datetime.util';\nimport { createJYek, decJ, encJ } from '../../../../shared/utils/j.util';\nimport classes from '../classes.module.css';\nimport {\n CardGroup,\n CardItem,\n CardItemFull,\n Input,\n MaskedStyledInput,\n PayButton,\n Select,\n} from '../components';\nimport CreditCard from './CreditCard/index';\nimport ThreeDsFormModal from './ThreeDsFormModal';\nimport { MinAmount } from '../../../../shared/enums/MinAmount.enum';\n\ninterface EcomPaymentFormProps {\n paymentData: PaymentData;\n setPaymentData: (param: any) => any;\n inputHandler: (param: any) => any;\n browserInfo: string;\n}\n\nconst EcomPaymentForm = (props: EcomPaymentFormProps) => {\n const { paymentData, setPaymentData, inputHandler, browserInfo } = props;\n\n const [httpRequestIsLoading, setHttpRequestIsLoading] = useState(false);\n const [httpRequestIsError, setHttpRequestIsError] = useState({\n openAlert: false,\n message: '',\n });\n const [threeDsFormModalConfig, setThreeDsFormModalConfig] =\n useState({\n isOpened: false,\n isLoading: false,\n transactionToken: undefined,\n });\n\n const createEcomPayment = async (threeDSecure?: {\n authenticationStatus?: string;\n errorMessage?: ThreeDSMessageContext;\n transactionToken?: string;\n }) => {\n if (!validateInputs()) {\n return;\n }\n\n setHttpRequestIsLoading(true);\n\n const EcomPaymentApiUrl = `${process.env.REACT_APP_API_DOMAIN}/v1/payments/paymaya/ecom/direct`;\n const merchantBase64Credentials = EncodeToBase64(\n `${process.env.REACT_APP_CA}:${process.env.REACT_APP_PA}`\n );\n\n // Remove whitespaces from string\n const trimmedCardNumber = paymentData.card.cardNumber.replace(/\\s/g, '');\n const amountNumberInString = paymentData.amount\n .toString()\n .replaceAll(',', '');\n\n const createEcomPaymentReqPayload: CreateEcomPaymentReqPayload = {\n request: {\n merchant: {\n paymentFacilitator: {\n subMerchants: [\n {\n id: process.env.REACT_APP_CA || '',\n },\n ],\n },\n },\n payer: {\n fundingInstrument: {\n card: {\n cardNumber: trimmedCardNumber,\n expiryMonth: paymentData.card.expiryMonth,\n expiryYear: paymentData.card.expiryYear,\n csc: paymentData.card.cvc,\n firstName: paymentData.name.split(' ')[0],\n lastName: paymentData.name.split(' ')[1] || '',\n },\n },\n },\n transaction: {\n amount: {\n total: {\n currency: paymentData.currency,\n value: amountNumberInString,\n },\n },\n },\n options: {\n requestThreeDs: true,\n threeDSecure: {\n browserInfo,\n },\n },\n },\n };\n\n // Initial Checkout will not have acsUrl\n // Re-trigger of Checkout w/ 3DS will have acsUrl. This block will execute by then\n if (threeDsFormModalConfig.transactionToken) {\n if (threeDSecure) {\n createEcomPaymentReqPayload.request.options.threeDSecure = {\n ...createEcomPaymentReqPayload.request.options.threeDSecure,\n transactionToken: threeDSecure.transactionToken,\n authenticationStatus:\n threeDSecure.authenticationStatus as AuthStatus3DS,\n };\n\n if (threeDSecure.errorMessage) {\n createEcomPaymentReqPayload.request.options = {\n ...createEcomPaymentReqPayload.request.options,\n errorMessage:\n typeof threeDSecure.errorMessage === 'string'\n ? threeDSecure.errorMessage\n : undefined,\n };\n }\n }\n }\n\n let j: string;\n let jYek: KeyLike | Uint8Array;\n try {\n jYek = await createJYek(process.env.REACT_APP_KS || '');\n\n j = await encJ(JSON.stringify(createEcomPaymentReqPayload), jYek);\n } catch (err) {\n setHttpRequestIsError({\n openAlert: true,\n message: `Something went wrong. Please contact support. Reference: XPTKN${GenerateDateTimeSystemTrace()}`,\n });\n\n setHttpRequestIsLoading(false);\n return;\n }\n\n const reqBody = {\n request: {\n Token: j,\n },\n };\n\n axios\n .post(EcomPaymentApiUrl, reqBody, {\n headers: {\n Authorization: `Basic ${merchantBase64Credentials}`,\n },\n })\n .then((res: any) => {\n decJ(res.data.response.Token, jYek).then((decryptedRes: any) => {\n const { paymentTransactionReferenceNo, status, threeDs } =\n JSON.parse(decryptedRes);\n\n if (status === PaymayaPayResultStatus.APPROVED) {\n setPaymentData(initialPaymentData);\n setThreeDsFormModalConfig({\n isOpened: false,\n isLoading: false,\n transactionToken: undefined,\n });\n window.location.href = `https://status.xpay.world/transaction/${TransactionResult.SUCCESS}?id=${paymentTransactionReferenceNo}&callback_url=${process.env.REACT_APP_FOODBANK_CALLBACK_URL}`;\n } else if (status === PaymayaPayResultStatus.CHALLENGE_REQUIRED) {\n const { transactionToken } = threeDs;\n\n setThreeDsFormModalConfig({\n isOpened: true,\n isLoading: false,\n transactionToken: transactionToken,\n });\n }\n });\n })\n .catch((err: any) => {\n if (err.response?.data.response?.Token) {\n decJ(err.response.data.response.Token, jYek).then(\n (decryptedErr: any) => {\n const { status, error } = JSON.parse(decryptedErr);\n\n if (status === PaymayaPayResultStatus.DECLINED) {\n setPaymentData(initialPaymentData);\n setThreeDsFormModalConfig({\n isOpened: false,\n isLoading: false,\n transactionToken: undefined,\n });\n window.location.href = `https://status.xpay.world/transaction/${\n TransactionResult.FAILED\n }?error=${encodeURIComponent(error)}`;\n }\n }\n );\n } else if (err.response?.data.status) {\n setPaymentData(initialPaymentData);\n setThreeDsFormModalConfig({\n isOpened: false,\n isLoading: false,\n transactionToken: undefined,\n });\n window.location.href = `https://status.xpay.world/transaction/${\n TransactionResult.FAILED\n }?error=${encodeURIComponent(err.response?.data.error)}`;\n setHttpRequestIsError({\n openAlert: true,\n message: err.response?.data.error,\n });\n } else {\n setPaymentData(initialPaymentData);\n setThreeDsFormModalConfig({\n isOpened: false,\n isLoading: false,\n transactionToken: undefined,\n });\n window.location.href = `https://status.xpay.world/transaction/${\n TransactionResult.FAILED\n }?error=${encodeURIComponent(\n `Something went wrong. Please contact support. Reference: XPNTWRK${GenerateDateTimeSystemTrace()}`\n )}`;\n setHttpRequestIsError({\n openAlert: true,\n message: `Something went wrong. Please contact support.`,\n });\n }\n })\n .finally(() => {\n setHttpRequestIsLoading(false);\n });\n };\n\n const validateInputs = () => {\n if (!paymentData.name) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter your name.',\n });\n\n return false;\n } else if (!paymentData.email) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter your email.',\n });\n\n return false;\n } else if (paymentData.amount <= 0) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter a valid amount.',\n });\n\n return false;\n } else if (!paymentData.card.cardNumber) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter your card number.',\n });\n\n return false;\n } else if (!paymentData.card.expiryMonth || !paymentData.card.expiryYear) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter your card expiry month/year.',\n });\n\n return false;\n } else if (!paymentData.card.cvc) {\n setHttpRequestIsError({\n openAlert: true,\n message: 'Please enter your CSC/CVC.',\n });\n\n return false;\n } else if (paymentData.amount < MinAmount[paymentData.currency]) {\n setHttpRequestIsError({\n openAlert: true,\n message: `Minimum amount is ${paymentData.currency} ${\n MinAmount[paymentData.currency]\n }`,\n });\n\n return false;\n }\n return true;\n };\n\n return (\n \n {threeDsFormModalConfig.isOpened && (\n
\n )}\n\n {/* Full Name, Email Address */}\n
\n \n \n \n \n \n\n {/* Amount, Currency */}\n
\n \n \n setPaymentData((prev: any) => {\n return {\n ...prev,\n amount: value,\n };\n })\n }\n />\n \n \n \n PHP \n USD \n \n \n \n\n {/* PAN, Expiry Date, CVC */}\n
\n\n
\n createEcomPayment()}\n disabled={httpRequestIsLoading || httpRequestIsError.openAlert}\n >\n {httpRequestIsLoading\n ? 'Loading...'\n : `Pay ${paymentData.currency} ${paymentData.amount || '0'}`}\n \n \n\n {/* Error Alert */}\n
\n {\n setHttpRequestIsError((prev) => ({\n ...prev,\n openAlert: false,\n }));\n }}\n >\n \n\n
\n We Accept: \n\n \n \n \n
\n \n \n \n\n \n We Accept: \n \n \n Click here to view all QRPH participating banks and wallets\n \n \n \n \n \n );\n};\n\nexport default QRPaymentForm;\n","import { Box, Divider, Group, Space } from '@mantine/core';\nimport { useEffect, useState } from 'react';\nimport PaymentModeButton from '../../components/payment-mode-button/payment-mode-button';\nimport { PaymentMode } from '../../shared/enums/PaymentMode.enum';\nimport {\n Currency,\n PaymentData,\n} from '../../shared/interfaces/interfaces.interface';\nimport { GenerateBrowserInfo } from '../../shared/utils/browser-info.util';\nimport EcomPaymentForm from './PaymentForm/Ecom';\nimport QRPaymentForm from './PaymentForm/QR';\n\nexport const initialPaymentData = {\n amount: 0,\n card: {\n cardNumber: '',\n expiryMonth: '',\n expiryYear: '',\n cvc: '',\n },\n currency: Currency.PHP,\n email: '',\n name: '',\n};\n\nconst Payment = () => {\n const [paymentMode, setPaymentMode] = useState(PaymentMode.CARD);\n const [paymentData, setPaymentData] =\n useState(initialPaymentData);\n\n const [browserInfo, setBrowserInfo] = useState('');\n\n const [windowSize, setWindowSize] = useState<{ width: number; height: number }>({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n\n const inputHandler = (e: any) => {\n const { value, name } = e.target;\n\n setPaymentData((prev: any) => {\n return {\n ...prev,\n [name]: value,\n };\n });\n };\n\n const resetPaymentData = () => {\n setPaymentData(initialPaymentData);\n };\n\n const generateBrowserInfo = () => {\n setBrowserInfo(GenerateBrowserInfo(windowSize));\n };\n\n const checkWindowSize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n }\n\n useEffect(() => {\n window.addEventListener('resize', checkWindowSize);\n resetPaymentData();\n generateBrowserInfo();\n return () => {\n window.removeEventListener('resize', checkWindowSize);\n };\n }, []);\n\n return (\n <>\n \n \n \n \n \n \n\n \n {index + 1} \n {bank} \n \n );\n });\n return (\n \n \n \n Click here to go back to Payment\n \n \n Full list of QRPH participating banks and wallets \n \n Last updated: Feb 6, 2024\n \n \n \n \n \n # \n Bank/Wallet name \n \n \n {rows} \n
\n \n \n );\n}\n\nexport default QRPHBanksWallet;\n","import styled from 'styled-components';\n\nexport const PaymentContainer = styled.div`\n background: #f9f8f8;\n border: 1px solid #dddcdc;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),\n 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),\n 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);\n border-radius: 15px;\n`;\n\nexport const Header = styled.div`\n padding-top: 70px;\n padding-bottom: 15px;\n border-bottom: 1px solid #dddcdc;\n text-align: center;\n\n h2 {\n margin: 0;\n }\n`;\n\nexport const DescriptionContainer = styled.div`\n width: 80%;\n margin: auto auto;\n\n p {\n text-align: center;\n font-size: 0.857143em;\n margin-top: 5px;\n }\n\n a {\n text-decoration: none;\n color: #00afe7;\n\n :hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport const Content = styled.div`\n background: #ffffff;\n padding: 35px;\n`;\n","import { Anchor, Container, Group, Image, Paper, Text } from '@mantine/core';\nimport {\n Content,\n DescriptionContainer,\n Header,\n PaymentContainer,\n} from './components';\n\nconst Layout = (props: any) => {\n return (\n <>\n \n \n \n {props.children} \n \n\n \n \n
\n \n Powered by{' '}\n \n Xpay\n \n \n \n \n \n );\n};\n\nexport default Layout;\n","import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';\nimport Payment from '../Pages/Payment/index';\nimport QRPHBanksWallet from '../Pages/qrph-banks-wallets';\nimport Layout from '../components/Layout/index';\nimport './App.css';\n\nfunction App() {\n return (\n \n
\n \n \n \n \n
\n\t\t ,\n\tdocument.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"space\":\"classes_space__3n6dD\",\"iconRelative\":\"classes_iconRelative__3NV9d\",\"fas\":\"classes_fas__2wHyC\",\"far\":\"classes_far__1bFU2\",\"cardnumber\":\"classes_cardnumber__15NE_\",\"expirationdate\":\"classes_expirationdate__2ErvH\",\"securitycode\":\"classes_securitycode__30U76\",\"currency\":\"classes_currency__1AOgU\",\"input\":\"classes_input__Rmxdj\",\"creditCardInput\":\"classes_creditCardInput__162pV\"};"],"sourceRoot":""}