Building a Subscription System using Stripe, Node.js, and MongoDB - Part 1: Recurring Payments

Languages: Node, HTML

Tools Used: Stripe

Time Saved: 3 weeks -> 40 mins

Live Demo

Source code on Github

This is Part 1 in the series of guides on adding, managing, and keeping track of subscription payments using Stripe and Mongo for your SaaS app.

Introduction

Subscription Payments are the bread and butter of a SaaS application; it's how you start generating revenue. In a well-implemented system, users need to first be able to change or cancel their plans, and second, undergo a trial phase to see if they would even like to pay for premium features. Typically, it's a hassle to set these up. In this set of guides, we will go through all the steps required to build a complete Subscription Payments system for your SaaS app.

In Part 1, we will:

Create a basic sign-in flow to keep track of users

Let users pay for a subscription plan: $10/month for a Basic Plan or $12/month for a Pro Plan

Present users with a Stripe Checkout screen where they can pay using their credit card

Add a 2 weeks trial period before billing the user

Step 1: Setup the project

Let's start by creating a new project folder. Add a package.json

{
  "name": "stripe-subscriptions-nodejs",
  "version": "1.0.0",
  "author": "sssaini",
  "description": "Add Stripe Subscriptions Payments using Node.js",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "ejs": "^3.1.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.10.11",
    "stripe": "^8.114.0",
    "memorystore": "^1.6.4"
  }
}

Install dependencies by running,

npm install

Step 2: Set up a basic Express Server

Create a new file named app.js

const bodyParser = require("body-parser");
const express = require("express");

const app = express();
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);

app.use(express.static("public"));
app.engine("html", require("ejs").renderFile);

app.get("/", async function (req, res, next) {
  res.send("Hello World!");
});

const port = 4242;

app.listen(port, () => console.log(`Listening on port ${port}!`));

We will use the public folder to serve any static files like images, CSS, and JS. We are also using a templating engine called EJS so we can generate a dynamic HTML page by rendering information sent by the server.

Launch the app by running,

npm start

The application should be live at http://localhost:4242.

All the basic setup is now done! Let's move on to the meat of the application.

Step 3: Building the UI

First things first. We need a UI to guide our users through buying a subscription. Our UI will include:

A login screen where the customer can enter in their email address

An account screen that lets the customer buy a subscription

Add a / endpoint by editing the app.js

// ...

app.get("/", async function (req, res, next) {
  res.status(200).render("login.ejs");
});

// ...

Let's now work on the view by creating a new file, views/login.ejs

<html lang="en">
  <body class="text-center">
    <form class="form-login" action="/login" method="post">
      <h1>Log in</h1>
      <input type="email" name="email" placeholder="Email address" required />
      <button type="submit">Sign in</button>
    </form>
    <script
      src="<https://code.jquery.com/jquery-3.5.1.slim.min.js>"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

It looks pretty bare-bones, doesn't it? Fear not, our lovely team at SaaSBase already has you covered.

Grab the associated

HTML

and the

CSS

needed from the Github project.

Basic login screen that will create a Stripe Customer using the provided email address

To run the project,

npm start

A fancy login page should be available at http://localhost:4242.

Step 5: Create a Stripe Customer

Start by creating a new Stripe account here.

On the Stripe Dashboard, we have the option to manually create a Customer. But we want to do it through the API so that when a new customer logs into our app, a matching Stripe Customer Profile is created.

A Customer is one of the core resources in Stripe. Once we create a Customer using Stripe API, we get back the associated Customer API ID. This ID can then be used by our application to identify and track future transactions pertaining to that customer.

So what do we need to register the customer in Stripe? Just their email address, that's it.

The best practice when integrating an outside API is to create an abstraction layer between the application and the API in case the API contract changes in the future. Single Choice Principle.

Create a new file called src/connect/stripe.js

const stripe = require('stripe');
const STRIPE_SECRET_KEY = 'sk_test_xxx';

const Stripe = stripe(STRIPE_SECRET_KEY, {
	apiVersion: '2020-08-27'
});

const addNewCustomer = async (email) => {
	const customer = await Stripe.customers.create({
		email,
		description: 'New Customer'
	}) return customer
}

const getCustomerByID = async (id) => {
	const customer = await Stripe.customers.retrieve(id) return customer
}

module.exports = {
	addNewCustomer,
	getCustomerByID
}

Copy in your Stripe Secret Key by going to the Stripe Dashboard > Developers > API keys or by clicking here.

We can now add the customer to Stripe when they enter their email address with a /login POST endpoint. In app.js:

const Stripe = require("./src/connect/stripe");

app.post("/login", async (req, res) => {
  const { email } = req.body;

  const customer = await Stripe.addNewCustomer(email);
  res.send("Customer created: " + JSON.stringify(customer));
});

Let's test it out. Run the application using npm start. Sign in using an email address and if the Customer was successfully created in Stripe, we will get a successful response back like so:

{
	"id": "cus_IaFpg44TGYsJNT",
	"object": "customer",
	"address": null,
	"balance": 0,
	"created": 1608145534,
	"currency": null,
	"default_source": null,
	"delinquent": false,
	"description": "SaaSBase Customer",
	"discount": null,
	"email": "sukh@saasbase.dev",
	"invoice_prefix": "756F8AF0",
	"invoice_settings": {
		"custom_fields": null,
		"default_payment_method": null,
		"footer": null
	},
	"livemode": false,
	"metadata": {},
	"name": null,
	"next_invoice_sequence": 1,
	"phone": null,
	"preferred_locales": [],
	"shipping": null,
	"tax_exempt": "none"
}

The id is the unique ID for a Stripe Customer. From now on, we can add products, get invoices, etc. all by referring to this ID on behalf of our customer.

We can also see that our newly added Customer is now available on the

Dashboard

A Customer object is successfully created on the Stripe Dashboard Perfect! We have a Customer.

Step 6: Save the user session

We need to somehow persist the Customer ID so that it's available to us when the customer wants to make a purchase. The easiest way to do that is by using sessions.

In part 2 of this guide available here, we use MongoDB + sessions for session storage

Add sessions support with the express-session package In app.js

const session = require('express-session');
const MemoryStore = require('memorystore')(session);
const UserService = require('./src/user');
app.use(session({
	saveUninitialized: false,
	cookie: {
		maxAge: 86400000
	},
	store: new MemoryStore({
		checkPeriod: 86400000
	}),
	resave: false,
	secret: 'keyboard cat'
}));

app.post('/login', async (req, res) => {
    // ..
    req.session.customerID = customer res.send('customer created:' + JSON.stringify(customer));
});

The package saves the cookie on the client's browser as connect.sid. Learn more here.

We can verify this on Google Chrome by opening-up

Developer Tools

and going to

Application

tab > Cookies.

The account is stored in a cookie on the client

Session data is not saved in the cookie itself, just the session ID. The session data is stored server-side.

Step 7: Add products to the Stripe Dashboard

We are now ready to offer our subscription plans - Basic for $10 and Pro for $12.

To sell a subscription plan, we need a Product.

On the Stripe Dashboard, click on Products > Add product to add a new product.

Add a Product - Basic with $10 Price and Recurring

Add a Product - Pro with $12 Price and Recurring

A new Product is created on Stripe Each Product has an associated

Price API ID

. Save it, we will need it in the next step.

Creating a Product successfully returns the associated API key Let's copy the

Price API ID

for both our products and add them in our

app.js

const productToPriceMap = {
  BASIC: "price_xxx",
  PRO: "price_xxx",
};

Step 8: Create the Checkout Screen and add a Trial Period

We have a customer and we have our products. We are now ready to initiate a checkout screen where customers can enter in their credit card information and pay for the selected plan type.

We will create a Stripe checkout session on the server and send the associated Session ID back to the client. The client can use this ID to redirect to a secure checkout screen pre-filled with customer information, like their email address.

Create two radio buttons to select the plan type and a Buy Now button in views/account.ejs

I'm building a new SaaS to automate content marketing for your SaaS

Check it out →

Tools for SaaS Devs

Regex Generator