net::ERR_CONNECTION_REFUSED error when trying to create a new Stripe subscription checkout session

Question

I'm trying to mimic what Stripe has in their Github to create a new subscription session through my website. When I click on the button that triggers the event handler, I recieve the following errors in the console on Google Chrome:

script.js:3 POST http://127.0.0.1:3000/create-checkout-session net::ERR_CONNECTION_REFUSED createCheckoutSession @ script.js:3 (anonymous) @ script.js:39

and

Uncaught (in promise) TypeError: Failed to fetch Promise.then (async)
(anonymous) @ script.js:39

The terminal in VS Code shows me this error (showing part of the message):

{ Error: Missing required param: line_items[0][currency].

I'm assuming something is incorrect in the script.js file, but I'm not sure what? Here is the code from that file:

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function (priceId) {
  return fetch('/create-checkout-session', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      priceId: priceId,
    }),
  }).then(function (result) {
    return result.json();
  });
};

// Handle any errors returned from Checkout
var handleResult = function (result) {
  if (result.error) {
    var displayError = document.getElementById('error-message');
    displayError.textContent = result.error.message;
  }
};

/* Get your Stripe publishable key to initialize Stripe.js */
fetch('/setup')
  .then(function (result) {
    return result.json();
  })
  .then(function (json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById('basic-plan-btn')
      .addEventListener('click', function (evt) {
        console.log('This is working');
        createCheckoutSession(basicPriceId).then(function (data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId,
            })
            .then(handleResult);
        });
      });
  });

Any help here would be appreciated!

Answer 1

What does the server side handler look like that is receiving this front end request to actually create the session ? This would be done on your back-end with a secret key.

If I assume that your fetch roughly maps to that create call, depending on how you use the passed parameters, you may need to add some layers. For example, make sure your price ID is in a line item object in a line_items array :

stripe.checkout.sessions.create(
  {
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
    payment_method_types: ['card'],
    line_items: [
      {
        price: priceId,
        quantity: 2,
      },
    ],
    mode: 'payment',
  },
)