MY purpose is to connect my react app with the Stripe using their components But the issue I am getting is my react components are not loading github link to project you can find relevant files of frontend frontend/src/screens/checkout/paymentWrap this file I am wrapping my form inside Element component provided by the stripe you can see everything infact I have push code with all credentials The error I get is

v3:1 Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. You used an empty string.
    at d (v3:1:52111)
    at new e (v3:1:271693)
    at ko (v3:1:303926)
    at initStripe (stripe.esm.js:101:1)
    at stripe.esm.js:125:1

Actually I follow their docs docs but no where they have called this Stripe so I also have not I am frustrated a lot since three days I am here cant go forward

CodePudding user response：

const [stripeApiKey, setStripeApiKey] = useState("");

I think this line at the top of the file is the reason you are running into that issue. Your code looks fine, but you're forgetting how the react lifecycle works.

The initial render of the WrapPayment.jsx component will try to call loadStripe("") because the initial state of stripeApiKey is ""

I'd suggest creating a loading state variable like so:

const [loading, setLoading] = useState(true);

Add in the setLoading(true); call here:

async function getStripeApiKey() {
    const { data } = await axios.get("/api/v1/stripeapikey");
    setStripeApiKey(data.stripeApiKey);
    setLoading(false);
}
 

And render like so:

if(loading) {
    return "Some Loader Component here"
} else {
    return (
      <>
          {/* <Payment/> */}
          <Elements stripe={loadStripe(stripeApiKey)}
              options={options}
          >
              <Payment/>
          </Elements>
  
      </>
    )
}