#Branko-react

1 messages · Page 1 of 1 (latest)

upbeat sentinel
#

Hi there!

#

Yep, no need to initialize Payment Element at the root.

#

Notice that in the example the CheckoutForm component is wrapped by your Elements provider.

#

The CheckoutForm component would contain the Payment Element

amber coral
#

Yes, but the <Elements /> is expecting the clientSecret via options param

#

thats the clientSecret we get once we initiate the paymentIntent method

#

I do not know/have the amount in order to create payment intent at the root level, so I am confused if we can actually initiate <Elements /> at the root level

upbeat sentinel
#

Ah I see, thanks for clarifying. So yeah in this case you can still initialize it from the root however you can wait on the clientsecret to actually initialize it by using something like {clientSecret && ( <Elements options={options} stripe={stripePromise}> <CheckoutForm /> </Elements> )}

#

Woops one sec

#

Didn't mean to paste that whole thing

#

Your other option is to not initialize from the root if you aren't going to handle your payment info until later in your flow.

#

The main reason to initialize from the root is to provide access to Elements on any part of your app you want without having to re-initialize.

#

But if you are only using Stripe in an isolated portion then you can initialize further down your tree if that works better for you.

amber coral
#

what I would like to do is what you described, to load <Elements /> at the root level and only use <PaymentElement /> where its needed, on separate pages

#

Exactly so I do not need to re-initialize each time checkout page is mounted

#

I guess thats not possible since <Elements /> requires clientSecret, it would be better if <PaymentElement /> requires it instead

upbeat sentinel
#

There isn't much of a difference really. You aren't going to use your Elements instance before you have a clientsecret with Payment Element. So you can initialize it at the time of PaymentIntent creation (when you pass your client secret to your client).

amber coral
#

Alright, I thought more of <Elements /> like a <StripeProvider /> and you use it and access it where ever its needed. But obviously thats not the case since it has to be tied with the clientSecret. Lets say I have two different checkout pages, each of those pages must initialize <Elements /> right?