GuidesStripe
Table of Contents:
Setup
- Create a new account on Stripe and activate payments
- In your Settings → Business → Public Details, add your website URL
- In your Settings → Business → Branding, add your logo & colours
- In your Settings → Business→ Customer Emails, turn on emails for successful payments & refunds
- In your Settings → Billing → Customer Portal, activate link to customer portal (in case you need later)
- In the search box, type
rules
and click [Radar > Rules] , make sure the second 3DS rule is enabledRequest 3DS if 3D Secure is recommended for card
and turn on the third 3DS ruleRequest 3DS if 3D Secure is supported for card
. Enable CVC check and block payments if CVC failsBlock if CVC verification fails
. - Turn ON Test Mode
One Time Payments
- Create a new product and copy the price ID
price_1ju5GD464564
inconfig.stripe.plans[0].priceId
in to theconfig.ts
file. - In your Developers → API keys, copy your public & private keys and add them to the
STRIPE_SECRET_KEY
&STRIPE_PUBLIC_KEY
in.env.local
file. - To set up the webhook locally, follow the steps in Developers → Webhooks → Test in local environment. After login to Stripe CLI, use this command to forward webhook events to our API:
Terminal
1stripe listen --forward-to localhost:3000/api/webhook/stripe
Copy the signing secret and add it to STRIPE_WEBHOOK_SECRET
in .env.local
file.
Subscriptions
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.
You need to have both Stripe & Database to complete this.
- In your Stripe dashboard, Click [More +] → [Product Catalogue] → [+ 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 thestripe.plans
array in theconfig.ts
file. - In
/app/dashboard/page.tsx
, paste this: - Open
http://localhost:3000/dashboard
in your browser, log-in and click the button to make a payment with the credit card number4242 4242 4242 4242
expiry date set to a future date and a random CVV number. - Our webhook
/app/api/webhook/stripe/route.ts
listens to Stripe events and will handle the logic to provision access (or not) to the user—See the BooleanhasAccess
in theUser.ts
schema (NextAuth) orhas_access
in your Supabaseprofiles
table. - You can add your own logic in
/app/api/webhook/stripe/route.ts
like sending abandoned cart emails, remove credits, etc. - Users can manage their account with:
/app/dashboard/page.tsx
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="mx-auto max-w-xl space-y-8">
11 <ButtonAccount />
12
13 <h1 className="text-3xl font-extrabold md:text-4xl">
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}
You need to have a Stripe local endpoint running on your computer for this to work in dev mode.
/app/dashboard/page.tsx
1<ButtonAccount /> // (cancel subscription, update credit card, etc.)
That's it. You can build your SaaS on top of this flow!
Create Checkout
From the front-end, use theButtonCheckout
component to automatically create a checkout session (one-time payment or subscription).
Stripe Webhooks
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 /app/api/webhook/stripe/route.ts
API endpoint (add credits to a user, send email with a paid e-book etc.)
Production Checklist
- Turn OFF Test Mode in your Stripe Dashboard
- In your Developers → API keys 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 Endpoint. Set your domain + /api/webhook/stripe (i.e
example.com/api/webhook/stripe
). Selectcheckout.session.completed
event (or more if needed). Copy the signing secret and add it toSTRIPE_WEBHOOK_SECRET
in your production environment variables. - Optional: In Settings → Business → Bank accounts and currencies, set a specific date of the month to receive your payouts (I use the 10th of each month)
- Optional: In Settings → Business → Customer Emails, activate emails for successful payments & refunds
Stripe Chargeback Protection | ByeDispute
Reduce disputes by up to 80%. ByeDispute monitors fraudulent activity on your Stripe account and proactively prevents disputes and chargebacks. Lower your dispute rate, save money on fees, and don't get banned from Stripe.
Tired of managing Stripe invoices? | ZenVoice
Let your customers generate, edit, and download their Stripe invoices, so you don’t have to. ZenVoice is a no-code solution to reduce customer support and save money on Stripe fees.
Auto-fill Stripe's Test Card | Marvin
Stripe's Test Card Filler