57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Elements } from "@stripe/react-stripe-js";
|
|
import CheckoutForm, {
|
|
TConfirmType,
|
|
} from "@/components/PaymentPage/methods/CheckoutForm";
|
|
import Modal from "@/components/Modal";
|
|
import { Stripe, StripeElementLocale } from "@stripe/stripe-js";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import styles from "./styles.module.scss";
|
|
|
|
import "./style.scss";
|
|
import { language } from "@/locales";
|
|
|
|
interface IPaymentCardModalProps {
|
|
clientSecret?: string;
|
|
stripePromise: Promise<Stripe | null> | null;
|
|
paymentType?: TConfirmType;
|
|
paymentIntentId?: string;
|
|
returnUrl?: string;
|
|
isOpen: boolean;
|
|
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
removeNoScroll?: boolean;
|
|
}
|
|
|
|
export default function PaymentCardModal({
|
|
clientSecret,
|
|
stripePromise,
|
|
paymentType,
|
|
paymentIntentId,
|
|
returnUrl,
|
|
isOpen,
|
|
setIsOpen,
|
|
removeNoScroll,
|
|
}: IPaymentCardModalProps) {
|
|
return (
|
|
<Modal
|
|
open={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
removeNoScroll={removeNoScroll}
|
|
containerClassName={styles["modal-container"]}
|
|
>
|
|
<Elements
|
|
stripe={stripePromise}
|
|
options={{
|
|
clientSecret,
|
|
locale: language as StripeElementLocale | undefined,
|
|
}}
|
|
>
|
|
<CheckoutForm
|
|
confirmType={paymentType}
|
|
subscriptionReceiptId={paymentIntentId}
|
|
returnUrl={returnUrl}
|
|
/>
|
|
</Elements>
|
|
</Modal>
|
|
);
|
|
}
|