CODEWITHSUNDEEP
node.jsreactjsstripe-payments
Nat
Nat

Reputation: 749

Stripe checkout session not working nodejs

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.

Upvotes: 2

Views: 2927

Answers (2)

George Reyes
George Reyes

Reputation: 41

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(...)

Upvotes: 0

karllekko
karllekko

Reputation: 7198

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)

Upvotes: 11

Related Questions