Payment

import Payment from './path/to/Payment';

import React from 'react';
import Payment from './components/Payment';

const PaymentPage = () => {
    return (
        <div>
            <h1>Checkout</h1>
            <Payment />
        </div>
    );
};

export default PaymentPage;

import React from 'react';
import { Elements } from '@stripe/react-stripe-js';
import useCreatePaymentIntent from "@/billing-ui/hooks/useCreatePaymentIntent";
import { useBillingContext } from "@/billing-ui/context/BillingContext";
import LoadingSpinner from "@/billing-ui/components/ui/LoadingSpinner";
import Config from "@/billing-ui/config";
import EmbeddedCheckoutForm from "@/billing-ui/components/core/EmbeddedCheckoutForm";
import { loadStripe } from "@stripe/stripe-js";

const Payment = () => {
    const stripePromise = loadStripe(String(Config.STRIPE_PUBLIC_KEY), {
        apiVersion: '2024-06-20',
        betas: ['elements_customers_beta_1'],
    });
    const { selectedPlan, user, userToken } = useBillingContext();

    if (!selectedPlan) return <div className="text-red-500">Please Select A Plan Before Proceeding With The Checkout!</div>;

    const { clientSecret, paymentIntent, customerOptions, loading, error } = useCreatePaymentIntent({
        amount: Number(selectedPlan?.price) || 0,
        currency: String(selectedPlan?.currency),
        planCode: selectedPlan.code
    }, String(userToken));

    if (loading) return <LoadingSpinner />;
    if (error) return <div className="text-red-500">{error}</div>;

    const appearance = {
        theme: 'stripe',
        variables: {
            colorPrimary: '#0570de',
            colorBackground: '#ffffff',
            colorText: '#30313d',
            colorDanger: '#df1b41',
            fontFamily: 'Ideal Sans, system-ui, sans-serif',
            spacingUnit: '2px',
            borderRadius: '4px',
        }
    };

    const loader = 'auto';

    return (
        <>
            {clientSecret && stripePromise && (
                <Elements
                    stripe={stripePromise}
                    options={{
                        clientSecret: clientSecret!,
                        loader,
                        appearance,
                        customerOptions
                    }}
                >
                    <EmbeddedCheckoutForm paymentIntent={paymentIntent} />
                </Elements>
            )}
        </>
    );
}

export default Payment;

const CustomizedPayment = () => {
    const customAppearance = {
        theme: 'flat',
        variables: {
            colorPrimary: '#000000',
            colorBackground: '#f0f0f0',
            colorText: '#333333',
            colorDanger: '#ff0000',
            fontFamily: 'Arial, sans-serif',
            spacingUnit: '4px',
            borderRadius: '8px',
        }
    };

    return (
        <Payment appearance={customAppearance} />
    );
};

export default CustomizedPayment;