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/page.js
  • 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!