- Languages: Node, HTML
- Tools Used: Stripe
- Time Saved: 3 weeks -> 40 mins
- Source Code
- Live Demo
This is Part 5 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 5, we will prepare to host our application in Production by:
- Moving all environment secrets to a .env file
- Deploying the application to Heroku
- Setting up a Cloud Mongo instance
- Setting up the Production Stripe Webhook events
Let's start!
Step 1: Store secrets securely
We currently have all the secret keys hardcoded in the source code. This is a big no-no when we go into production. The best way to secure store secrets is in a .env file.
Let's create a .env
STRIPE_SECRET_KEY=sk_xxx
PRODUCT_BASIC=price_xxx
PRODUCT_PRO=price_xxx
MONGODB=mongodb://localhost:27017/users
STRIPE_WEBHOOK_SECRET=whsec_xxx
TRIAL_DAYS=14We can then use these values in our source code by installing dotenv.
npm install dotenvIn the first line of app.js
require("dotenv").config();This will load up the secrets in .env and we can access them using process.env
In our src/connect/stripe.js
const Stripe = stripe(process.env.STRIPE_SECRET_KEY, {
apiVersion: "2020-08-27",
});Step 2: Deploy on Heroku
The easiest way to deploy our application is using Heroku. We can use their CI/CD pipeline to deploy from a Github repository.
App deployment on Heroku Don't forget to add our environmental variables to the deployment.
Go to Settings > Config Vars and all the .env variables in
## Step 3: Set up a cloud Mongo instance on MongoDB Atlas
We will need a hosted MongoDB instance to work with our application. MongoDB Atlas is a great choice. Plus it's free.
Create a new account at MongoDB Atlas.
Create a new Cluster.
- Cloud Provider: AWS
- Region: Choose one with a free tier
We also need to add a user to be able to read the data. On the Atlas dashboard, add a new Database User with default privileges of Read and write to any database. You can however set up specific privileges for better security.
Creating a new DB user on Mongo Our database is now ready to be used. To get the connection string, click on Cluster button on the dashboard > Connect your application.
The connection string looks like:
mongodb+srv://<username>:<password>@saasbase-guides.bibzo.mongodb.net/users?retryWrites=true&w=majority
Add in your database username, password to the string. We can now add this to the MONGODB Config Var on Heroku.
Step 4: Configure Webhook for Production
We have been using a local webhook for the events from Stripe. This will not work in Production. We need to create a Production webhook key in Stripe Dashboard so that our deployed application can receive events. It's pretty simple to set up.
On the Stripe dashboard, head on over to Developers > Webhooks. Add a new endpoint.
Endpoint URL: Heroku deployment endpoint + /webhook
Events to send: customer.subscription.created and customer.subscription.updated
!https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2021/05/5-2.png
Adding a new Stripe webhook endpoint Copy over the newly generated Webhook Signing Secret and add it to the Config Vars as STRIPE_WEBHOOK_SECRET in Heroku. Redeploy the application so that the changes can take effect.
Final Thoughts
And there you have it! Your own Subscription Billing solution for your fancy SaaS app - built start to finish in a few hours without any headache.
