Stripe Subscriptions

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

1. 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].

2. In the [Pricing] section, copy the product price ID (starts with price_) and add it to the first plan in the stripe.plans array config.js.

3. In /dashboard/page.js, paste this:

import ButtonAccount from "@/components/ButtonAccount";
import ButtonCheckout from "@/components/ButtonCheckout";
import config from "@/config";
 
export const dynamic = "force-dynamic";
 
export default async function Dashboard() {
  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <ButtonAccount />
 
        <h1 className="text-3xl md:text-4xl font-extrabold">
          Subscribe to get access:
        </h1>
 
        <ButtonCheckout
          mode="subscription"
          priceId={config.stripe.plans[0].priceId}
        />
      </section>
    </main>
  );
}

4. Open http://localhost:3000/dashboard in your browser, log-in and click the button to make a payment with the credit card number 4242 4242 4242 4242.

5. 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 boolean hasAccess in the User.js schema (NextAuth) or has_access in your Supabase profiles table.

   💡

   You need to have a Stripe local endpoint running on your computer for this to work in dev mode.

6. You can add your own logic in /api/webhook/stripe/route.js like sending abandoned cart emails, remove credits, etc.

7. 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!