Grow your SaaS organically with Programmatic SEO.
Try for free →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.
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:
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
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.
First things first. We need a UI to guide our users through buying a subscription. Our UI will include:
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
and the
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.
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
.
A Customer object is successfully created on the Stripe Dashboard Perfect! We have a Customer.
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.
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.
Product - Basic
with $10 Price and Recurring
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",
};
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
Tools for SaaS Devs