Currently, I am working on setting up a payment system using Stripe. Below is the post request code I am using with Express:
try {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: `${priceId}`, // Make sure to replace this with the Price ID
quantity: 1,
},
],
mode: 'payment',
success_url: `${process.env.SUCCESSURL}?success=true`, // Redirect if payment successful
});
return res.redirect(303, session.url);
} catch (error) {
console.log("Error with payment checkout session: ", error);
}
This is how my frontend axios request looks like:
const checkout = () => {
axios({
method: "post",
url: "http://localhost:4000/api/payment/create-checkout-session",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
"Authorization": `Bearer ${token}`,
}
})
.then((response) => {
const { data } = response;
window.location = data.url;
})
.catch((error) => {
console.log(error);
});
}
I'm encountering an issue related to CORS and the link to Stripe:
Access to XMLHttpRequest at 'https://checkout.stripe.com/c/pay/cs_test_ (redirected from 'http://localhost:4000/api/payment/create-checkout-session') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Here's my CORS configuration:
app.use(
cors({
origin: 'http://localhost:3000', // Replace this with your frontend's origin
})
);
I'm struggling with the error message saying 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' I don't fully grasp what action needs to be taken to address this issue.