Next.js Subscription Payments Starter

Next.js Subscription Payments Starter is a boilerplate for selling subscriptions on the web, pairing a Next.js and TypeScript frontend with Supabase for authentication and PostgreSQL and Stripe for billing. Built by Vercel, the starter is a ready-to-run SaaS scaffold that handles user sign-ins, plan selection, recurring charges, and subscription management, and it can be deployed to Vercel in one click with a Supabase integration.

What is the Next.js Subscription Payments Starter?

Vercel's Next.js Subscription Payments Starter is a production-oriented template for subscription-based applications. It combines Next.js, TypeScript, Supabase (auth plus PostgreSQL database), and Stripe (Checkout, customer portal, and webhooks) to give developers a working billing system out of the box. As input it takes your Stripe product configuration and user sign-ups; as output it delivers a fully functional SaaS site with authenticated users, synced pricing plans, and recurring payments. The project includes a live demo at https://subscription-payments.vercel.app/ and an architecture diagram that shows how the client, Supabase, and Stripe webhooks interact.

Key Features

• Supabase authentication — Secure user management with magic link and OAuth providers (GitHub, Google); redirect wildcards for Vercel previews are documented in the setup guide.
• Supabase PostgreSQL database — Data access and management on top of PostgreSQL, with the option to generate TypeScript types using the Supabase CLI (supabase gen types typescript).
• Stripe Checkout — Integrated recurring billing for predefined amounts at fixed intervals (monthly/yearly), supporting multiple products and price tiers like Hobby at 10 USD/month or 100 USD/year.
• Stripe customer portal — Customers can update their payment methods, change or cancel subscriptions; each capability is enabled with a toggle in the Stripe dashboard.
• Webhook sync — Stripe webhooks automatically mirror product and price data to the Supabase database; a fixtures/stripe-fixtures.json file bootstraps test data via the Stripe CLI.
• TypeScript end-to-end — All code is written in TypeScript, from Next.js pages to API routes and Supabase queries.
• Chakra UI — The interface is built with Chakra UI, providing accessible React components, theming, and consistent styling across the auth and account pages.
• One-click Vercel deployment — The "Deploy with Vercel" button creates a repository, provisions a Supabase project, and guides you through Stripe configuration; environment variables are pulled locally with vercel env pull.

Who is it for?

• SaaS founders — They can scaffold a subscription product with working auth and billing, then focus on their core feature set instead of payment plumbing.
• Next.js developers — They get a reference implementation of Stripe Checkout, webhooks, and Supabase auth in a clean, typed project structure.
• Indie hackers and side-project builders — They can launch a paid product quickly and use the Stripe test fixtures to validate the flow before going live.

What can you do with it?

• Launch a subscription app: Deploy the starter, create Stripe products and prices in the dashboard, and the webhook automatically imports them into Supabase — then customers can sign up and pay.
• Manage customer subscriptions: Use the Stripe customer portal to let users update payment methods, switch plans, or cancel — all without writing additional code.
• Test payments locally: Install the Stripe CLI, run stripe listen --forward-to=localhost:3000/api/webhooks, and send test events like product.created to verify the integration end-to-end.

How does it work?

Users authenticate via Supabase Auth and are stored in a Supabase PostgreSQL database. Product and pricing definitions live in Stripe; on change, Stripe sends webhooks to the Vercel serverless function at /api/webhooks, which syncs the data into Supabase. When a customer subscribes, Stripe Checkout handles payment, and the customer portal provides ongoing subscription management. The Vercel deployment flow sets up the Supabase integration, while Stripe requires manually adding a webhook endpoint that points to https://your-deployment-url.vercel.app/api/webhooks and setting environment variables for the publishable key, secret key, and webhook secret.

FAQ

Is the Next.js Subscription Payments Starter free to use?

The template is open source and available on GitHub, so there is no license cost. Running it requires hosting on Vercel and a Supabase project (both have free tiers), and Stripe's test mode is free for development; live payments incur Stripe's standard processing fees.

Does it support OAuth login like GitHub or Google?

Yes. You configure the OAuth provider in Supabase Auth, then add the provider to the provider array on the sign-in page (pages/signin.tsx). The docs linked from the readme walk through each step.

Can I use different pricing tiers?

Stripe Checkout supports plans that bill a predefined amount at a specific interval (e.g., 10 USD per month). More complex models like per-seat or tiered pricing are not supported by Checkout and are not included in the starter, so you would need to build a custom solution.

How do I switch from test mode to live mode?

Archive all test-mode Stripe products, create live products, and replace the test environment variables with production keys and a live webhook secret. The readme recommends verifying that the Stripe test card is rejected afterward, then redeploying.

What should I do if the deployment build fails?

The readme notes that the initial build will fail because the Stripe environment variables are not set yet. Complete the Stripe webhook and environment variable configuration, then redeploy from the Vercel dashboard — the build will succeed once the variables are present.