Stripe Checkout Redirection

[mahrsbar]

Issue: Running into CORs problems when redirecting from stripe so tried this fix:
https://stackoverflow.com/questions/68630229/stripe-checkout-example-running-into-cors-error-from-localhost

I updated the backend logic in checkout.js to the above which removes the CORs issue and is giving a 200 success message but I cannot figure out how to redirect the URL in the front-end.

Branch: stripe-implementation

[JamesMGreene]

So the rub I'm seeing is it looks like this will need to be a browser redirect, which means that our users will leave the page they've been filling out and be taken to a Stripe.com page 🤔

Their intended process would be like:

1. Create Stripe session on our backend
2. window.location = response.data.url on the frontend

• That will navigate the user away from our page to a Stripe.com page, potentially losing any progress (form values filled in) on the Send Letter page

3. The user will fill out Stripe payment info on the Stripe.com page

• When the user submits to the Stripe.com page, Stripe will redirect them to the successUrl page that was configured when creating the session in Step 1

So, with the current UX flow, we would need to maintain their Send Letter page information somewhere (I'd suggest frontend sessionStorage) while they're off on the Stripe page, and/or potentially change our UX for the Send Letter page. 😕 🤷🏻

...unless we can do something like opening the Stripe.com page OAuth flow within a child window rather than allowing it to navigate away from our Send Letter page. 💡 I would bet that is probably possible but would need more investigation.

[mahrsbar]

Would it make sense to change the user flow so the user is redirected back to the same page after the stripe payment, so stripes success page would return to the same page, and then the user can press "Send Letter" which will actually send the letter. Either way, I think we would have to store the Send Letter page information somewhere and also have stripe validation as mentioned here. It seems like stripe removed modal support recently so redirect might be needed but definitely requires more research.

Something like this:

I did get the checkout redirect working through your way, and seems like apple/google pay and coupon code is correctly configured.

Screen.Recording.2022-05-06.at.11.02.32.AM.mov

[manishapriya94]

Task list:

• Bug: createAddress not working #91

[joester030376]

Resolved the redirections and cors issues

[clipartinc]

I'm having the same CORS issue when using res.redirect(303, session.url); . how did you fix it?

[Aycom366]

I'm having the same CORS issue when using res.redirect(303, session.url); . how did you fix it?

were you able to fix this? coz am having same issue on my end

[clipartinc]

I'm having the same CORS issue when using res.redirect(303, session.url); . how did you fix it?

were you able to fix this? coz am having same issue on my end

Try this solution...
https://stackoverflow.com/questions/74085079/stripe-api-redirecttocheckout-not-redirecting-to-the-correct-url-in-next-js/74091623#74091623

for me the stripe API keys had to be set in the next.config.js file.