#Laxislad-checkout-react

1 messages · Page 1 of 1 (latest)

raw junco
#

Hi, what are you trying to do in react exactly?

#

The youtube video is about checkout sessions (created on the backend)

native solar
#

yeah I wanna add card for future payment

#

I'm using react and node

raw junco
#

I was going to redirect you to that link

#

what part are you stuck in this way I could help you out better

native solar
#

ok

raw junco
#

what part of the code are you having trouble implementing?

native solar
#

I created the submiting card details part

#

I don't understand how to go forward after this

raw junco
#

after confirmSetup you mean?

native solar
#

after submitting details

#

how to redirect to the confrm setup page?

raw junco
#

ok so the idea is that when you submit the handleSubmit will try to confirm the SetupIntent you created

native solar
#

ah yes

#

I wanna know how to do that

raw junco
#

if you follow the code that would do for you

#

the only thing that you need to change is the return_url

native solar
#

I did

raw junco
#

which should get you to another component (if you're using React Router another path)

native solar
raw junco
#

you shouldn't use navigate function

#

you should only pass a simple string

native solar
native solar
raw junco
#

your payementstatus component should be also wrapped by the <Elements stripe={stripePromise} options={options}>

native solar
#

oh thaths why

raw junco
#

yes

#

could you share you react router code?

native solar
#

what are the options should I pass?

raw junco
native solar
raw junco
#

and the part for the setupform?

#

what router are you using btw?

native solar
#

router?

raw junco
#

I mean for react

#

what package

native solar
#

BrowserRouter

raw junco
#

could you share a bit more code please?

native solar
#

for navigation react-router-dom

raw junco
#

how are you transforming this js array of Objects to links

#

and routes

#

usually in React Router we use <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch>

native solar
#

I use this

#

{routes.map(({ element, path, name }) => (
<Route
key={name}
path={path}
element={<ProtectedRoute element={element} />}
/>
))}

raw junco
#

ok

#

In that case it's better to use nested routes for your use case

#

where instead of having the <Elements ... be on the App level you could probably put it on a route that has nested routing and you put another <Switch> component inside the <Elements> tag

#

this way you'd have both the setup and the paymentstatus wrapped with the <Elements> tag and you would be able to continue following the tutorial in our docs

native solar
#

ah thanks

native solar
#

so I have to consider PaymentSuccess as a differet page and also

sleek roost
#

Hey, taking over from my colleague here. Let me know if you have a specific issue/question!