Setup
Create a new account on Stripe and activate payments (boring, I know.. see you in a bit!)
In your [Settings], [Public Details], add your website URL
In your [Settings], [Branding], add your logo & colors
In your [Settings], [Customer Emails], turn on emails for successful payments & refunds
In your [Settings], [Customer Portal], activate link to customer portal (in case you need later)
In the search box, type 'rules' and click [Fraud Prevention > Rules] , make sure the first 3DS rule is enabled. I also turn on the second one (recommended). Make sure to block payments if CVC fails (check below)
Turn ON Test Mode
In your [Developers], copy your public & private keys and add them to STRIPE_SECRET_KEY & STRIPE_PUBLIC_KEY in .env.local
Create a webhook with URL like this: [ngrok_address]/api/webhooks
Webhook example: https://e714-71-136-126-125.ngrok-free.app/api/webhooks
Copy the signing secret and add it to STRIPE_WEBHOOK_SECRET in .env.local
To set up the webhook locally
Run the webhook listener (ngrok) first and events will be handled by local api /webhooks/route.
Going to production? Turn OFF Test Mode in your Stripe Dashboard In your [Developers], copy your public & private keys and add them to STRIPE_SECRET_KEY & STRIPE_PUBLIC_KEY in your production environment variables. In your [Developers], [Webhook], [Add Enpoint]. Set your domain + /api/webhook/stripe. Select [checkout.session.completed] event (or more if needed). Copy the signing secret and add it to STRIPE_WEBHOOK_SECRET in your production environment variables. Optional: In [Balance], [Manage Payouts], set a specific date of the month to receive your payouts (I use the 10th of each month) Optional: In [Settings], [Customers Emails], activate emails for successful payments & refunds
Create a checkout
From the front-end, use the PricingCTA to automatically create a checkout session (one-time payment or subscription)
Stripe webhooks & subscription handling
Our API listens to Stripe selected webhooks events & update the user accordingly. It turns boolean hasAccess (or has_access in Supabase) to true/false based on whether the user should have access to a paid resource or not.
You can add your own business logic to the /api/webhook/route API endpoint (add credits to a user, send email with a paid e-book etc.)
