Stripe checkout session not working nodejs - node.js

Question

I'm trying to implement a stripe checkout with NodeJs and React and it seems to get this error from the console log :
Access to XMLHttpRequest at 'https://checkout.stripe.com/pay/cs_test_a1y3gwvPAqpqhArQ9B83g3Du9EvF87HVcxzcx5Opt6o1rKinGEQViuXIq' (redirected from 'http://localhost:5000/api/account/subscriptioncheckoutsession') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here is what I have done so far:
env file
REACT_APP_FETCH_URL=http://localhost:5000
server.js
var whitelist = ['http://localhost:3000', 'http://localhost:5000'];
app.use(cors({ credentials: true, origin: whitelist }));
Route api
const YOUR_DOMAIN = 'http://localhost:5000';
router.post('/account/subscriptioncheckoutsession', async (req, res) => {
const session = await Stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'Product Subsciption',
images: ['https://i.imgur.com/EHyR2nP.png'],
},
unit_amount: 100,
},
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,
});
res.redirect(303, session.url)
})
Client
const handleCheckout = async (e) => {
e.preventDefault()
const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/account/subscriptioncheckoutsession')
}
<div className="form-group">
<button type="submit" className="btn btn-primary" onClick={handleCheckout}>
Subscribe or Renew Subscription</button>
</div>
What have I missed? Many thanks in advance and greatly appreciate any helps. Thanks again.

Answer 1

If you're using an XMLHTTPRequest(e.g., Axios.post) to get the URL for the CheckoutSession, it's not possible to redirect directly from the sever that way! That approach only works if you're doing what is described in Stripe's docs — calling that backend /subscriptioncheckoutsession route from the action of a <form> : https://stripe.com/docs/billing/subscriptions/checkout#create-session
So you could change your code to just have the form action be that route, and get rid of the onClick function and that usage of Axios entirely!
If you don't want to use a form submission and instead want to use an Ajax approach like Axios, what I'd suggest instead is your backend should just return the URL as part of the response body (e.g. res.json({"url":session.url}; instead of res.redirect) and do the redirect in JavaScript by setting window.location (e.g. let response = await axios.post(...); window.location = response.data.url)

Answer 2

I was using FastAPI and React to do the same, and ended up using the form action type. I tried using Fetch, but you cannot use the window.location = response.url method, or at least in TypeScript.
These are the parameter types in FastAPI and pip install python-multipart
session_id: str = Form(...)
price_id: str = Form(...)