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

• 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/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 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!

Don't get banned from Stripe before getting your first customer

Prevent disputes before they happen with ByeDispute