Creating one time payments with stripe via the checkout session route.

In this post, we will see how we can get a one time payment from stripe with React JS (Next JS) and a Node JS + Firebase as a backend.Post was originally posted in my blog:

https://www.gauthamvijay.com/blogs/what-are-customers-products-prices-and-how-to-create-them-in-stripe

Introduction

This post is a part of the stripe series, so please make sure you check out the previous blog of creating a customer, product and a price to understand the stuff discussed here.

As said in previous blog, the backend can be your choice, but the concept is same.

This article will focus on going the checkout session route, where we navigate the user to an external stripe checkout page. Stripe also provides a custom checkout route where user can finish the payment within the website.

Demo

Code

Lets create a Next JS project and install the required packages.

yarn create next-app stripe-onetime
cd stripe-onetime

The required packages for this tutorial should be installed with the below command.

npm i stripe firebase react-firebase-hooks axios

Now lets start implemeting the logic. So before starting with one time payments, you should have implemented a logic where when user signs up, we create a customer in stripe and attach that customer id to the user value in our database and we need to create a product and price from our stripe dashboard aswell to make the one time payments working. That logic was handled in my previous blog, so check it out by clicking the below link.

Creating Product, Prices and Customers in Stripe.

Now lets dive into the one time payment logic. So lets take we have a product created in the stripe dashboard which is called “Stripe Ebook” and its cost is 100 dollars/rupees, what we can do is when the user enters our website, we will show them a button to buy that particular product from us. When the user clicks on the button we create a checkout session link and then redirect the user to stripe hosted checkout page.

So first lets work in the backend part where we create an endpoint called `/create-checkout-session` in our express Node JS backend.

const stripe = require("stripe")(
  "sk_test_51JdHnKSF8____"
);
app.post("/create-checkout-session", (req, res) => {
 const session = await stripe.checkout.sessions.create({
    line_items: [{ price: req.body.priceId, quantity: 1 }],
    mode: "payment",
    customer: req.body.stripeCustomerId,
    success_url: "https://gauthamvijay.com/stripe/success",
    cancel_url: "https://gauthamvijay.com/stripe/cancel",
  });
  res.send({ session });
  })

So in the above code, we initialise stripe with our stripe key and call the stripe api to create a checkout session. We send priceId, stripeCustomerId as parameters from the frontend. In the line_items we attach the price with the price id created from the stripe dashboard and attach the quantity with it. We set the mode of payment as “payment” and attach the customerID which we get as a parameter from the frontend to customer key. Finally we should give the success_url and the cancel_url which is nothing but url the user need to be redirected when payment is successful or has failed.

Now from the Next JS frontend, we are going to call this backend with axios and get the session url and programatically navigate the user to the stripe checkout page.

const createCheckoutSession = async () => {
    const res = await axios.post("/api/create-checkout-session", {
      email: 'email',
      productName: "Gautham's Stripe Ebook,
      priceId: 'priceID,
      productId: 'productId',
      stripeCustomerId: 'stripeCustomerId',
    });
window.location.replace(res.data.session.url);
  };

And now when user is going to press on a button we are going to call this function.

 <button
      onClick={() => {
       createCheckoutSession();
        }}
        >
       Checkout
     </button>

As shown in the above youtube video you can see that when a user presses on the button, a checkout session will be generated and then the user will be redirected stripe checkout page where he can pay for your product which you can view it in your stripe dashboard.

Conclusion

Thats it you have successfully created a stripe checkout via the session route where you can get payments from your users in Next JS(React JS) and Node JS.

In the next post we will see how we can use stripe to let the users to pay within our website with custom checkout via the payment intents route.

Below is the source code for this post:

https://github.com/Gautham495/Stripe-Blog

Here is the live demo url:

https://gauthamvijay.com/stripe/registration