Stripe Subscriptions & Checkout

Stripe Subscriptions & Checkout

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.


  1. In your Stripe dashboard (opens in a new tab), 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 our Pricing page example, we have the handleCheckout function, that takes the price ID as an argument, and handles the rest for you. All that remains is to trigger it by a button or whatever you decide to.

  4. Open http://localhost:3000/pricing (opens in a new tab) 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/webhooks/route.ts listens to Stripe events and will handle the logic to provision access (or not) to the user.

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

  7. Users can manage their accounts with <ButtonAccount /> (cancel subscription, update credit card, etc.)