The all-in-one starter kit for high-performance SaaS applications.

Next.js Subscription Payments Starter

The all-in-one starter kit for high-performance SaaS applications. With a few clicks, Next.js developers can clone, deploy and fully customize their own SaaS subscription application.

Features

• Secure user management and authentication with Supabase.
• Powerful data access & management tooling on top of PostgreSQL with Supabase.
• Integration with Stripe Checkout and the Stripe customer portal, all plumbing already set up.
• Automatic syncing of pricing plans, and subscription statuses via Stripe webhooks.

Demo

• https://nextjs-subscription-payments-starter.vercel.app/

Architecture

How to use

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example https://github.com/vercel/nextjs-subscription-payments my-saas-app
# or
yarn create next-app --example https://github.com/vercel/nextjs-subscription-payments my-saas-app

Configuration

1. Create new Supabase project

Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.

2. Set up your database tables and auth policies

In your Supabase dashboard, go to the SQL editor. There, the welcome tab has a "Quick Start" section. Select the "Stripe Subscriptions" quick start (it has the same content as the schema.sql file) and hit the "RUN" button.

[Optional] - Set up OAuth providers

You can use third-party login providers like GitHub or Google. Refer to the docs to learn how to configure these.

3. Get your Supabase credentials

Create a copy of .env.local.example:

cp .env.local.example .env.local

In your Supabase Dashboard, go to the Project Settings (the cog icon), open the API tab, and find your API URL, the public anon key, and the secret service_role key and set them in your newly created .env.local file.

4. Get your Stripe credentials

In your Stripe Dashboard, go to Developers > API keys, and copy the publishable key and the secret key to your .env.local file.

The webhook secret differs for local testing vs. when deployed to Vercel. Follow the instructions below to get the corresponding webhook secret.

Test locally with the Stripe CLi

Install dependencies and run the Next.js client

npm install
npm run dev
# or
yarn
yarn dev

Use the Stripe CLI to test webhooks

First install the CLI and link your Stripe account.

Next, start the webhook forwarding:

stripe listen --forward-to=localhost:3000/api/webhooks

The CLI will print a webhook secret (such as, whsec_***) to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env.local file.

Deploy with Vercel

Configure Supabase Auth

After deploying, copy the deployment URL and navigate to your Supabase project settings (Authentication > Settings) and set your site url.

Configure Stripe

Configure Stripe webhooks

You need to set up a webhook that synchronizes relevant details from Stripe with your Supabase Database. This includes product and pricing data from the Stripe Dashboard, as well as customers' subscription details.

Here's how to set up the webhook and configure your project to use it:

1. Configure your webhook:

   1. Go to the Stripe dashboard.

   2. Set your endpoint URL: https://your-project.vercel.app/api/webhooks

   3. Select the following events:

   • product.created
   • product.updated
   • price.created
   • price.updated
   • checkout.session.completed
   • customer.subscription.created
   • customer.subscription.updated
   • customer.subscription.deleted

2. Once created, you can click to reveal your webhook signing secret. Copy the webhook secret (whsec_***) and add it to the environment variables in your Vercel Dashboard: Project > Settings > Environment Variables.

NOTE: After adding an environment variable, you will need to rebuild your project for it to become available within your code. In your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy".

Create product and pricing information

For Stripe to automatically bill your users for recurring payments, you need to create your product and pricing information in the Stripe Dashboard. When you create or update your product and price information, the changes are automatically synced with your Supabase database, as long as the webhook is configured correctly as described above.

Stripe Checkout currently supports pricing plans that bill a predefined amount at a specific interval. More complex plans (e.g. different pricing tiers or seats) are not yet supported.

For example, you can create business models with different pricing tiers, e.g.:

• Product 1: Hobby
  • Price 1: 10 USD per month
  • Price 2: 100 USD per year
  • Price 3: 8 GBP per month
  • Price 4: 80 GBP per year
  • [...]: additional currency and interval combinations
• Product 2: Freelancer
  • Price 1: 20 USD per month
  • Price 2: 20 USD per year
  • Price 3: 16 GBP per month
  • Price 4: 160 GBP per year
  • [...]: additional currency and interval combinations

Configure the Stripe customer portal

1. Set your custom branding in the settings.
2. Configure the Customer Portal settings.
3. Toggle on "Allow customers to update their payment methods".
4. Toggle on "Allow customers to update subscriptions".
5. Toggle on "Allow customers to cancel subscriptions".
6. Add the products and prices that you want to allow customer to switch between.
7. Set up the required business information and links.

That's it

That's it, you're now ready to earn recurring revenue from your customers \o/