Pedro Hercules

[slate berry]

Hi there

So you want to wait to render these components and your Elements Provider until you have the client secret. So you want to do something like {clientSecret && ( <Elements options={options} stripe={stripePromise}>

That will ensure the clientSecret is present first

[umbral remnant]

It works, thank you.

[slate berry]

👍

[umbral remnant]

Hi again

When i'll try build returns this error: Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.

[slate berry]

Is the component that useStripe in wrapped in your <Elements> component?

[umbral remnant]

const StripeCheckout = (options: any) => { const stripePromise = loadStripe( process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '' ) return ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ) }

[slate berry]

Yep okay and useStripe is within your CheckoutForm component?

[umbral remnant]

yes

[slate berry]

In your CheckoutForm component are you waiting to ensure that stripe is initialized?

Like do you have ```useEffect(() => {
if (!stripe) {
return;
}

[umbral remnant]

yes

in dependency i put the stripe

[slate berry]

Hmm well seems fine to me then. I'd add logs to your code to see if stripe is initialized before you are calling stripe.*