Loading…
Guide
Quick answer
To add Stripe subscriptions to a Next.js app, create products and prices in Stripe, send users to hosted Checkout in subscription mode, handle signature-verified webhooks to sync subscription state to your database, and add a billing area. A Stripe SaaS template ships this already wired.
Billing is the part founders most often get subtly wrong — webhooks, proration and edge cases. Here's the reliable path.
In the Stripe dashboard, create a product per plan and a recurring price (monthly/annual). Copy the price IDs into your config.
Create a Checkout Session in subscription mode with the chosen price and redirect the user to the Stripe-hosted page. It handles cards and tax.
Add a webhook endpoint, verify the signature with your webhook secret, and on checkout.session.completed and customer.subscription.* events, update the subscription state in your database.
Read the stored subscription status server-side to unlock paid features. Never trust client state for access.
Give customers a way to manage or cancel their plan (Stripe's billing portal or your own UI), and handle failed payments gracefully.
Not for the hosted Checkout redirect flow — you create the Checkout Session server-side with your secret key and redirect to the URL Stripe returns. The publishable key is only needed for embedded/Elements flows.
Use signature-verified webhooks. On subscription created, updated and deleted events, update your database so your app's access checks always reflect the real Stripe state.
Production-ready kits, components, agent skills and more — with live previews and clear licensing.
Explore the marketplace