#delgesu1745_react-elements-provider

1 messages · Page 1 of 1 (latest)

cedar sluiceBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1364624158805327953

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

graceful fox
#

The error is indicating you don't have <Elements> wrapping your component

hardy topaz
#

Yes. That step is in a different component on a different screen though.

graceful fox
#

What do you mean?

#

<Elements> needs to wrap you payment element component

hardy topaz
#

You asked if I did the step before the redirect payment status one.

#

So that all is functioning on one react screen and the status component is on a different screen. The one being redirected to after saving payment on the first screen.

#

So there is no element. Also if you look at the paymentstatus.jsx code it doesn't have any elements. It just returns the message from the call to the setupintent to confirm it was successful.

#

So why am I getting that error when I just copy and paste the code exactly as it is in the sample code?

graceful fox
#

Ah yeah i guess it's not complete

#

The PaymentStatus.jsx needs to also be nested under the Elements provider

#

Even if on a different screen

#

Kinda like the quickstart shows

# 
        {clientSecret && (
          <Elements options={{clientSecret, appearance, loader}} stripe={stripePromise}>
            <Routes>
              <Route path="/checkout" element={<CheckoutForm />} />
              <Route path="/complete" element={<CompletePage />} />
            </Routes>
          </Elements>
        )}
      </div>```
hardy topaz
#

Ok, so in that example the app itself is returning the whole router with the different screen paths and wrapping into one element together. I don't have things setup that way on my end.

#

So what do I need to wrap on the confirmation screen?

#

In other words, from the CompleteSetup.jsx file code, what do I need to wrap in the Elements tag?

graceful fox
#

Anything that calls the stripe api needs to be wrapped in the elements provider. That's where your publishable api key is defined. So in the CompleteSetup.jsx file, the stripe.retrieveSetupIntent call is what requires access to your elements provider

cedar sluiceBOT
graceful fox
#

But also you can't call useStripe outside of the Elements context

#

That call needs to be wrapped as well. And that's what's actually generating your error

hardy topaz
graceful fox
#

The entire CheckStatus is what needs to live within your Elements provider

#

You should only need to init <Elements> once in your entire app

#

The components that use it should all be nested within it

hardy topaz
#

Gotcha. I'm using react navigation and not router-dom in the app as it's an expo app for both react native and web. But basically the only way to display the confirmation page is to route to it from the same place as the checkout?

tropic marsh
#

Hi 👋

I'm stepping in as my colleague needed to go.

#

If you want to use Stripe React components and the useStripe hook, that needs to occur within the <Elements> provider.

hardy topaz
#

And is there anything wrong with wrapping the paymentstatus step in it's own Elements provider, or is that not possible to do?

tropic marsh
#

You should have only 1 Elements provider

hardy topaz
#

So if I'm going to try and get this to work using react navigation, what exactly is the element prop here? : <Route path="/checkout" element={<CheckoutForm />} />

tropic marsh
#

I'm not certain. I understand how the Elements provider works in React and how our Stripe components work in React but generally I hate React.

That being said, I have seen React integrations where most of the application is wrapped in the <Elements> provider.