Shopping Cart item list across frontend and backend

Question

I'm working on an E-Commerce store using Node.JS, Stripe and HTML. I have the frontend JS file in which users add/remove/change the quantity of cart items which also affects a list with all the cart items to access later (Price SKUs and Quantity). A typical cart list would look like this: ["price_1LWgytARYjIsWfAV0lZI6mgW", "1", "price_1LWgytARYjIsWfAV0lZI6PXv", "3"]

To get the checkout in stripe, you need to provide Node.JS with the line items of the Price SKUs and Quantities. I am trying to access this cart items list in the backend. I have tried things such as local storage but it is undefined and null because it isn't running on the webpage.

Can anyone help me to access this list in the backend server? Thank you

Answer 1

Local storage is a feature that lets you store information client-side in the browser. An example is storing someone's preferred locale or timezone if you don't want a cookie/session server-side. So it's expected that your server-side code in Node.js will not have access to those values.

What you need to do instead is make a request to your server that will contain all the line items they have in their cart. In Javascript, this is usually done in two ways

1. You have your own form in HTML and you pass all the information in the form and submit it which redirects the whole page.
2. You write code using the Fetch API so that you can send your line items (usually as JSON) to your server and have it reply asynchronously.

In your case, the second option is usually best. You'll have a button that someone can click on when they are ready to pay. At that point, the code will take all your line_items and send them as a JSON array/hash to your server-side code.

It's important to note that the format of your line items right now doesn't really work well because you have an array alternating a Price id price_123 and then the quantity, and then another Price id, etc. making editing quite hard. Usually, you'd want to use an array of objects instead, which would be quite similar to what you would send to the Create Checkout Session API's line_items parameter. What you want to send should look more like this:

var cart = {
  line_items: [
    {
      price: "price_ABC",
      quantity: 1
    },
    {
      price: "price_123",
      quantity: 7
    },
    {
      price: "price_XYZ",
      quantity: 2
    }
  ]
};

This format makes it a lot easier because you have a hash/object that is your cart. It has a line_items property that is an array array of line items. It contains 3 elements, and the first element's price is price_ABC and its quantity is 1 which will be a lot easier to parse and modify in Javascript both client-side and server-side.

Here's a basic example of how to send your cart variable/content to your server with fetch():

fetch(
  "/checkout_session_creation",
  {
    method: "POST",
    body: JSON.stringify(cart)
  })
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log("Got the response: ", data);
});

This will post to /checkout_session_creation though you have to put the route you are expecting there. It will sent the cart variable/content in the POST body as JSON. Then it expects a response back in JSON that you can parse.

The idea here is that after creating the Checkout Session in Node server-side, you will get the url property that you then need to return to your client. You then need to redirect client-side to that URL.

With all of that said, I'd highly recommend going through Stripe's official Checkout Quickstart end to end as they walk you through most of this.