Stripe Subscription Starter

Stripe Subscription Starter
Type: Code
Framework: Next.js
CSS: Tailwind
Database: Supabase

Here is the information you requested without any code blocks:

Next.js Subscription Payments Starter

The Next.js Subscription Payments Starter is an all-in-one starter kit designed for building high-performance SaaS (Software as a Service) applications. It comes with various features and integrations for secure user management, authentication, payment processing, and more.

Features:

  • Secure user management and authentication with Supabase.
  • Powerful data access and management tools on top of PostgreSQL with Supabase.
  • Integration with Stripe Checkout and the Stripe customer portal for handling subscription payments.
  • Automatic syncing of pricing plans and subscription statuses via Stripe webhooks.

Demo: You can view a demo of the Next.js Subscription Payments Starter here.

Architecture: The starter kit’s architecture involves several steps for setup:

  1. Initiate Deployment:
    • Use the Vercel Deploy Button to create a new repository with the template on your GitHub account.
    • A Supabase project will be created, and SQL migrations will set up the database schema.
    • Ensure the Supabase environment variables are correctly configured.
  2. Configure Auth:
    • Set your main production URL in both Supabase and Vercel deployment settings.
    • Optionally, configure redirect wildcards and OAuth providers.
  3. Configure Stripe:
    • Create a webhook in the Stripe Developers section to connect Stripe to your Vercel Serverless Functions.
    • Set up environment variables for Stripe, including webhook secret.
    • Redeploy your app in Vercel for the changes to take effect.
  4. Create Product and Pricing Information:
    • Your application’s webhook listens for product updates on Stripe.
    • Create your product and pricing information in the Stripe Dashboard.
  5. Configure the Stripe Customer Portal:
    • Customize branding and configure settings in the Stripe Customer Portal.
  6. Going Live:
    • Archive all test mode Stripe products before going live.
    • Configure production environment variables for Stripe and Supabase.
    • Redeploy your app in Vercel for production mode.
  7. A Note on Reliability:
    • The template mirrors completed Stripe transactions to the Supabase database.
    • In case of database unavailability, Stripe will retry sending its response to the webhook for up to three days.

Develop Locally:

  • Clone the GitHub repository to your local machine.
  • Use the Vercel CLI to link your project and set up environment variables.
  • Start local webhook forwarding using the Stripe CLI.
  • Install dependencies and run the Next.js client locally.

Going Live:

  • Archive testing products in Stripe.
  • Configure production environment variables for both Stripe and Supabase.
  • Redeploy your application in Vercel.

A Note on Reliability:

  • The template handles situations where the Supabase database is unavailable.
  • Stripe will retry sending its response to the webhook for up to three days.

That’s a summary of the steps involved in setting up the Next.js Subscription Payments Starter. Please follow the detailed instructions provided for each step during the setup process.

If you have any specific questions or need further assistance with any of these steps, feel free to ask.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.