#kpb91-checkout-react
tropic knot
uneven dome
Hello
While a server redirect is absolutely the recommended route now, redirectToCheckout should still work
Can you tell me why you aren't using a server-side redirect here though?
opaque raft
I thought I was. I have a server set up on a localhost:8080 and using fetchFromAPI()
uneven dome
That is all on the client. All you really need to do here is res.redirect(303, session.url); from your server after you create the Checkout Session
However, you will likely run into a CORS error if you don't use a form action here as well
Have you seen our quickstart: https://stripe.com/docs/checkout/quickstart?
That has some simple code snippets that should help
If you really want to continue to use redirectToCheckout (which I don't recommend as it is technically deprecated), then you need to log out your sessionId that you are passing
opaque raft
If you really want to continue to use `redirectToCheckout` (which I don't recomm...
No, i'd rather do what is up to date/recommended for sure.
Line 25 was : res.status(200).json({ sessionId: session.id, });
I replaced it with: res.redirect(303, session.url);
Not sure if that was exactly what you were suggesting. Probably not, as I'm still getting the same error
uneven dome
Yep that is the correct change. Did you remove redirectToCheckout from your client code?
Are are you using a form action like ```<form action="/create-checkout-session" method="POST">
<button type="submit">
Checkout
</button>
return (
<form onSubmit={handleGuestCheckout}>
<div>
<input type="email"
onChange={e => setEmail(e.target.value)}
placeholder="Email"
value={email}
/>
</div>
<div className="submit-btn">
<button type="submit" className="button is-black submit">Checkout</button>
</div>
</form>
)
uneven dome
If you are using a fetch within handleGuestCheckout then you will hit a CORS error here as I noted.
uneven dome
See my snippet above that uses a standard HTML form action? Specifically <form action="/create-checkout-session" method="POST">
That will allow you to make a server-side redirect. If you use fetch, which I would assume is what your fetchFromAPI helper is doing, then the browser is going to error since fetch requests do not function with server-side redirects (they expect a response back which will lead to a CORS error)
So you want to point the action="" at whatever your Server endpoint is that you are using to create the Checkout Session
opaque raft
Ok, but are you saying I wouldn't be using handleGuestCheckout() ?
Sorry, this is all new.
uneven dome
Yeah you wouldn't use handleGuestCheckout() for the Checkout Session creation. You can still send that line item data though via the form POST. See: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data
Otherwise, if you don't want to change everything, you can still use redirectToCheckout but need to debug the error you were seeing before.
Or lastly, you can not use redirectToCheckout and just redirect on the client using something like window.location
Lot of options 🙂
Mostly just what you want to go with
opaque raft
The problem I'm finding is that everything is so interconnected that if I remove one thing then the whole chain breaks.
uneven dome
Yeah I'd recommend just starting with a really basic integration here. Just hard code your data Server-side for line_items. And just do a simple HTML form action POST to hit your endpoint and successfully redirect
Then, after you have that going, work on adding back in the passing of your data from client to server for line_items
barren summit
kpb91-checkout-react