1

I'm using stripe API to implement a payment method. I'm using React & Node.js and Express. Whenever I click on the "pay" button I'm supposed to e redirected to the stripe payment page. Still, I get this error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/stripe/create-checkout-session. (Reason: CORS request did not succeed). Status code: (null)."

I try using these links:

React Code:

//Using FETCH API
const PayButton = ({ cartItems }) => {
    const user = useSelector((state) => state.auth);

    const handleCheckOut = () => {
        fetch(`${url}/stripe/create-checkout-session`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "POST, OPTIONS",
            },
            body: JSON.stringify({
                cartItems,
                userId: user._id,
            }),
        })
            .then((res) => {
                if (res.data.url) {
                    window.location.href = res.data.url;
                }
            })
            .catch((err) => console.log(err.message));
    };
    return <button onClick={() => handleCheckOut()}>Check Out</button>;
};


//Using AXIOS
    const handleCheckOut = () => {
         axios
            .post(`${url}/stripe/create-checkout-session`, {
                cartItems,
                userId: user._id,
            })
            .then((res) => {
                if (res.data.url) {
                    window.location.href = res.data.url;
                }
            })
            .catch((err) => console.log(err.message));
        
    };
    return <button onClick={() => handleCheckOut()}>Check Out</button>;

Express Code:

const express = require("express");
const Stripe = require("stripe");
//const cors = require("cors");
require("dotenv").config();
const stripe = Stripe(process.env.STRIPE_KEY);

const router = express.Router();
//router.use(cors({ credentials: true }));
router.post("/create-checkout-session", async (req, res) => {
    const session = await stripe.checkout.sessions.create({
        line_items: [
            {
                price_data: {
                    currency: "usd",
                    product_data: {
                        name: "T-shirt",
                    },
                    unit_amount: 2000,
                },
                quantity: 1,
            },
        ],
        mode: "payment",
        success_url: `${process.env.CLIENT_URL}/checkout-success`,
        cancel_url: `${process.env.CLIENT_URL}/cart`,
    });
    res.send({ url: session.url });
});

module.exports = router;

Everytime I get the same result:

Blockquote Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/stripe/create-checkout-session. (Reason: CORS request did not succeed). Status code: (null).

I don't know what I'm missing?

Fernando Salas
  • 13
  • 2
  • it may be because you are on localhost. Check if this helps : https://stackoverflow.com/questions/68630229/stripe-checkout-example-running-into-cors-error-from-localhost – jeremy castelli Sep 29 '22 at 15:10

1 Answers1

0

Are you seeing this error when you call your API or when you're attempting to redirect?

hanzo
  • 438
  • 2
  • 4