DEV Community

Cover image for Stripe payment gateway integration in node.js
CyberWolves
CyberWolves

Posted on

9 1 1

Stripe payment gateway integration in node.js

Hello guys, Today we gonna implement stripe payment gateway in node. We create simple order and pay with card. Stripe checkout gives us beautiful UI and various payment options. For better understanding watch demo video and support my channel πŸ™‚.

So let's start coding...

Demo Video

Project Github Link

Create Node.js App

$ mkdir node-stripe-payment-gateway
$ cd node-stripe-payment-gateway
$ npm init --yes
$ npm install express stripe
Enter fullscreen mode Exit fullscreen mode

Express : Express is minimal and flexible Node.js web applicaton framework.
Stripe : The Stripe Node library provides convenient access to the stripe API.

The package.json look like :

{
  "name": "node-stripe-payment-gateway",
  "version": "1.0.0",
  "description": "Implementing stripe payment gateway in node.js",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "jahangeer",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^8.156.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Configure Payment Route
In root folder, create index.js file

const express = require("express");
const app = express();
const path = require("path");
const stripe = require("stripe")("Add your secret key");

const YOUR_DOMAIN = "http://localhost:8080";

// static files
app.use(express.static(path.join(__dirname, "views")));

// middleware
app.use(express.json());

// routes
app.post("/payment", async (req, res) => {
    const { product } = req.body;
    const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        line_items: [
            {
                price_data: {
                    currency: "inr",
                    product_data: {
                        name: product.name,
                        images: [product.image],
                    },
                    unit_amount: product.amount * 100,
                },
                quantity: product.quantity,
            },
        ],
        mode: "payment",
        success_url: `${YOUR_DOMAIN}/success.html`,
        cancel_url: `${YOUR_DOMAIN}/cancel.html`,
    });

    res.json({ id: session.id });
});

// listening...
const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`Listening on port ${port}...`));
Enter fullscreen mode Exit fullscreen mode

Style.css
/views/style.css

.container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.product {
    width: 250px;
    padding: 10px;
    height: auto;
    background-color: white;
    border-radius: 5px;
    border: 2px solid black;
}

.product_img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    border-bottom: 1px solid black;
}

.description {
    display: flex;
    justify-content: space-between;
}

#btn {
    width: 100%;
    padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Checkout UI
/views/checkout.html

<!DOCTYPE html>
<html>
  <head>
    <title>Buy Products</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body class="container" >
      <div class="product">
        <img
          src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000"
          alt="iphone 12"
          class="product_img"
        />
        <div class="description">
          <h3>iPhone 12</h3>
          <h4>&#8377 100.00</h4>
        </div>
        <button type="button" id="btn">BUY</button>
      </div>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("Add your publishable key");
    var checkoutButton = document.getElementById("btn");

    checkoutButton.addEventListener("click", function () {
      fetch("/payment", {
        headers: {'Content-Type': 'application/json'},
        method: "POST",
        body: JSON.stringify({
            "product": {
                "name": "iPhone 12", 
                "image": "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000", 
                "amount": 100,
                "quantity": 1
            }})
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        });
    });
  </script>
</html>
Enter fullscreen mode Exit fullscreen mode

Transaction Success UI
/views/success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Sucess</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="container" >
    <div class="product">
        <img
        src="https://png.pngtree.com/png-vector/20191104/ourmid/pngtree-checkmark-icon-green-color-png-image_1952984.jpg"
        alt="succes tick mark"
        class="product_img"
      />
      <h3 style="text-align: center" >Transaction Successful</h3>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Transaction Cancel UI
/views/cancel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cancel order</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="container" >
    <div class="product">Forgot to add something to your cart? Shop around then come back to pay!</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

That's it, run the server and test api with fake card details. I hope you have learned something new.

Thank You...

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
1998suraj profile image
Suraj Karosia β€’

Bro.. I am your Subscriber.. I want to know when you are upload the part[2] of Spotify Backend

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay