CORS error while performing stripe checkout - node.js

Question

I am working on a stripe checkout project but got stuck when I was not able to redirect to the stripe checkout page because of the cors error. My react frontend is running at localhost 3000 and express backend at localhost 5000. Here is how I am setting headers and using cors in my server.js :
if (process.env.NODE_ENV === 'development') {
app.use(cors({
credentials: true,
origin: process.env.CLIENT_URL
}))
app.use(morgan('dev'))
}
app.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Credentials", true);
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
res.setHeader('X-Frame-Options', 'sameorigin');
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, multipart/form-data");
res.setHeader("Access-Control-Allow-Methods", "HEAD,GET,POST,DELETE,OPTIONS,PUT");
next();
});
Here is my stripe.route.js :
const express = require('express')
const router = express.Router()
const Stripe = require('./../controllers/stripe.controller');
router.post('/checkout' , async(req,res) => {
const product = req.body.body;
console.log(product);
try
{
const session = Stripe.createCheckoutSession(product)
return res.send(session)
}
catch(e)
{
console.log(e);
res.status(400)
return res.send({
error: {
message: e.message
}
})
}
})
module.exports = router;
Here is my stripe.controller.js:
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
const createCheckoutSession = async(plan) => {
const session = await stripe.checkout.sessions.create({
success_url: `http://localhost:3000/success`,
cancel_url: `http://localhost:3000/fail`,
payment_method_types: ['card'],
line_items: [
{price: plan, quantity: 1},
],
mode: 'subscription',
});
return session;
}
module.exports = {
createCheckoutSession
}
Here is my react fronend page :
import React, { useRef } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
import styles from "./Pricing.module.scss";
export const Pricing = () => {
const buttonValue = useRef();
const navigate = useNavigate();
const setBtnValue = (e) => {
buttonValue.current = e.target.value;
};
const checkoutHandler = async (e) => {
const btnValue = buttonValue.current;
console.log(btnValue);
const res = await axios
.post( 'http://localhost:5000/api/checkout' , {
method: "POST",
headers: {
"Content-Type": "application/json",
},
withCredentials: true,
credentials: 'same-origin',
body:
btnValue,
})
const url = res.url
window.location.href = url
};
return (
<div className={styles.container}>
<h2 className={styles.heading}>Choose</h2>
<div className={styles.priceRow}>
<div className={styles.priceCol}>
<p>Starter</p>
<h3>
50$ <span> / month</span>
</h3>
<ul>
<li>1 Website</li>
<li>10 GB Disk Space</li>
<li>Free Email Address</li>
<li>No SSL certificate</li>
<li>Limited Support</li>
</ul>
<form onSubmit={checkoutHandler}>
<button
value="price_1"
type="submit"
className="btn"
name="product"
onClick={setBtnValue}
>
Upgrade Now
</button>
</form>
</div>
</div>
</div>
);
};

Answer 1

you can send back session.url from backend , and then from front end you redirect using window.location.replace , and it will work