TutorialsStripe Subscriptions

The flow is the same for one-time payments
Looking to use Lemon Squeezy? Follow this tutorial

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 the stripe.plans array config.js.
  • In /dashboard/page.js, paste this:

    /app/dashboard/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 number 4242 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 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.
  • 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!