TutorialsStripe Subscriptions
The flow is the same for one-time payments
Let's create a Stripe Checkout to set up a subscription and let our webhook handle the logic to provision access to the user.
You need to have Stripe and a database set up.
Setup
- In your Stripe dashboard, Click [More +] > [Product Catalog] > [+ Add Product]. Set a name and a monthly price (or anything according to your business model). Then click [Save Product].
- In the [Pricing] section, copy the product price ID (starts with
price_
) and add it to the first plan in thestripe.plans
arrayconfig.js
. - In
/dashboard/page.js
, paste this:/app/pricing/pages.js
1import ButtonAccount from "@/components/ButtonAccount"; 2import ButtonCheckout from "@/components/ButtonCheckout"; 3import config from "@/config"; 4 5export const dynamic = "force-dynamic"; 6 7export default async function Dashboard() { 8 return ( 9 <main className="min-h-screen p-8 pb-24"> 10 <section className="max-w-xl mx-auto space-y-8"> 11 <ButtonAccount /> 12 13 <h1 className="text-3xl md:text-4xl font-extrabold"> 14 Subscribe to get access: 15 </h1> 16 17 <ButtonCheckout 18 mode="subscription" 19 priceId={config.stripe.plans[0].priceId} 20 /> 21 </section> 22 </main> 23 ); 24} 25
- Open
http://localhost:3000/dashboard
in your browser, log-in and click the button to make a payment with the credit card number4242 4242 4242 4242
. - Our webhook
/api/webhook/stripe/route.js
listens to Stripe events and will handle the logic to provision access (or not) to the user—See the booleanhasAccess
in theUser.js
schema (NextAuth) orhas_access
in your Supabaseprofiles
table.You need to have a Stripe local endpoint running on your computer for this to work in dev mode. - You can add your own logic in
/api/webhook/stripe/route.js
like sending abandoned cart emails, remove credits, etc. - Users can manage their accounts with
<ButtonAccount />
(cancel subscription, update credit card, etc.)
That's it. You can build your SaaS on top of this flow!
Don't get banned from Stripe before getting your first customer
Prevent disputes before they happen with ByeDispute
