What is the testing Postal code for Stripe Payment gateway?

Stripe give me zip code error invalid zip code it is my payment component it show me

{
    "code": "incomplete_zip",
    "type": "validation_error",
    "message": "Your postal code is incomplete."
}

How i can resolve this error or provide me test zip code of strip

    import React, { useState } from "react";
        import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
        import axios from "axios"; // Import Axios
        
        function Payment({ planDetails }) {
            const { price } = planDetails;
            const stripe = useStripe();
            const elements = useElements();
            const [loading, setLoading] = useState(false);
        
            const handleSubmit = async (e) => {
                e.preventDefault();
        
                if (!stripe || !elements) {
                    return;
                }
        
                setLoading(true);
        
                try {
                    const data = await createPaymentIntent();
                    console.log(data);
                    const clientSecret = data.client_secret;
        
                    const result = await stripe.confirmCardPayment(clientSecret, {
                        payment_method: {
                            card: elements.getElement(CardElement),
                        },
                    });
        
                    if (result.error) {
                        console.error(result.error);
                        setLoading(false);
                        // Handle payment failure
                    } else {
                        // Payment successful, process it on the server
                        await processPayment(paymentIntent.id);
                        // Redirect or show a success message
                    }
                } catch (error) {
                    console.error(error);
                    setLoading(false);
                    // Handle error
                }
            };
        
            const createPaymentIntent = async () => {
                try {
                    const response = await axios.post("/member/create-payment-intent", {
                        amount: price, // Replace with your desired amount
                    });
        
                    if (response.data.paymentIntent) {
                        return response.data.paymentIntent;
                    } else {
                        throw new Error("PaymentIntent not found in the response");
                    }
                } catch (error) {
                    console.error("Error creating payment intent:", error);
                    throw error;
                }
            };
        
            const processPayment = async (paymentIntentId) => {
                try {
                    // Make a POST request to process the payment
                    const response = await axios.post("/member/process-payment", {
                        paymentIntentId,
                    });
        
                    return response.data;
                } catch (error) {
                    throw error;
                }
            };
        
            const DARK_CARD_OPTIONS = {
                iconStyle: "solid",
                style: {
                    base: {
                        // backgroundColor: "rgb(31 41 55)",
                        iconColor: "#6D28D9",
                        color: "black",
                        fontWeight: "500",
                        fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
                        fontSize: "16px",
                        fontSmoothing: "antialiased",
        
                        ":-webkit-autofill": {
                            color: "#fce883",
                        },
                        "::placeholder": {
                            color: "#D1D5DB",
                        },
                    },
                    invalid: {
                        iconColor: "#ef2961",
                        color: "#ef2961",
                    },
                },
            };
        
            return (
                <>
                    <div className="container mt-5 rounded-lg mx-auto my-auto h-screen">
                        <div className="p-4 rounded-lg border border-gray-800 dark:border-gray-600 focus:border-purple-700">
                            <form onSubmit={handleSubmit}>
                                <CardElement options={DARK_CARD_OPTIONS} />
                                <div className="mt-2 d-block">
                                    <button
                                        type="submit"
                                        disabled={loading}
                                        className="bg-theme-orange  block w-full text-white border rounded-lg p-5"
                                    >
                                        {loading ? "Processing..." : "Pay Now"}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </>
            );
        }
        
        export default Payment;

Here is the answer

       public function createPaymentIntent(Request $request)
        {
            // 4242 4242 4242 4242 card number
            // future month MM/future year YY/ CVC/123/ZIP:12345
    
            try {
                Stripe::setApiKey(config('services.stripe.secret'));
    
                $paymentIntent = \Stripe\PaymentIntent::create([
                    'amount' => $request->input('amount') * 100,
                    'currency' => 'usd',
                ]);
                $user = User::find(auth()->user()->id);
                $user->memberships()->attach($request->membership_id);
                return response()->json([
                    'paymentIntent' => $paymentIntent,
                ]);
            } catch (\Exception $e) {
                return response()->json([
                    'error' => $e->getMessage(),
                ], 500); // Return a 500 Internal Server Error in case of an exception
            }
        }
    import React, { useState } from "react";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import axios from "axios"; // Import Axios
import AlertComponent from "@/Components/Alert";

function Payment({ planDetails }) {
    const { price, id } = planDetails;
    const stripe = useStripe();
    const elements = useElements();
    const [loading, setLoading] = useState(false);
    const [showAlert, setShowAlert] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();

        if (!stripe || !elements) {
            return;
        }

        setLoading(true);

        try {
            const data = await createPaymentIntent();
            console.log(data);
            const clientSecret = data.client_secret;

            const result = await stripe.confirmCardPayment(clientSecret, {
                payment_method: {
                    card: elements.getElement(CardElement),
                },
            });

            if (result.error) {
                console.error(result.error);
                setLoading(false);
                // Handle payment failure
            } else {
                // Payment successful, process it on the server
                await processPayment(data.id);
                setLoading(false);
                setShowAlert(true);
                window.location.href = "/dashboard";
            }
        } catch (error) {
            console.error(error);
            setLoading(false);
            // Handle error
        }
    };

    const createPaymentIntent = async () => {
        try {
            const response = await axios.post("/member/create-payment-intent", {
                amount: price,
                membership_id: id,
            });

            if (response.data.paymentIntent) {
                return response.data.paymentIntent;
            } else {
                throw new Error("PaymentIntent not found in the response");
            }
        } catch (error) {
            console.error("Error creating payment intent:", error);
            throw error;
        }
    };

    const processPayment = async (paymentIntentId) => {
        try {
            // Make a POST request to process the payment
            const response = await axios.post("/member/process-payment", {
                paymentIntentId,
            });

            return response.data;
        } catch (error) {
            throw error;
        }
    };

    const DARK_CARD_OPTIONS = {
        iconStyle: "solid",
        style: {
            base: {
                // backgroundColor: "rgb(31 41 55)",
                iconColor: "#6D28D9",
                color: "black",
                fontWeight: "500",
                fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
                fontSize: "16px",
                fontSmoothing: "antialiased",

                ":-webkit-autofill": {
                    color: "#fce883",
                },
                "::placeholder": {
                    color: "#D1D5DB",
                },
            },
            invalid: {
                iconColor: "#ef2961",
                color: "#ef2961",
            },
        },
    };

    return (
        <>
            {showAlert && (
                <AlertComponent>
                    Payment has been done successfully
                </AlertComponent>
            )}
            <div className="container mt-5 rounded-lg mx-auto my-auto h-screen">
                <div className="p-4 rounded-lg border border-gray-800 dark:border-gray-600 focus:border-purple-700">
                    <form onSubmit={handleSubmit}>
                        <CardElement options={DARK_CARD_OPTIONS} />
                        <div className="mt-2 d-block">
                            <button
                                type="submit"
                                disabled={loading}
                                className="bg-theme-orange  block w-full text-white border rounded-lg p-5"
                            >
                                {loading ? "Processing..." : "Pay Now"}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
}

export default Payment;
import React from "react";
import Payment from "./Payment";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js"; // Import loadStripe
import { usePage } from "@inertiajs/inertia-react";

const stripePromise = loadStripe(
    "pk_test_51O83ztGi5AwSjR95RkQGgCYkoRXVy71ksKEN3IcRNYP6Ky1i1BrycQJ6AZMQGRXm4Lc7L702WMc7yTzFXZyXOkUC00zowX4lIT"
);
function SubscriptionForm({ membership_plan }) {
    // const { membership_plan } = usePage().props;
    return (
        <>
            <Elements stripe={stripePromise}>
                <Payment planDetails={membership_plan} />
            </Elements>
        </>
    );
}

export default SubscriptionForm;