The flow is the same for one-time payments
Let's create a Stripe Checkout to set up a subscription and let our webhook handle the logic to provision access to the user.
Setup
Connect to Stripe webhook
1. Run the project npm run dev
2. Connect webhook to Stripe (ngrok or Stripe CLI)
Follow this tutorial to setupngrok.
After install, run ./ngrok http http://localhost:3000 to expose your local webhook to Stripe.
Now Stripe will be able to call your local /webhook.
Create a product
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].
When you create a product in Stripe dashboard, it will be automatically added in supabase table products.
Collect payment
Open http://localhost:3000/ in your browser, log-in and click the button ShipFastCheap to make a payment with the credit card number 4242 4242 4242 4242.
1
2
3
4
const handleStripeCheckout = async (sessionId: string) => {
const stripe = await getStripe();
stripe?.redirectToCheckout({ sessionId });
};
Our webhook /api/webhooks/route.ts listens to Stripe events and will handle the logic to provision access (or not) to the user.
You need to have a Stripe local endpoint running on your computer for this to work in dev mode. See ngrok above.
You can add your own logic in /api/webhook/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!
