Integrating payments to a project is one of the most important and challenging part and in this article we will be looking at how to integrate payment schemes using Stripe to a nodejs project by building a Tip sending App.

Prerequisites

Basic Knowledge of nodejs,express framework ,callback functions, promises, HTML & tailwind css

Why use stripe

Highly customizable and secured
Easy to integrate supporting almost all th payment gateways
Structured and easy to understand documentation
Sdks available for most of the programming languages like python ,ruby , nodejs , C# ,etc.
Used by most of the leading companies for payment outsourcing

Dependencies installation

In order to build this tip sending app we need to install the following dependencies via npm

npm i express hbs stripe body-parser

Folder structure

index.js will be in the root directory followed by index.html, pay.js & success.html under the views folder

Start the server

Inorder to create an express server add the following code to your index.js file

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.listen(port, () => console.log('Listening on port 5000...'));

Now open the terminal and use node index.js and your server will be started.

Create the Payment Page

Inside the views folder create a index.html and add the following code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <nav class="bg-blue-400 h-32 flex justify-center">
    <h1 class="text-white text-8xl font-mono">Send me a Tip</h1>
  </nav>

  <div class="flex justify-center my-12">
    <form action="/tip" method="POST" class="flex flex-col w-1/3">
      <input class="p-3 h-12 border-2 m-4  bg-gray border-zinc-300 rounded outline-none" type="text" name="name" placeholder=" Enter your Full Name">
      <input class="p-3 h-12 border-2 m-4  bg-gray border-zinc-300 rounded outline-none"type="email"  name="email" placeholder="Enter your Email ">
     <span>$ <input class="p-3 h-12 border-2 m-4  bg-gray border-zinc-300 rounded outline-none" type="text" name="amount" placeholder="Enter tip in USD"></span> 
      <div id="pay-element" class="bg-blue-400 p-2 h-12 m-2 rounded"></div>
      <div id="pay-errors" role="alert"></div>
      <button class="text-white bg-blue-400 p-2 m-2 rounded">Send a Tip</button>
    </form>
  </div>

<script src="https://js.stripe.com/v3/"></script>
<script src="pay.js"></script>
</body>
</html>

Here you can see that there are two empty div elements having the id of pay-element and pay-errors and there we will collect the card details from the user with the help of stripe card elements.

Now create the pay.js file and add the following code

const stripe = Stripe('STRIPE PUBLISHER KEY'); 
const elements = stripe.elements();

var style = {
  base: {
    color: "#00000"
  }
};

/* Create a payment Element*/ 
const payment = elements.create('card', { style });

payment.mount('#pay-element');

const form = document.querySelector('form');
const errorEl = document.querySelector('#pay-errors');

const tokenHandler = token => {
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  form.submit();
}

/*Generate token using form data */
form.addEventListener('submit', e => {
  e.preventDefault();

  stripe.createToken(payment).then(res => {
    if (res.error) errorEl.textContent = res.error.message;
    else tokenHandler(res.token);
  })
})

Here we are using the Stripe Elements object in order to create a card element and we are passing these card elements to those empty divs.

Now let's create a success page , so that on every successful payment the user will be redirected to a confirmation page. Again in the views folder Create a success.html and add the following code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Payment successful</title>
</head>

<body >
  <div class="flex flex-col items-center mt-24 text-black text-4xl">
  <h1>Your payment was successful !</h1>
    <a href="/"><button class="bg-gray-400 rounded px-4 m-3">Home</button></a>
  </div>
</body>

</html>

Setup the handle bars

In the index.js file add the following code in order to render these html pages

var hbs = require('hbs');
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
app.use(express.static(path.join(__dirname, './views')));

Let's preview our app now using node index.js

For now the payment will not work as we haven't add the request to our backend

Implementing the stripe payment request

Inorder to implement payments to our app now lets add the stripe module in our server code

const stripe = require('stripe')('STRIPE SECRET KEY');
/* Create a payment request using stripe */
app.post("/tip", (req, res) => {
  try {
    stripe.customers
      .create({
        name: req.body.name,
        email: req.body.email,
        source: req.body.stripeToken
      })
      .then(customer =>
        stripe.charges.create({
          amount: req.body.amount * 100,
          currency: "usd",
          customer: customer.id
        })
      )
      .then(() => res.render("success.html"))
      .catch(err => console.log(err));
  } catch (err) {
    res.send(err);
  }
});

Now finally use node index.js to start your sever and start using the app.

Extra tips

Always use test mode during development
Make Sure to hide your API keys using environment variables
Check out the Stripe Documentation here

Integrating payment schemes with stripe in nodejs