43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { Elements } from "@stripe/react-stripe-js";
|
|
import styles from "./styles.module.css";
|
|
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
|
|
import { useEffect, useState } from "react";
|
|
import { Stripe, loadStripe } from "@stripe/stripe-js";
|
|
import SecurityPayments from "../../TrialPayment/components/SecurityPayments";
|
|
|
|
interface IPaymentFormProps {
|
|
stripePublicKey: string;
|
|
clientSecret: string;
|
|
returnUrl: string;
|
|
confirmType?: "payment" | "setup";
|
|
}
|
|
|
|
function PaymentForm({
|
|
stripePublicKey,
|
|
clientSecret,
|
|
returnUrl,
|
|
confirmType = "payment",
|
|
}: IPaymentFormProps) {
|
|
const [stripePromise, setStripePromise] =
|
|
useState<Promise<Stripe | null> | null>(null);
|
|
|
|
useEffect(() => {
|
|
setStripePromise(loadStripe(stripePublicKey));
|
|
}, [stripePublicKey]);
|
|
return (
|
|
<div className={styles["payment-modal"]}>
|
|
<div className={styles["payment-method-container"]}>
|
|
{stripePromise && clientSecret && (
|
|
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
|
<CheckoutForm confirmType={confirmType} returnUrl={returnUrl} />
|
|
</Elements>
|
|
)}
|
|
</div>
|
|
<SecurityPayments />
|
|
<p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PaymentForm;
|