#ilyothehorrid
frozen nova
meager hawk
There's an example here: https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript
snow cairn
thank you, but the example does not have the request for clientSecret to be passed to Elements, which is he main block for me, since this is a server call
meager hawk
It's using a deferred flow, yes. But not sure what specific issue you're having? The data flow is no different really
snow cairn
I am using future payments, and the issue is that the page that uses Elements has to be a client side page, because it is a Provider. But I have to also make a server call to pass the clientSecret to Elements:
<Elements stripe={stripePromise} options={{ clientSecret: setupIntent.client_secret }}>```I'm looking for what is the best practice
meager hawk
Ok, so in your page (the server componnent) make the API call to create the Setup Intent and then pass the client_secret returned to your client component
snow cairn
So I have to make 3 components:
server for setupIntent
cleint for Elements
client for PaymentElement
correct?
Just doesn't seem elegant
hoped there is a nicer best practice:) google didn't help...
ah, actually this won't work with layout and page since you can't pass props
meager hawk
Sorry I have no understanding of the architecture of your app, so none of this makes any sense
Do you understand how the App Router works? It shouldn't be hard to map a Stripe integration to it
snow cairn
was this your way of calling me an idiot instead of trying to help?
so far the stripe support has been stellar, not sure why this bad attitude...
I think my question was simple enough, if anything is unclear about it, please ask.
meager hawk
I think it was a pretty legitimate question, but ok. You've shown me nothing about how your app is structured so not sure how I'm supposed to help
snow cairn
the question was, if this heirarchy is correct, or is there a simpler way to not use 3 component:
- server for setupIntent
- cleint for Elements
- client for PaymentElement