#muimi-paymentelement-react

1 messages · Page 1 of 1 (latest)

round sand
#

So it's possible but it's a lot more complex. You basically have to use useState to render PaymentElement only after you get the client secret. Something like this ```
function CheckoutPage() {
const [clientSecret, setClientSecret] = useState(null);

// When the CheckoutPage first renders, fetch the client secret
useEffect(() => {
api.fetchClientSecret().then(setClientSecret);
}, []);

// Until the client secret is ready, don't render the <Elements> provider
if (!clientSecret) {
return "Loading...";
}

// Render the <Elements> provider once the client secret is ready
return (
<Elements stripe={stripePromise} options={{ clientSecret }}>
<CheckoutForm />
</Elements>
);
}```

tawny cobalt
#

Ok. This makes sense. I was a bit confused since the docs recommend placing the provider at the app root and this solution doesn't necessarily warrant the use of the context api. Perhaps something worth thinking about?