duncanhealy/nextjs-saas-starter

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

Setup

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

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. You will be prompted for these when deploying with Vercel.

Deploy with Vercel

Once your project has been deployed, continue with the configuration steps below. Note that this deployment step includes prompts for automatically creating a webhook endpoint for you.

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

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 (the webhook creation is part of deploying to Vercel, the webhook endpoint is configured at the /api/webhooks path).

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: 200 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/

Develop locally

If you've deployed the project with Vercel, it will have created a repository for you which you can clone to your local machine. If you haven't deployed with Vercel, you can use create-next-app with Yarn or npx to bootstrap the example:

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

Setting up the env vars locally

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.

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.

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.