Abhee Hudani ☕

Posted on Oct 18, 2020 • Edited on Oct 20, 2020

Payment Handling with Stripe, Node and Express

#stripe #node #tutorial #javascript

Why do you need a payment gateway ?

Let's just assume that we are creating an e-commerce shopping website. Payment handling is one of the crucial part in e-commerce site.
There are many other payment gateways are available like PayPal, Amazon Pay, World Pay, Stripe etc. But in this tutorial we are going to stick with Stripe.
And using a payment gateway is not just for transferring money, but it has other benefits as well.
A payment gateway focuses on creating a secure pathway between a customer and the merchant to facilitate payments securely.

In this tutorial we are going to create payment gateway service for Node JS using STRIPE.

Github Repo Link and Postman Collection: Click Here

What are we building here:

1) Saving Customer's Details to Stripe
2) Add customer's Card in Stripe.
3) View Customer's Cards.
4) Update Customer's Cards.
5) Delete Customer's Card from stripe
6) Payment Checkout with Saved Card.
7) One Time Payment Checkout without saving card info.

How we are gonna save customer sensitive card details?

Instead of saving card details directly by passing them to API, we are going to create a charge first and after that we are going to save the charge details to customer. This we are not going to handle card information directly and our production integration is developed in a PCI Compliant manner. Which is also recommended by the Stripe.

What do we need ?

Stripe API Key
Node version >= 12 installed in your system
Postman/ Insomnia (Or any other software for testing API Calls)

Getting the stripe API Key:

You can get your own stripe API key by logging into Stripe Dashboard and get the test key. It will look something like this 'sk_live_...3Vls'.
In this tutorial we are gonna use the default sandbox key from here which is provided by stripe.

Note:

If you are using your own API key, then make sure to turn on "TEST MODE" from your Stripe Dashboard otherwise you might face some unexpected charges during the test and you will be able to see the test transactions in your dashboard.

Getting Started:

Stripe Charges the amount in cents so if you want to charge $200 then your amount would be 20000 ($200 x 100 = 20000).
We are not using any Database here so I'm just gonna store customer ID as a Constant during this tutorial. So if you use this make sure to connect to Database if you want to store customer's stripe data.

Install the dependencies.

$ npm init

Install Express, Stripe-Node packages

$ npm install express 
$ npm install --save stripe

Index.js

Ok now we get to create our first file called index.js . Once created, at the top of the file we want to include all of the dependencies that we will need for our project:

const express = require("express");
const app = express();
const port = 3000;

app.use(express.json());

When we want to test and make sure our server is working, we will run this function to listen on port 3000 and log a string if its successful:

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

Now if you open your browser and type: http://localhost:3000/ you will see ' Hello World!' in your browser.

At this point our index.js file should look like this:

const express = require("express");
const app = express();
const port = 3000;

app.use(express.json());

app.get("/", (req, res) => {
    res.send("Hello World!");
});

app.listen(port, () => {
    console.log(`App listening at http://localhost:${port}`);
});

Stripe.js

Let's create a new file called strie.js which will be used for handling all stripe calls. Once created we are going to create a simple GET request and exporting our route file so index.js can access it:

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.status(200).json({
    message: "Stripe Hello World!",
  });
});

module.exports = router;

Adding stripe.js route to index.js

const stripe = require("./stripe");
app.use("/api/", stripe);

Now the index.js will something similar to this:

const express = require("express");
const app = express();
const stripe = require("./stripe");
const port = 3000;

app.use(express.json());

app.use("/api/", stripe);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

Now if you open your browser and type: http://localhost:3000/api/ you will see ' Stripe Hello World!' in your browser.

Creating a new Stripe Customer

In Stripe.js file let's add the stripe key as a constant and adding stripe module:

const Stripe_Key = 'sk_test_....jQb';
const stripe = require("stripe")(Stripe_Key);

and let's create an api which will create a new customer id from user's email address

Note
If you are using your own API key then you can add your organization account Secret Key. So it will link the customer with your organization.

You can add some extra fileds during creating the new customer using stripe API which you can found here on Stripe Documents
Currently we are not using any Database so we have to note down the customer id somewhere from our response message.

Response :

Let's Note Down Our Customer ID here: 'cus_IDxxDETTAorXTO'

Adding a card to the existing customer

For testing purposes we don't need to use real card data. Stripe has given some list of the card for the testing purposes and we are going to use it in this. You can find it here Stripe Test Cards

Card Number, Expiry Month, Year, CVC these are the required parameters for adding a new card. So if those parameters are not passed in the body then we are going throw a bad request error as the response.

Response :

View Customer's All Cards

To get the list of customer's saved cards we need to just pass the customerID which was generated by the stripe earlier.
In this case we only need cardId, Card Type, Expiry Details and Last 4 digit of the saved card. But if you need more data of the saved card you can find it here on Stripe Docs for View saved Cards

Response :

Update Card Details

From customer's saved card details we will get the cardID and from cardID we can update the saved card details like card holder name, expiry month, expiry year, address details etc. All the details except cardId is optional for update operation.
If you need to update more fields then you can find it here on Stripe Docs for Updating Card Details

Response :

Delete Saved Card

To delete a saved card we need to pass the ID of the savedCard

Response :

Creating A Payment Charge

We have two choices over here -- Customer can pay from existing card. -- Customer can pay without saving the new card or without existing cards.
So we are going to use 'oneTime' parameter from request.body as a toggle switch between them.

One Time Payment with new Card

const { amount, email } = req.body;
    const {
      cardNumber,
      cardExpMonth,
      cardExpYear,
      cardCVC,
      country,
      postalCode,
    } = req.body;

    if (!cardNumber || !cardExpMonth || !cardExpYear || !cardCVC) {
      return res.status(400).send({
        Error: "Necessary Card Details are required for One Time Payment",
      });
    }
    try {
      const cardToken = await stripe.tokens.create({
        card: {
          number: cardNumber,
          exp_month: cardExpMonth,
          exp_year: cardExpYear,
          cvc: cardCVC,
          address_state: country,
          address_zip: postalCode,
        },
      });

      const charge = await stripe.charges.create({
        amount: amount,
        currency: "usd",
        source: cardToken.id,
        receipt_email: email,
        description: `Stripe Charge Of Amount ${amount} for One Time Payment`,
      });

      if (charge.status === "succeeded") {
        return res.status(200).send({ Success: charge });
      } else {
        return res
          .status(400)
          .send({ Error: "Please try again later for One Time Payment" });
      }
    } catch (error) {
      return res.status(400).send({
        Error: error.raw.message,
      });
    }

Payment with an existing Card

const { amount, cardId,  email } = req.body;

try {
      const createCharge = await stripe.charges.create({
        amount: amount,
        currency: "usd",
        receipt_email: email,
        customer: customerId,
        card: cardId,
        description: `Stripe Charge Of Amount ${amount} for Payment`,
      });
      if (createCharge.status === "succeeded") {
        return res.status(200).send({ Success: createCharge });
      } else {
        return res
          .status(400)
          .send({ Error: "Please try again later for payment" });
      }
    } catch (error) {
      return res.status(400).send({
        Error: error.raw.message,
      });
    }

Final Charge Payment Code

One Time Payment Response :

Saved Card Payment Response :

Final Stripe.JS

Now the stripe.js will something similar to this:

const express = require("express");
const router = express.Router();
const Stripe_Key =
  "sk_test_....Qb";
const stripe = require("stripe")(Stripe_Key);
const customerId = "cus_IDxx....orXTO";

router.get("/", (req, res) => {
  res.status(200).json({
    message: "Stripe Hello World!",
  });
});

// Create a new customer for stripe
router.post("/newCustomer", async (req, res) => {
  console.log("\n\n Body Passed:", req.body);
  try {
    const customer = await stripe.customers.create(
      {
        email: req.body.email,
      }
      // {
      //   // If you are using your own api then you can add your organization account here. So it will link the customer with your organization
      //   stripeAccount: process.env.StripeAccountId,
      //}
    );
    return res.status(200).send({
      //   customerDetails: customer,
      customerId: customer.id,
      customerEmail: customer.email,
    });
  } catch (error) {
    return res.status(400).send({ Error: error.raw.message });
  }
});

// Add a new card of the customer
router.post("/addNewCard", async (req, res) => {
  console.log("\n\n Body Passed:", req.body);
  const {
    cardNumber,
    cardExpMonth,
    cardExpYear,
    cardCVC,
    cardName,
    country,
    postal_code,
  } = req.body;

  if (!cardNumber || !cardExpMonth || !cardExpYear || !cardCVC) {
    return res.status(400).send({
      Error: "Please Provide All Necessary Details to save the card",
    });
  }
  try {
    const cardToken = await stripe.tokens.create({
      card: {
        name: cardName,
        number: cardNumber,
        exp_month: cardExpMonth,
        exp_year: cardExpYear,
        cvc: cardCVC,
        address_country: country,
        address_zip: postal_code,
      },
      // customer: customer.stripe_id,
      // stripe_account: StripeAccountId,
    });

    const card = await stripe.customers.createSource(customerId, {
      source: `${cardToken.id}`,
    });

    return res.status(200).send({
      card: card.id,
    });
  } catch (error) {
    return res.status(400).send({
      Error: error.raw.message,
    });
  }
});

// Get List of all saved card of the customers
router.get("/viewAllCards", async (req, res) => {
  let cards = [];
  try {
    const savedCards = await stripe.customers.listSources(customerId, {
      object: "card",
    });
    const cardDetails = Object.values(savedCards.data);

    cardDetails.forEach((cardData) => {
      let obj = {
        cardId: cardData.id,
        cardType: cardData.brand,
        cardExpDetails: `${cardData.exp_month}/${cardData.exp_year}`,
        cardLast4: cardData.last4,
      };
      cards.push(obj);
    });
    return res.status(200).send({
      cardDetails: cards,
    });
  } catch (error) {
    return res.status(400).send({
      Error: error.raw.message,
    });
  }
});

// Update saved card details of the customer
router.post("/updateCardDetails", async (req, res) => {
  const { cardName, cardExpMonth, cardExpYear, cardId } = req.body;

  if (!cardId) {
    return res.status(400).send({
      Error: "CardID is Required to update",
    });
  }
  try {
    const card = await stripe.customers.updateSource(customerId, cardId, {
      name: cardName,
      exp_month: cardExpMonth,
      exp_year: cardExpYear,
    });
    return res.status(200).send({
      updatedCard: card,
    });
  } catch (error) {
    return res.status(400).send({
      Error: error.raw.message,
    });
  }
});

// Delete a saved card of the customer
router.post("/deleteCard", async (req, res) => {
  console.log("\n\n Body Passed:", req.body);
  const { cardId } = req.body;
  if (!cardId) {
    return res.status(400).send({
      Error: "CardId is required to delete Card",
    });
  }
  try {
    const deleteCard = await stripe.customers.deleteSource(customerId, cardId);
    return res.status(200).send(deleteCard);
  } catch (error) {
    return res.status(400).send({
      Error: error.raw.message,
    });
  }
});

// Create a payment charge
router.post("/createCharge", async (req, res) => {
  const { amount, cardId, oneTime, email } = req.body;
  if (oneTime) {
    const {
      cardNumber,
      cardExpMonth,
      cardExpYear,
      cardCVC,
      country,
      postalCode,
    } = req.body;

    if (!cardNumber || !cardExpMonth || !cardExpYear || !cardCVC) {
      return res.status(400).send({
        Error: "Necessary Card Details are required for One Time Payment",
      });
    }
    try {
      const cardToken = await stripe.tokens.create({
        card: {
          number: cardNumber,
          exp_month: cardExpMonth,
          exp_year: cardExpYear,
          cvc: cardCVC,
          address_state: country,
          address_zip: postalCode,
        },
      });

      const charge = await stripe.charges.create({
        amount: amount,
        currency: "usd",
        source: cardToken.id,
        receipt_email: email,
        description: `Stripe Charge Of Amount ${amount} for One Time Payment`,
      });

      if (charge.status === "succeeded") {
        return res.status(200).send({ Success: charge });
      } else {
        return res
          .status(400)
          .send({ Error: "Please try again later for One Time Payment" });
      }
    } catch (error) {
      return res.status(400).send({
        Error: error.raw.message,
      });
    }
  } else {
    try {
      const createCharge = await stripe.charges.create({
        amount: amount,
        currency: "usd",
        receipt_email: email,
        customer: customerId,
        card: cardId,
        description: `Stripe Charge Of Amount ${amount} for Payment`,
      });
      if (createCharge.status === "succeeded") {
        return res.status(200).send({ Success: charge });
      } else {
        return res
          .status(400)
          .send({ Error: "Please try again later for payment" });
      }
    } catch (error) {
      return res.status(400).send({
        Error: error.raw.message,
      });
    }
  }
});

module.exports = router;

Conclusion

This is the totally working code to handle payment and its related data. All you have to do is replace the sandbox key with your Strip API key and it will work perfectly. Let me know if it is not working or anything I would really appreciate your feedbacks.

Top comments (8)

Ganiyu Omotayo Seedik • Feb 12 '22

I really appreciate this, this is one of the best article about stripe api.

Thanks for putting this together

Gautham Vijayan • Jun 24 '21

Phenomenal article about the backend Integration of Stripe. It would be nice if you gave a react frontend integration for this article

Abhee Hudani ☕ • Jun 26 '21

Thank you Gautham ! And yes, I'm planning to write an article about integration with react and going to publish it within a week or two. I'm happy that you liked this article.

Sam Py • Aug 2

Hi thanks for your description. Did you write an article about the react integration?

Gautham Vijayan • Aug 4

Hi Sam. I plan to write one in the upcoming month.

Karan Pandya • Jun 15 '21

Thank You very much my friend.. This helped me a lot.
As you're from my native, allow me to buy a you a coffee as a sweet gesture for this help...!

Abhee Hudani ☕ • Jun 16 '21

Thank you Karan, I'm really glad that you liked it and it has helped you !

diana popova • May 4 '23 • Edited

Thanks for providing helpful code snippets and screenshots to make the process easier to follow ;)
This is a helpful tutorial on payment handling with Stripe, Node, and Express. It's always great to learn new things about payment handling, especially with the rise of online transactions. Another payment solution that I have found useful is SkylightPaycard , which offers convenient and secure payment processing for businesses and individuals alike.

DEV Community

Payment Handling with Stripe, Node and Express

Why do you need a payment gateway ?

Github Repo Link and Postman Collection: Click Here

What are we building here:

How we are gonna save customer sensitive card details?

What do we need ?

Getting the stripe API Key:

Note:

Getting Started:

Index.js

Stripe.js

Adding stripe.js route to index.js

Creating a new Stripe Customer

Response :

Adding a card to the existing customer

Response :

View Customer's All Cards

Response :

Update Card Details

Response :

Delete Saved Card

Response :

Creating A Payment Charge

One Time Payment with new Card

Payment with an existing Card

Final Charge Payment Code

One Time Payment Response :

Saved Card Payment Response :

Final Stripe.JS

Conclusion

Top comments (8)

Read next

Build a Simple Real-Time SBOBET88-Style Website for Beginners with PHP, CSS, and JavaScript

Daily JavaScript Challenge #JS-33: Count Unique Elements

Symbol in Javascript with Example

Angular Form Array