#bloomerich
iron grove
violet echo
Hi 👋 can you point me to the example you're following. I don't think we have official documentation for building Stripe into a Next.js app, so I'd like to take a look at the guide.
violet echo
Ah gotcha. I'm too great with React, so I'll see if I can help but may need to pull in a teammate.
Are you encountering an error with the approach you're currently using, and how close is that approach to what is seen in the sample integration?
fresh glade
Yea the thing is I can only use stripe methods in child components of the Elements Provider
But the Elements require the payment intent which the docs tell me should be created when I know the order amount.
To my understanding this would mean I can only create things like a order confirmation or status page as sup component of the checkout which doesnt really make sense.
The error would be: Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.
violet echo
Hm, so would being able to create the Elements provider without first needing to create a Payment Intent help avoid that issue? (You will still need to provide an amount initially, but that amount can be updated later in your flow)
fresh glade
yea that would solve it and also make sense with the docs
since then I would only create the payment intent on checkout
but also have the Elements provider at the root of my app
.
is it possible to create the elements provider without a payment intent?
violet echo
Yup, you can take a look through the guide for that here:
https://stripe.com/docs/payments/accept-a-payment-deferred?client=react
It's still a somewhat new flow.
fresh glade
I’ll definitely take a look at that, other than that was there no better way to create a success page for your order in react?
I think I must be missing something here
violet echo
Let me see if a teammate who is more familiar with React is around who can provide better guidance.
fresh glade
Thank you so much
supple knoll
Hey 👋
Give me a sec to catch up
fresh glade
Hey 👋
supple knoll
Did you get a chance to refer to the docs toby shared regarding deferred payment intent flow?
It allows you to wrap your component in elements provider without needing to use a PaymentIntent.
The idea behind using Elements Provider at the root of your app is to be able to access Stripe functions in any child components you want
fresh glade
I also found this https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&client=react#web-submit-payment
specifically the PaymentStatus.jsx but again here you also need access to the Elements Provider
fresh glade
Did you get a chance to refer to the docs toby shared regarding deferred payment...
Yea I looked at It and I think it would work just didn't think this was the intended way for a order status page as he also mentioned it was a new type of flow
supple knoll
Yes it is a new flow designed specifically to avoid situations like this where you'd need to pass in a PaymentIntnet even though you're not really trying to process a payment.
Also taking a step back, what function are you trying to use on your order success page that requires Elements Provider?
Typically, folks rely on HTTP request to their own backend to retrieve status of the PaymentIntent and build the success page accordingly.
I am curious about how you're building the page
fresh glade
I also found this https://stripe.com/docs/payments/accept-a-payment?platform=web...
Im trying to follow this guide the get the payment status and display it to the customer
my thinking was to have a order-status page and based on the payment-intent from the query params after the redirect I would fetch the status and display the order confirmation
supple knoll
Right, you can still do that. But instead of trying to call Stripe directly from client-side, you can send that PaymentIntent to your backend server and call the API from there.
This allows you to bypass elements provider altogether