Skip to content

S
sweepstake
Commit 20162342 by Arjun Jhukal
Options

updated the new changes for fortpay

parent 3535764f
Showing with 105 additions and 63 deletions
.claude/settings.json
{ {
"permissions": { "permissions": {
"allow": [
"WebFetch(domain:secure.fppgateway.com)",
"WebFetch(domain:secure.networkmerchants.com)"
],
"additionalDirectories": [ "additionalDirectories": [
"d:\\Makura\\getFirekirin\\src\\app\\api\\dfl-proxy" "d:\\Makura\\getFirekirin\\src\\app\\api\\dfl-proxy"
] ]
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/FortPay.tsx
...@@ -9,7 +9,7 @@ import { Box, Button, FormHelperText, InputLabel, OutlinedInput, Typography } fr ...@@ -9,7 +9,7 @@ import { Box, Button, FormHelperText, InputLabel, OutlinedInput, Typography } fr
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import Script from 'next/script'; import Script from 'next/script';
import { useState } from 'react'; import { useRef, useState } from 'react';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { PaymentModeProps } from '.'; import { PaymentModeProps } from '.';
...@@ -17,7 +17,15 @@ declare global { ...@@ -17,7 +17,15 @@ declare global {
interface Window { interface Window {
CollectJS: { CollectJS: {
configure: (config: object) => void; configure: (config: object) => void;
startPaymentRequest: () => void; startPaymentRequest: (billing?: {
billingFirstName?: string;
billingLastName?: string;
billingAddress1?: string;
billingCity?: string;
billingState?: string;
billingZip?: string;
billingCountry?: string;
}) => void;
}; };
} }
} }
...@@ -29,13 +37,14 @@ type CardFieldValidity = { ...@@ -29,13 +37,14 @@ type CardFieldValidity = {
}; };
const billingSchema = Yup.object({ const billingSchema = Yup.object({
fname: Yup.string().required('First name is required'), first_name: Yup.string().required('First name is required').min(1, 'First name is required'),
lname: Yup.string().required('Last name is required'), last_name: Yup.string().required('Last name is required').min(1, 'Last name is required'),
address1: Yup.string().required('Address is required'), address: Yup.string().required('Address is required').min(1, 'Address is required'),
city: Yup.string().required('City is required'), city: Yup.string().required('City is required').min(1, 'City is required'),
state: Yup.string().required('State is required'), state: Yup.string().required('State is required').min(1, 'State is required'),
zip: Yup.string() zip: Yup.string()
.required('Zip code is required') .required('Zip code is required')
.min(1, 'Zip code is required')
.matches(/^\d{5}(-\d{4})?$/, 'Enter a valid zip code'), .matches(/^\d{5}(-\d{4})?$/, 'Enter a valid zip code'),
}); });
...@@ -53,24 +62,32 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -53,24 +62,32 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
cvv: false, cvv: false,
}); });
const [cardTouched, setCardTouched] = useState(false); const [cardTouched, setCardTouched] = useState(false);
const billingRef = useRef<{ first_name: string; last_name: string; address: string; city: string; state: string; zip: string; }>({ first_name: '', last_name: '', address: '', city: '', state: '', zip: '' });
const formik = useFormik({ const formik = useFormik({
initialValues: { initialValues: {
fname: user?.first_name || '', first_name: user?.first_name || '',
lname: user?.last_name || '', last_name: user?.last_name || '',
address1: user?.address || '', address: user?.address || '',
city: user?.city || '', city: user?.city || '',
state: user?.state || '', state: user?.state || '',
zip: user?.postal_code || '', zip: user?.postal_code || '',
}, },
validationSchema: billingSchema, validationSchema: billingSchema,
onSubmit: () => { onSubmit: (values) => {
setCardTouched(true);
const allCardValid = cardValidity.ccnumber && cardValidity.ccexp && cardValidity.cvv; const allCardValid = cardValidity.ccnumber && cardValidity.ccexp && cardValidity.cvv;
if (!allCardValid) return; if (!allCardValid) return;
console.log('All fields valid, starting CollectJS payment request'); billingRef.current = values;
if (typeof window !== 'undefined' && window.CollectJS) { if (typeof window !== 'undefined' && window.CollectJS) {
window.CollectJS.startPaymentRequest(); window.CollectJS.startPaymentRequest({
billingFirstName: values.first_name,
billingLastName: values.last_name,
billingAddress1: values.address,
billingCity: values.city,
billingState: values.state,
billingZip: values.zip,
billingCountry: 'US',
});
} }
}, },
}); });
...@@ -80,6 +97,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -80,6 +97,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
window.CollectJS.configure({ window.CollectJS.configure({
variant: 'inline', variant: 'inline',
paymentType: 'cc',
customCss: { customCss: {
'border-radius': '27px', 'border-radius': '27px',
border: '1px solid rgba(255,255,255,0.2)', border: '1px solid rgba(255,255,255,0.2)',
...@@ -96,31 +114,46 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -96,31 +114,46 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
color: 'rgba(0,0,0,0.4)', color: 'rgba(0,0,0,0.4)',
}, },
callback: async (response: any) => { callback: async (response: any) => {
try { console.log('CollectJS response:', {response, values: billingRef.current});
await payViaFortPay({ if (response) {
id, try {
amount, await payViaFortPay({
type: type as PaymentModeProps, id,
payment_token: response.token, amount,
bin: response.card.bin, type: type as PaymentModeProps,
exp: response.card.exp, payment_token: response.token,
number: response.card.number, bin: response.card?.bin,
hash: response.card.hash, exp: response.card?.exp,
}).unwrap(); number: response.card?.number,
backupAuthToCookies(); hash: response.card?.hash || undefined,
first_name: billingRef.current.first_name,
last_name: billingRef.current.last_name,
address: billingRef.current.address,
city: billingRef.current.city,
state: billingRef.current.state,
zip: billingRef.current.zip,
}).unwrap();
backupAuthToCookies();
router.push(`/buy-coins/${id}/success`); router.push(`/buy-coins/${id}/success`);
} catch (e: any) { } catch (e: any) {
console.error('Payment error:', e); dispatch(
showToast({
message: e?.data?.message || 'Unable to deposit',
variant: ToastVariant.ERROR,
})
);
}
}
else {
dispatch( dispatch(
showToast({ showToast({
message: e?.data?.message || 'Unable to deposit', message: 'Unable to connect to Fortpay',
variant: ToastVariant.ERROR, variant: ToastVariant.ERROR,
}) })
); );
} }
}, },
// CollectJS calls this whenever a field's validity changes
validationCallback: (field: string, status: boolean, _message: string) => { validationCallback: (field: string, status: boolean, _message: string) => {
setCardValidity((prev) => ({ ...prev, [field]: status })); setCardValidity((prev) => ({ ...prev, [field]: status }));
}, },
...@@ -148,58 +181,58 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -148,58 +181,58 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
{/* ── Billing fields ── */} {/* ── Billing fields ── */}
<div className="form-group"> <div className="form-group">
<InputLabel htmlFor="name">First Name <span className="text-red-500">*</span></InputLabel> <InputLabel htmlFor="first_name">First Name <span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
id="fname" id="first_name"
name="fname" name="first_name"
type="text" type="text"
placeholder="First Name" placeholder="First Name"
value={formik.values.fname} value={formik.values.first_name}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.fname && Boolean(formik.errors.fname)} error={(formik.touched.first_name || formik.submitCount > 0) && Boolean(formik.errors.first_name)}
fullWidth fullWidth
/> />
{formik.touched.fname && formik.errors.fname && ( {(formik.touched.first_name || formik.submitCount > 0) && formik.errors.first_name && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.fname}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.first_name}</FormHelperText>
)} )}
</div> </div>
<div className="form-group"> <div className="form-group">
<InputLabel htmlFor="name">Last Name <span className="text-red-500">*</span></InputLabel> <InputLabel htmlFor="last_name">Last Name <span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
id="lname" id="last_name"
name="lname" name="last_name"
type="text" type="text"
placeholder="Last Name" placeholder="Last Name"
value={formik.values.lname} value={formik.values.last_name}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.lname && Boolean(formik.errors.lname)} error={(formik.touched.last_name || formik.submitCount > 0) && Boolean(formik.errors.last_name)}
fullWidth fullWidth
/> />
{formik.touched.lname && formik.errors.lname && ( {(formik.touched.last_name || formik.submitCount > 0) && formik.errors.last_name && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.lname}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.last_name}</FormHelperText>
)} )}
</div> </div>
<div className="form-group"> <div className="form-group">
<InputLabel htmlFor="address1">Address<span className="text-red-500">*</span></InputLabel> <InputLabel htmlFor="address">Address<span className="text-red-500">*</span></InputLabel>
<OutlinedInput <OutlinedInput
id="address1" id="address"
name="address1" name="address"
type="text" type="text"
placeholder="Street Address" placeholder="Street Address"
value={formik.values.address1} value={formik.values.address}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.address1 && Boolean(formik.errors.address1)} error={(formik.touched.address || formik.submitCount > 0) && Boolean(formik.errors.address)}
fullWidth fullWidth
/> />
{formik.touched.address1 && formik.errors.address1 && ( {(formik.touched.address || formik.submitCount > 0) && formik.errors.address && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.address1}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.address}</FormHelperText>
)} )}
</div> </div>
...@@ -213,10 +246,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -213,10 +246,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
value={formik.values.city} value={formik.values.city}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.city && Boolean(formik.errors.city)} error={(formik.touched.city || formik.submitCount > 0) && Boolean(formik.errors.city)}
fullWidth fullWidth
/> />
{formik.touched.city && formik.errors.city && ( {(formik.touched.city || formik.submitCount > 0) && formik.errors.city && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.city}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.city}</FormHelperText>
)} )}
</div> </div>
...@@ -231,10 +264,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -231,10 +264,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
value={formik.values.state} value={formik.values.state}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.state && Boolean(formik.errors.state)} error={(formik.touched.state || formik.submitCount > 0) && Boolean(formik.errors.state)}
fullWidth fullWidth
/> />
{formik.touched.state && formik.errors.state && ( {(formik.touched.state || formik.submitCount > 0) && formik.errors.state && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.state}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.state}</FormHelperText>
)} )}
</div> </div>
...@@ -249,10 +282,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -249,10 +282,10 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
value={formik.values.zip} value={formik.values.zip}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.zip && Boolean(formik.errors.zip)} error={(formik.touched.zip || formik.submitCount > 0) && Boolean(formik.errors.zip)}
fullWidth fullWidth
/> />
{formik.touched.zip && formik.errors.zip && ( {(formik.touched.zip || formik.submitCount > 0) && formik.errors.zip && (
<FormHelperText error sx={{ ml: '14px' }}>{formik.errors.zip}</FormHelperText> <FormHelperText error sx={{ ml: '14px' }}>{formik.errors.zip}</FormHelperText>
)} )}
</div> </div>
...@@ -291,12 +324,12 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type: ...@@ -291,12 +324,12 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
</div> </div>
<Button <Button
type="submit" type="button"
id="payButton"
variant="contained" variant="contained"
color="primary" color="primary"
className="mt-4!" className="mt-4!"
disabled={isLoading} disabled={isLoading}
onClick={() => { setCardTouched(true); formik.submitForm(); }}
> >
{isLoading ? 'Processing Payment…' : 'Proceed Payment'} {isLoading ? 'Processing Payment…' : 'Proceed Payment'}
</Button> </Button>
......
src/services/transaction.ts
...@@ -72,10 +72,10 @@ export const transactionApi = createApi({ ...@@ -72,10 +72,10 @@ export const transactionApi = createApi({
}), }),
deposit: builder.mutation<DepositResponseProps, DepositProps>({ deposit: builder.mutation<DepositResponseProps, DepositProps>({
query: ({ id, amount, type, payment_token, number, hash, exp, bin, status }) => ({ query: ({ id, amount, type, payment_token, number, hash, exp, bin, status, first_name, last_name, address, city, state, zip }) => ({
url: `/api/payment/${id}`, url: `/api/payment/${id}`,
method: "POST", method: "POST",
body: { amount: amount, type: type, payment_token, number, hash, exp, bin ,status} body: { amount, type, payment_token, number, hash, exp, bin, status, first_name, last_name, address, city, state, zip }
}), }),
invalidatesTags: ["Deposit"] invalidatesTags: ["Deposit"]
}), }),
......
src/types/transaction.ts
...@@ -12,7 +12,12 @@ export interface DepositProps { ...@@ -12,7 +12,12 @@ export interface DepositProps {
number?: string; number?: string;
hash?: string; hash?: string;
status?: "success" | "failed"; status?: "success" | "failed";
// type: response.card.type first_name?: string;
last_name?: string;
address?: string;
city?: string;
state?: string;
zip?: string;
} }
export interface DepositUrlProps { export interface DepositUrlProps {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment