How to add Stripe to your application

Stripe was the hardest thing I had to integrate for Journey Plus, it took me a week to get it up and running.

But I finally figured it out.

A lot of you said that you’re struggling with this, so I wrote this guide to make it easier for all of you 😁 

There are 3 elements to stripe that are important to integrate for a SaaS app:

• Checkout

• Billing Portal

• Webhook

Let me explain at a high level what each of them does:

• Checkout: allows your app to accept payments, the UI is optimized for conversion

• Billing Portal: allows users to manage their subscription and view other payment details

• Webhook: how Stripe integrates with your backend logic to verify that users have paid and give access to paid features

The code examples come from a next.js 14 app router project with API route handlers as the backend, but the same underlying logic should apply across all apps.

The code examples are barebones on purpose to avoid extra confusion.

Let’s get started 🤑 

Estimated reading time: 5 min 6 sec

Background

Hey I’m Miguel!

I'm a new grad software engineer living in NYC and a part-time indie hacker. I’m currently building Journey Plus, an interface for Midjourney.

I used to be a pre-med student, but then I switched to computer science in the spring of 2021, my sophomore year. That's how I got started writing code.

I started with C++, and now I'm mainly building web apps with Next.js, TypeScript, and Supabase.

Since then, I’ve interned at a notable web3 company, a unicorn dev tools startup, and was part of a fellowship program at a well-known Venture Capital firm.

Stripe Checkout

Stripe Checkout is the easiest way for someone to accept payments in their app.

Stripe hosts it so you don’t have to build this all by yourself. It supports one-time payments and subscriptions. It’s the solution I always reach for.

As I said earlier, this interface is optimized for conversion, so there’s a lot of benefits in adopting this solution for your product.

Here’s an example of what a stripe checkout page looks like:

You can configure the layout and functionality all from the dashboard, or from your code if you wanted to.

Code Samples

You will notice from these examples that a lot of the logic is done server-side. It was designed that way by Stripe for security purposes.

It’s very easy for sensitive information to be leaked on the client, so all the logic and processing is done on the server.

The client-side code for stripe checkout mainly sends the data needed by stripe to create a checkout session and then redirects the user to the checkout page.

The code below does 4 things:

• dynamically checks if the user is signing up for a monthly or annual plan

• include the original URL where the customer initiated the checkout process to be used in the success URL and cancel URL properties when the checkout session is created on the server-side code

• configures the environment variables to either use stripe checkout in test mode or live mode

• redirects the user to stripe checkout

The server-side code for stripe checkout mainly processes the data and generates the checkout session for the user to visit.

The code below does 6 things:

• process the data from the client

• configures the stripe pricing items either to be live pricing items or test pricing items

• configures the stripe key to be used for creating the stripe checkout session to either be in live or test mode

• configures the parameters for the checkout session

• creates the checkout session

• sends the session back to the client

Documentation

Billing Portal

The stripe billing portal allows users to manage their subscriptions to your application and view other payment details such as managing invoices, updating their payment methods and viewing their payment history.

This one is also hosted by stripe.

Here’s an example of what a stripe billing portal looks like:

You can also configure the layout and functionality of this portal all from the dashboard, or from your code.

Code Samples

The client-side code for stripe billing portal mainly sends the data needed by stripe in order to create a billing portal session and redirects the user to the billing portal page.

It’s important to take note that we save the stripe customer id in the database inside the stripe checkout code so we can use it to initialize the billing portal.

The code below does 2 things:

• pull the stripe customer id from the database

• redirects the user to the billing portal page

The server-side code for stripe billing portal mainly processes the data from the client and creates the billing portal session for the user to visit.

The code below does 3 things:

• configures the environment variables to either use stripe billing portal in test mode or live mode

• initializes the stripe billing portal session

• sends back the URL to redirect to the billing portal

Documentation

Webhook

The Stripe webhook is the final piece of the puzzle. It's a part of your app that grants paying users access to paid features and lets you store additional Stripe data in your database for future interactions with Stripe’s service.

What is a webhook? Its simply an API endpoint on your app where third parties can send data that integrates with your backend.

Keep in mind that when you launch this in production you have to configure the production stripe webhook in the stripe dashboard. First you go to the “developers” tab then hit the “webhook” button. You have to manually select which stripe events get sent to that production webhook.

Code Samples

The server-side code for the stripe webhook mainly processes the data sent from stripe and will either grant paid privileges to the user, revoke paid privileges, or add credits for continuing subscribers (if doing a credits-based business model).

The code below does 3 things:

• configures the environment variables for the webhook secret based on the environment

• verifies the event is coming from stripe

• processes the event that came from stripe

Documentation

If you want a more comprehensive example, look at this template by Vercel.

If you have any more questions, drop them in the comments :)