Embed Recurring Billing and Subscription Payments in your Node.js App

Subscriptions refer to a payment model in which a customer pays a recurring fee to access a certain product or service over a specified period—for example, weekly, monthly, or annually. Subscription-based services and products include entertainment streaming services such as Netflix, Amazon Prime, YouTube, Spotify, and Hulu; software as a service (SaaS) offerings of cloud-based software solutions such as Dropbox and Salesforce; and online learning platforms that offer educational resources and certifications such as Udemy.

While subscription models won't work for all businesses, they have become increasingly popular with the rise of digital services and products. The benefits of these models include a steadier and more predictable source of revenue than one-time sales. They're also more flexible, allowing businesses to adjust pricing and features to meet demand. Customers benefit from this flexibility, and subscriptions lower the barrier to entry for them since they don't have to invest a large sum upfront. Lastly, subscription models give businesses access to rich data about customers' usage patterns and preferences, which they can use to improve their offering and provide a better customer experience.

The good news for businesses and developers is that it can be very easy to integrate a subscription model in Node.js using North's Recurring Billing API. In this tutorial, you will learn how to use the Recurring Billing API to implement subscription-based pricing in your Node.js application.

Recurring payment form made with North's Recurring Billing API

Build this App

Clone this code repository to quickly create your own app today!

Project Overview

In this guide, you will create an application that will enable the user to create, look up, and update a subscription. The demo application will allow the user to create a basic or premium account. Once the user creates an account, they will be redirected to the profile page, where they can view their subscription details. On the profile page, they will be able to upgrade their basic account to a premium account.

Prerequisites

To follow along, you need to have the following:

Node.js and npm installed on your local machine
A code editor and a web browser
A free North developer account
North test credentials, which you must request from the Integration team

Setting Up the Development Environment

To initialize a Node.js app, create a folder named node-recurring, open it in the terminal, and run the following command:


npm init -y

Next, run the following command to install the dependencies that you will use in this project:


npm i express ejs node-fetch@2 sqlite3

You will use express to create a Node.js server, ejs to generate HTML templates, node-fetch@2 to make HTTP requests to the North EPX servers, and sqlite3 to store customer and subscription details.

Next, create a file named index.js inside the node-recurring folder. This file will act as the server entry point.

Lastly, open the package.json file and replace the scripts key-value pair with the code below to start the Node.js server:


"scripts": {
   "start": "node index"
},

Get in Touch

Talk to us about adding recurring subscription payments to your Node.js application today.

Creating the Views

Next, you will create the HTML pages that the user will use to interact with the server. Create a folder named views inside the node-recurring folder. In the views folder, create two files, home.ejs and profile.ejs.

Open the home.ejs file and paste the code below in it:


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>North Developer</title>
   <style>
   	body {
       	max-width: 500px;
       	margin: 20px auto;
       	padding: 1rem;
   	}
   	.details > div {
       	margin-top: .5rem;
       	display: flex;
       	flex-direction: column;
   	}
   	button {
       	margin-top: 1rem;
   	}
   </style>
</head>
<body>
   <h3>Choose a plan</h3>
   <button id="basic">Basic</button>
   <button id="premium">Premium</button>

   <form id="form">
   	<h4>Personal details:</h4>
   	<div class="details">
       	<div>
           	<label>First Name:</label>
           	<input type="text" id="firstName" value="John">
       	</div>
       	<div>
           	<label>Last Name:</label>
           	<input type="text" id="lastName" value="Smith">
       	</div>
       	<div>
           	<label>Phone:</label>
           	<input type="text" id="phone" value="1234567890">
       	</div>
       	<div>
           	<label>Email:</label>
           	<input type="email" id="email" value="jsmith@email.com">
       	</div>
   	</div>

   	<h4>Payment details:</h4>
   	<div class="details">
       	<div>
           	<label>Account Number:</label>
           	<input type="number" id="accountNo" value="4111111111111111">
       	</div>
       	<div>
           	<label>CVV</label>
           	<input type="number" id="cvv" value="123">
       	</div>
       	<div>
           	<label>Expiration Date</label>
           	<input type="number" id="expiry" value="2504">
       	</div>
   	</div>

   	<button type="submit">Sign up</button>
   </form>

   <script>
   	const basicBtn = document.getElementById('basic')
   	const premiumBtn = document.getElementById('premium')

   	let PlanType = ''
   	let Amount

   	basicBtn.addEventListener('click', () => {
       	PlanType = 'basic'
       	Amount = 10.99
   	})

   	premiumBtn.addEventListener('click', () => {
       	PlanType = 'premium'
       	Amount = 29.99
   	})

   	const form = document.getElementById('form')

   	form.addEventListener('submit', (e) => {
       	e.preventDefault()

       	const customerDetails = {
           	FirstName: document.getElementById('firstName').value,
           	LastName: document.getElementById('lastName').value,
           	Phone: document.getElementById('phone').value,
           	Email: document.getElementById('email').value,
           	AccountNumber: document.getElementById('accountNo').value,
           	CVV: document.getElementById('cvv').value,
           	ExpirationDate: document.getElementById('expiry').value,
           	PlanType,
           	Amount
       	}
     	 
       	fetch('http://localhost:3000/signup', {
           	method: 'POST',
           	headers: {
               	'Content-Type': 'application/json'
           	},
           	body: JSON.stringify({
               	customerDetails
           	})
       	})
       	.then((res) => res.json()
       	.then(json => {
           	console.log(json)
           	if(json.success === true){
               	window.location.assign(`http://localhost:3000/profile?id=${json.id}`)
           	}else {
               	alert('An error occurred')
           	}
       	})
       	)
   	})
   </script>
</body>
</html>

The code above renders a web page with a form where users can enter their personal and payment information. The code also allows them to choose between a basic and a premium account. Once a user clicks on the Sign up button, the form data is sent to the /signup API route on the server. When a server response is received, the browser redirects the user to the profile page and attaches the subscription ID received from the server to the page URL.

Next, open the profile.ejs file and paste in the code below:


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>North Developer</title>
   <style>
   	body {
       	max-width: 500px;
       	margin: 20px auto;
       	padding: 1rem;
   	}

   	h3 {
       	text-align: center;
       	text-decoration: underline;
   	}
   </style>
</head>
<body>
   <h3>My Profile</h3>
   <div>
   	<p>Name: <%=customer.firstName%> <%=customer.lastName%></p>
   	<p>Email: <%=customer.email%> </p>
   	<p>Phone: <%=customer.phone%> </p>
   	<p>Plan: <%=data.Description%> </p>
   	<p>Amount: <%=data.Amount%> billed <%=data.Frequency%> </p>
   </div>

   <div>
   	<button id="upgrade">Upgrade subscription</button>
   </div>

   <script>
   	const upgradeBtn = document.getElementById('upgrade')

   	// extract subscription ID from URL
   	const id = new URLSearchParams(window.location.search).get('id')

   	// update subscription
   	upgradeBtn.addEventListener('click', () => fetch('http://localhost:3000/upgrade', {
       	method: 'POST',
       	headers: {
               	'Content-Type': 'application/json'
           	},
           	body: JSON.stringify({
               	id,
               	Amount: 29.99
           	})
   	}).then(res => window.location.reload())
   	)
   </script>
</body>
</html>

This code displays the subscription and user data received from the server. It also renders an Upgrade subscription button that users can click on to upgrade from a basic to a premium account. When the user clicks on this button, the web page sends a POST request to the /upgrade route on the server. This request contains the subscription ID extracted from the page URL and the amount of the premium package in the request body.

Implementing the Server Logic

To implement the server logic, open the index.js file and paste in the code below:


// import the required modules
const express = require('express')
const fetch = require('node-fetch');
const sqlite3 = require('sqlite3').verbose();
var crypto = require('crypto');


// initialize DB
const db = new sqlite3.Database(':memory:');

const app = express()

// set view engine
app.set('view engine', 'ejs')

// parse application/json
app.use(express.json())

const port = 3000

const epiId = '<YOUR-EPI-ID>'; // {String} Merchant's unique 4-part key, which is provided after boarding with the processor
const epiKey = '<YOUR-EPI-KEY>'

app.get('/', (req, res) => {
 res.render('home')
})

// API routes go here

app.listen(port, () => {
 console.log(`Example app listening on port ${port}`)
})

This code imports all the required dependencies, initializes the SQLite database, sets the view engine, and renders the home.ejs view when the user visits the / route. Remember to replace and with the values you received from the North Integration team.

Creating a Subscription

To create a subscription, you need to make a POST request to https://billing.epxuap.com/subscription. The request header should contain an EPI-Id and an EPI-Signature. The EPI-Id is provided by the North Integration team. Generate the EPI-Signature following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide. The request body should contain CustomerData, PaymentMethod, and SubscriptionData. You can read more about each of these fields in the official documentation.

To implement a route that will be used to create a subscription, add the following code to the index.js file:


app.post('/signup', async (req, res) => {
 const { FirstName, LastName, Phone, Email, AccountNumber, ExpirationDate, CVV, PlanType, Amount } = req.body.customerDetails

 let today = new Date().getFullYear() + '-' +
         	String(new Date().getMonth() + 1).padStart(2, '0') + '-' +
         	String(new Date().getDate()).padStart(2, '0')

 // the payload containing the request data
 const payload = {
   CustomerData: {
 	FirstName,
 	LastName,
 	Phone,
 	Email,
   },
   PaymentMethod: {
 	CreditCardData: {
   	AccountNumber,
   	ExpirationDate,
   	CVV,
 	}
   },
   SubscriptionData: {
 	Amount,
 	Frequency: 'Monthly',
 	BillingDate: today,
 	Description: PlanType,
 	FailureOption: 'Pause'
   }
 }

 // convert the payload to JSON
 const payloadJson = JSON.stringify(payload)

 // concatenate the API route and the payload
 const concatData = '/subscription' + payloadJson

 // generate the ePISignature following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide

 fetch('https://billing.epxuap.com/subscription', {
   method: 'POST',
   headers: {
 	'Content-Type': 'application/json',
 	'EPI-Id': epiId,
 	'EPI-Signature': ePISignature,
   },
   body: JSON.stringify(payload)
 })
 .then(res => res.json()) // expecting a json response
 .then(data => {
   console.log(data)
   db.serialize(() => {
 	db.run('CREATE TABLE IF NOT EXISTS customerDetails (firstName TEXT, lastName TEXT, phone TEXT, email TEXT, description TEXT, amount TEXT, status TEXT, subscriptionId TEXT)')

 	const stmt = db.prepare("INSERT INTO customerDetails VALUES (?,?,?,?,?,?,?,?)");

 	stmt.run(FirstName, LastName, Phone, Email, data.Description, data.Amount, data.Status, data.id)

 	db.each('SELECT * FROM customerDetails', (err, row) => console.log(row))
   })
   if(data.VerifyResult.Code === '00'){ // check if the transaction was approved. Code '00' is returned on approval
 	res.send({
   	success: true,
   	id: data.id
 	})
   }
 });
})

This route extracts the submitted details from the request body, generates the current date, and stores all this information in a variable named payload. The payload object is then converted to JSON using the JavaScript JSON.stringify() method and the ePISignature is generated following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide.

The code then makes use of the Node.js implementation of the Fetch API to make a POST request to https://billing.epxuap.com/subscription with the required headers and the payload object in the body. Next, it converts the API response to JSON, stores the data in the SQLite database, and checks whether the transaction was approved by inspecting data.VerifyResult.Code—if the code is equal to "00", then the transaction was approved. Lastly, it sends a response containing the subscription ID to the front end.

Retrieving a Subscription

To retrieve a subscription, you need make a POST request to https://billing.epxuap.com/subscription/list. The request header should contain an EPI-Id and an EPI-Signature. The request body should contain the SubscriptionID, which should be an integer. Check out the official documentation to learn more about these fields and the sample response you should receive.

To implement a route that will be used to retrieve a subscription, add the following code to the index.js file:


app.get('/profile', (req, res) => {
 const { id } = req.query

 let customer
  db.serialize(() => {
   db.get(`SELECT * FROM customerDetails WHERE subscriptionId = ${id}`, (err, row) => customer = row)
 })

 const payload = {SubscriptionID: Number(id)}

 // convert the payload to JSON
 const payloadJson = JSON.stringify(payload)

 // concatenate the API route and the payload
 const concatData = '/subscription/list' + payloadJson

 // generate the ePISignature following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide

 fetch('https://billing.epxuap.com/subscription/list', {
   method: 'POST',
   headers: {
 	'Content-Type': 'application/json',
 	'EPI-Id': epiId,
 	'EPI-Signature': ePISignature,
   },
   body: JSON.stringify(payload)
 })
 .then(res => res.json()) // expecting a json response
 .then(data => {
   console.log(data)
   res.render('profile', {
 	customer,
 	data
   })
 });
})

This route accepts a GET request, extracts the id—which will be used as the SubscriptionID—from the request query object, and creates the payload object that will be submitted to the EPX servers. The EPI-Signature is generated following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide and is added to the request header, a POST request is made to https://billing.epxuap.com/subscription/list to retrieve the specified subscription, and the profile.ejs file is rendered with the data fetched from the API and the database.

Updating a Subscription

To update a subscription, you need to make a PUT request to https://billing.epxuap.com/subscription/. The request header should contain an EPI-Id and an EPI-Signature. The request body should contain the SubscriptionID and the SubscriptionData. Check out the official documentation to learn more about these fields and the sample response you should receive.

To implement a route that will be used to update a subscription, add the following code to the index.js file:


app.post('/upgrade', (req, res) => {
 const { id, Amount } =  req.body

 let customer
  db.serialize(() => {
   db.get(`SELECT * FROM customerDetails WHERE subscriptionId = ${id}`, (err, row) => customer = row)
 })

 const payload = {
   SubscriptionID: Number(id),
   SubscriptionData: {
 	Amount,
 	Frequency: 'Monthly',
 	FailureOption: 'Pause',
 	Description: 'premium'
   }
 }

 // convert the payload to JSON
 const payloadJson = JSON.stringify(payload)

 // concatenate the API route and the payload
 const concatData = '/subscription' + payloadJson

 // generate the ePISignature following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide

 fetch('https://billing.epxuap.com/subscription', {
   method: 'PUT',
   headers: {
 	'Content-Type': 'application/json',
 	'EPI-Id': epiId,
 	'EPI-Signature': ePISignature,
   },
   body: JSON.stringify(payload)
 })
 .then(res => res.json()) // expecting a json response
 .then(data => {
   console.log(data)
   res.render('profile', {
 	data,
 	customer
   })
 });
})

This route extracts the id—in this case, the SubscriptionID—and the Amount from the request body. It then constructs the payload object and generates an ePISignature following the instructions in the "How To Authenticate" section of the Recurring Billing API Integration Guide. Lastly, it makes a PUT request to https://billing.epxuap.com/subscription with the required data, receives a response, and renders the profile.ejs file with the necessary data.

Demonstrating the Final Application

To check out if everything is working as expected, execute the following command in the terminal to start the development server:


npm run start

Navigate to http://localhost:3000 in your browser, where you should see the payment form prefilled with test data.

Click on Basic to choose the basic plan. You can also change the values of each field. Next, click on Sign up to create a subscription. You should be navigated to the profile page that displays your subscription data. On the profile page, click on Upgrade subscription to update your subscription. The page will refresh and you should see the updated subscription details.

In this article, you have learned how to implement a subscription model using North's Recurring Billing API.

The tutorial showed you how you to allow for creating, retrieving, and updating a subscription. However, the recurring Billing API also allows for canceling and pausing or resuming subscriptions as well as making one-time payments and paying bills manually.

How To Get Started

North’s Sales Engineering team provides support to developers and business decision-makers to help select the best possible payment solution. Contact us to learn more about how to connect your system to the North ecosystem.

Embed Recurring Billing and Subscription Payments in your Node.js App
node-js subscription-payments recurring-billing javascript isv

Project Overview

Prerequisites

Setting Up the Development Environment

Creating the Views

Implementing the Server Logic

Creating a Subscription

Retrieving a Subscription

Updating a Subscription

Demonstrating the Final Application

How To Get Started

Related Posts

Top Challenges and Solutions for Subscription Billing

Integrate Advanced Payment Functions in your Python Flask App

ISVs: Automate Merchant Onboarding for Payment Acceptance in your Node.js App

Start your free Developer account and try it now.

Embed Recurring Billing and Subscription Payments in your Node.js Appnode-jssubscription-paymentsrecurring-billingjavascriptisv

Project Overview

Prerequisites

Setting Up the Development Environment

Creating the Views

Implementing the Server Logic

Creating a Subscription

Retrieving a Subscription

Updating a Subscription

Demonstrating the Final Application

How To Get Started

Related Posts

Top Challenges and Solutions for Subscription Billing

Integrate Advanced Payment Functions in your Python Flask App

ISVs: Automate Merchant Onboarding for Payment Acceptance in your Node.js App

Start your free Developer account and try it now.

Embed Recurring Billing and Subscription Payments in your Node.js App
node-js subscription-payments recurring-billing javascript isv