Skip to content

S
sweepstake
Commit b17fece5 by Arjun Jhukal
Options

implemented the new fort pay payment gateway for the deposit

parent 76a219fb
Showing with 155 additions and 236 deletions
src/components/pages/auth/register/index.tsx
...@@ -330,8 +330,6 @@ export default function RegisterPage() { ...@@ -330,8 +330,6 @@ export default function RegisterPage() {
</div> </div>
</div> </div>
<div className="col-span-2 lg:col-span-3"> <div className="col-span-2 lg:col-span-3">
<div className="input__field"> <div className="input__field">
<InputLabel htmlFor="phone">Phone <span className="text-red-500">*</span></InputLabel> <InputLabel htmlFor="phone">Phone <span className="text-red-500">*</span></InputLabel>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/FortPay.tsx 0 → 100644
'use client';
import { useAppDispatch, useAppSelector } from '@/hooks/hook';
import { useDepositMutation } from '@/services/transaction';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { DepositProps } from '@/types/transaction';
import { Button, InputLabel, OutlinedInput } from '@mui/material';
import Script from 'next/script';
import { PaymentModeProps } from '.';
declare global {
interface Window {
CollectJS: {
configure: (config: {
paymentType: string;
callback: (response: any) => void;
}) => void;
};
}
}
export default function PaymentForm({ id, amount, type }: DepositProps & { type: PaymentModeProps }) {
const dispatch = useAppDispatch();
const user = useAppSelector((state) => state.auth.user);
const [payViaFortPay, { isLoading }] = useDepositMutation();
const handleCollectJSLoad = () => {
if (typeof window !== 'undefined' && window.CollectJS) {
window.CollectJS.configure({
paymentType: 'cc',
callback: async (response) => {
try {
await payViaFortPay({
id: id,
amount: amount,
type: type as PaymentModeProps,
payment_token: response.token
}).unwrap()
}
catch (e: any) {
dispatch(showToast({
message: e?.data?.message || "Unable to deposit",
variant: ToastVariant.ERROR
}))
}
}
});
}
};
return (
<>
<Script
src="https://secure.fppgateway.com/token/Collect.js"
data-tokenization-key="NAhDuk-7V4u2u-tUAsT5-dCqbH5"
strategy="afterInteractive"
onReady={handleCollectJSLoad}
/>
<form className="theForm">
<div className="formInner flex flex-col gap-3 md:grid md:grid-cols-2">
<div className="form-group">
<InputLabel htmlFor="fname">First Name </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="First Name" name="fname" defaultValue={user?.first_name} />
</div>
<div className="form-group">
<InputLabel htmlFor="lname">Last Name </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Last Name" name="lname" defaultValue={user?.last_name} />
</div>
<div className="form-group">
<InputLabel htmlFor="address1">Address </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Street Address" name="address1" defaultValue={user?.address} />
</div>
<div className="form-group">
<InputLabel htmlFor="city">City </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="City" name="city" defaultValue={user?.city} />
</div>
<div className="form-group">
<InputLabel htmlFor="state">State </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="State" name="state" defaultValue={user?.state} />
</div>
<div className="form-group">
<InputLabel htmlFor="zip">Zip Code </InputLabel>
<OutlinedInput type="text" className="form-control" placeholder="Zip code" name="zip" defaultValue={""} />
</div>
</div>
{/* <OutlinedInput type="submit" id="payButton" value="Pay $5" className="btn btn-primary btn-block" /> */}
<Button type="submit" id="payButton" variant='contained' color='primary' className='mt-4!'>{isLoading ? "Proceeding Payment" : "Proceed Payment"}</Button>
</form>
<div id="paymentTokenInfo"></div>
</>
);
}
\ No newline at end of file
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
// "use client";
// import GlassWrapper from '@/components/molecules/GlassWrapper';
// import { useAppDispatch } from '@/hooks/hook';
// import BitCoinIcon from '@/icons/BitCoinIcon';
// import GoldCoinIcon from '@/icons/GoldCoinIcon';
// import { useDepositMutation } from '@/services/transaction';
// import { showToast, ToastVariant } from '@/slice/toastSlice';
// import { Box, Button } from '@mui/material';
// import { TickCircle } from '@wandersonalwes/iconsax-react';
// import Image from 'next/image';
// import { useRouter } from 'next/navigation';
// import React from 'react';
// type PaymentModeProps = "crypto" | "idem"
// export default function CheckoutPage({ amount, slug, bonus }: {
// amount: number;
// slug: string;
// bonus: number
// }) {
// const dispatch = useAppDispatch();
// const router = useRouter();
// const [getPaymentLink, { isLoading: gettingLink }] = useDepositMutation();
// const [currentPaymentMode, setCurrentPaymentMode] = React.useState("crypto");
// // console.log(pathname)
// return (
// <section className="checkout__root">
// <div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12">
// <div className="col-span-12 lg:col-span-4 ">
// <Box className="coin__card" sx={{
// borderRadius: "16px",
// padding: "16px",
// border: '1px solid #B801C0',
// background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)',
// boxShadow: '0 0 24px 0 rgba(234, 3, 91, 0.20)'
// }}>
// <div className="title">
// <h2 className='text-[28px]'>${amount}</h2>
// </div>
// <div className="footer mt-10">
// <div className="coin-info flex justify-between items-center py-3 px-4"
// style={{
// borderRadius: "16px",
// background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
// }}
// >
// <div className="coin flex items-center gap-1">
// <GoldCoinIcon />
// <span className='text-[12px]'>Gold Coins</span>
// </div>
// <p>
// <strong className='text-[16px] block'>{amount ? amount * 100 : ""}</strong>
// </p>
// </div>
// <div className="coin-info flex justify-between items-center py-3 px-4 mt-1"
// style={{
// borderRadius: "16px",
// background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
// }}
// >
// <div className="coin flex items-center gap-1">
// <GoldCoinIcon />
// <span className='text-[12px]'>Free Sweeps Coins</span>
// </div>
// <p>
// <strong className='text-[16px] block'>{bonus}</strong>
// </p>
// </div>
// </div>
// </Box>
// </div>
// <div className="col-span-12 lg:col-span-8">
// <Box>
// <h1 className='mb-2 text-[24px] lg:text-[32px]'>Payment Method</h1>
// <p className='text-[11px] lg:text-[13px]'>To start playing and cashing out your winnings, you’ll need a crypto wallet to purchase E-Credits and receive payouts. Don't worry—it’s quick and easy!</p>
// <h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2>
// <div className="grid sm:grid-cols-2 mb-8 gap-6">
// <div className="col-span-1">
// <GlassWrapper>
// <div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("crypto")} >
// <span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span>
// {currentPaymentMode === "crypto" ? <TickCircle /> : ""}
// </div>
// </GlassWrapper>
// </div>
// {/* <div className="col-span-1">
// <GlassWrapper>
// <div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("idem")}>
// <span className="text-[14px] flex items-center justify-start gap-2"><BitcoinRefresh />IDEM</span>
// {currentPaymentMode === "idem" ? <TickCircle /> : ""}
// </div>
// </GlassWrapper>
// </div> */}
// </div>
// <Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
// try {
// if (currentPaymentMode === "crypto") {
// const response = await getPaymentLink({
// id: slug,
// amount,
// type: currentPaymentMode as PaymentModeProps
// }).unwrap();
// router.replace(response?.data?.payment_url)
// }
// else if (currentPaymentMode === "idem") {
// const response = await getPaymentLink({
// id: slug,
// amount,
// type: currentPaymentMode as PaymentModeProps
// }).unwrap();
// const merchant_id = response?.data?.merchant_id;
// const currency = response?.data?.currency;
// const order_ref = response?.data?.payment_id;
// const form = document.createElement("form");
// form.method = "POST";
// form.action = response?.data?.payment_url;
// const fields = {
// merchant_id,
// amount,
// currency,
// order_ref,
// completed_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/buy-coins/${slug}/success`
// };
// Object.entries(fields).forEach(([key, value]) => {
// const input = document.createElement("input");
// input.type = "hidden";
// input.name = key;
// input.value = value as string;
// form.appendChild(input);
// });
// document.body.appendChild(form);
// form.submit();
// }
// else {
// dispatch(
// showToast({
// message: "Please select prefered mode of payment.",
// variant: ToastVariant.INFO
// })
// )
// }
// }
// catch (e: any) {
// dispatch(
// showToast({
// message: e?.data?.message || "Something went wrong",
// variant: ToastVariant.ERROR
// })
// )
// }
// }}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button>
// <p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p>
// <div className="flex justify-center items-center gap-4">
// <Image src="/assets/images/payment-01.png" alt='' width={78} height={24} />
// <Image src="/assets/images/payment-02.png" alt='' width={78} height={24} />
// <Image src="/assets/images/payment-03.png" alt='' width={78} height={24} />
// </div>
// </Box>
// </div>
// </div>
// </section>
// )
// }
"use client"; "use client";
import GlassWrapper from '@/components/molecules/GlassWrapper'; import GlassWrapper from '@/components/molecules/GlassWrapper';
...@@ -185,12 +7,13 @@ import GoldCoinIcon from '@/icons/GoldCoinIcon'; ...@@ -185,12 +7,13 @@ import GoldCoinIcon from '@/icons/GoldCoinIcon';
import { useDepositMutation } from '@/services/transaction'; import { useDepositMutation } from '@/services/transaction';
import { showToast, ToastVariant } from '@/slice/toastSlice'; import { showToast, ToastVariant } from '@/slice/toastSlice';
import { Box, Button } from '@mui/material'; import { Box, Button } from '@mui/material';
import { TickCircle } from '@wandersonalwes/iconsax-react'; import { BitcoinRefresh, TickCircle } from '@wandersonalwes/iconsax-react';
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React from 'react'; import React from 'react';
import PaymentForm from './FortPay';
type PaymentModeProps = "crypto" | "idem" export type PaymentModeProps = "crypto" | "fortpay"
export default function CheckoutPage({ amount, slug, bonus }: { export default function CheckoutPage({ amount, slug, bonus }: {
amount: number; amount: number;
slug: string; slug: string;
...@@ -266,18 +89,18 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -266,18 +89,18 @@ export default function CheckoutPage({ amount, slug, bonus }: {
</div> </div>
</GlassWrapper> </GlassWrapper>
</div> </div>
{/* <div className="col-span-1"> <div className="col-span-1">
<GlassWrapper> <GlassWrapper>
<div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("idem")}> <div className="py-5 px-4 flex justify-between items-center cursor-pointer" onClick={() => setCurrentPaymentMode("fortpay")}>
<span className="text-[14px] flex items-center justify-start gap-2"><BitcoinRefresh />IDEM</span> <span className="text-[14px] flex items-center justify-start gap-2"><BitcoinRefresh />FORT Pay</span>
{currentPaymentMode === "idem" ? <TickCircle /> : ""} {currentPaymentMode === "fortpay" ? <TickCircle /> : ""}
</div> </div>
</GlassWrapper> </GlassWrapper>
</div> */} </div>
</div> </div>
{currentPaymentMode === "fortpay" ? <PaymentForm id={slug} amount={amount} type={currentPaymentMode as PaymentModeProps} /> : ""}
<Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => { {currentPaymentMode === "crypto" ? <Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
try { try {
if (currentPaymentMode === "crypto") { if (currentPaymentMode === "crypto") {
const response = await getPaymentLink({ const response = await getPaymentLink({
...@@ -287,49 +110,48 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -287,49 +110,48 @@ export default function CheckoutPage({ amount, slug, bonus }: {
}).unwrap(); }).unwrap();
router.replace(response?.data?.payment_url) router.replace(response?.data?.payment_url)
} }
else if (currentPaymentMode === "idem") { // else if (currentPaymentMode === "fortpay") {
const response = await getPaymentLink({ // const response = await getPaymentLink({
id: slug, // id: slug,
amount, // amount,
type: currentPaymentMode as PaymentModeProps // type: currentPaymentMode as PaymentModeProps
}).unwrap(); // }).unwrap();
const merchant_id = response?.data?.merchant_id; // const merchant_id = response?.data?.merchant_id;
const currency = response?.data?.currency; // const currency = response?.data?.currency;
const order_ref = response?.data?.payment_id; // const order_ref = response?.data?.payment_id;
const form = document.createElement("form"); // const form = document.createElement("form");
form.method = "POST"; // form.method = "POST";
form.action = response?.data?.payment_url; // form.action = response?.data?.payment_url;
const fields = { // const fields = {
merchant_id, // merchant_id,
amount, // amount,
currency, // currency,
order_ref, // order_ref,
completed_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/buy-coins/${slug}/success` // completed_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/buy-coins/${slug}/success`
}; // };
Object.entries(fields).forEach(([key, value]) => { // Object.entries(fields).forEach(([key, value]) => {
const input = document.createElement("input"); // const input = document.createElement("input");
input.type = "hidden"; // input.type = "hidden";
input.name = key; // input.name = key;
input.value = value as string; // input.value = value as string;
form.appendChild(input); // form.appendChild(input);
}); // });
document.body.appendChild(form); // document.body.appendChild(form);
form.submit(); // form.submit();
} // }
else { // else {
dispatch( // dispatch(
showToast({ // showToast({
message: "Please select prefered mode of payment.", // message: "Please select prefered mode of payment.",
variant: ToastVariant.INFO // variant: ToastVariant.INFO
}) // })
) // )
} // }
} }
catch (e: any) { catch (e: any) {
dispatch( dispatch(
...@@ -339,7 +161,7 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -339,7 +161,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
}) })
) )
} }
}}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button> }}>{gettingLink ? "Proceeding to Payment..." : "Proceed to Payment"}</Button> : ""}
<p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p> <p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">Powered By</p>
<div className="flex justify-center items-center gap-4"> <div className="flex justify-center items-center gap-4">
......
src/services/transaction.ts
...@@ -32,10 +32,10 @@ export const transactionApi = createApi({ ...@@ -32,10 +32,10 @@ export const transactionApi = createApi({
tagTypes: ["Deposit", "Withdrawl"], tagTypes: ["Deposit", "Withdrawl"],
endpoints: (builder) => ({ endpoints: (builder) => ({
deposit: builder.mutation<DepositResponseProps, DepositProps>({ deposit: builder.mutation<DepositResponseProps, DepositProps>({
query: ({ id, amount, type }) => ({ query: ({ id, amount, type, payment_token }) => ({
url: `/api/payment/${id}`, url: `/api/payment/${id}`,
method: "POST", method: "POST",
body: { amount: amount, type: type } body: { amount: amount, type: type, payment_token }
}), }),
invalidatesTags: ["Deposit"] invalidatesTags: ["Deposit"]
}), }),
......
src/types/player.ts
...@@ -13,6 +13,7 @@ export interface CommonPlayerProps { ...@@ -13,6 +13,7 @@ export interface CommonPlayerProps {
password: string; password: string;
password_confirmation: string; password_confirmation: string;
role?: string; role?: string;
state?: string;
} }
export interface PlayerProps extends CommonPlayerProps { export interface PlayerProps extends CommonPlayerProps {
id?: string; id?: string;
......
src/types/transaction.ts
...@@ -5,7 +5,8 @@ type TransactionStatus = "SUCCESS" | "UNSUCCESSFUL" | "PENDING"; ...@@ -5,7 +5,8 @@ type TransactionStatus = "SUCCESS" | "UNSUCCESSFUL" | "PENDING";
export interface DepositProps { export interface DepositProps {
id: string; id: string;
amount: number; amount: number;
type?: "crypto" | "idem" type?: "crypto" | "fortpay"
payment_token?: 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