thakopian/nextjs-sub-template-project

Project from the Nextjs sub payment template via Github hackathon

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