4.1 KiB
Stripe Setup Guide (Development)
This guide provides step-by-step instructions for setting up a Stripe test account and configuring payments for Kaboot in your local development environment.
Overview
Kaboot uses Stripe to manage subscriptions for "AI Pro" access. Users get 250 AI quiz generations per month with a paid subscription, while free users are limited to 5.
Prerequisites
- A Stripe Account.
- Stripe CLI installed on your machine.
- Kaboot local development environment running (see README.md).
1. Stripe Dashboard Configuration
Step 1: Enable Test Mode
Log in to your Stripe Dashboard and ensure the Test Mode toggle (usually in the top right) is turned ON.
Step 2: Create a Product
- Navigate to Products > Add Product.
- Name:
Kaboot AI Pro - Description:
250 AI quiz generations per month - Pricing:
- Price 1: $5.00 USD, Recurring, Monthly.
- Price 2: $50.00 USD, Recurring, Yearly.
- Click Save Product.
Step 3: Get Price IDs
After saving, copy the API IDs for both prices. They look like price_1P.... You will need these for your environment variables.
2. Environment Configuration
Add the following variables to your .env file in the project root:
# Stripe API Keys (Test Mode)
# Found at: https://dashboard.stripe.com/test/apikeys
STRIPE_SECRET_KEY=sk_test_51P...
# Stripe Price IDs (from Step 3 above)
STRIPE_PRICE_ID_MONTHLY=price_...
STRIPE_PRICE_ID_YEARLY=price_...
# Stripe Webhook Secret (Leave empty initially, see Section 3)
STRIPE_WEBHOOK_SECRET=whsec_...
Note
: In development,
STRIPE_SECRET_KEYshould always start withsk_test_.
3. Webhook Setup (Local Development)
Stripe needs to send events (like successful payments) to your local server. Since Stripe cannot access localhost directly, you must use the Stripe CLI to forward events.
Step 1: Login to Stripe CLI
stripe login
Step 2: Start Forwarding
Run the following command in a new terminal window:
stripe listen --forward-to localhost:3001/api/payments/webhook
Step 3: Get Webhook Secret
The command above will output a webhook signing secret (e.g., whsec_abc123...).
- Copy this secret.
- Paste it into your
.envfile asSTRIPE_WEBHOOK_SECRET. - Restart your backend server to apply the changes.
4. Testing the Flow
Test Credit Card
Use Stripe's test card numbers. The most common is:
- Card Number:
4242 4242 4242 4242 - Expiry: Any future date
- CVC: Any 3 digits
- Zip: Any 5 digits
Webhook Events to Monitor
When testing, watch your stripe listen terminal. You should see:
checkout.session.completed: When a user finishes the payment.customer.subscription.updated: When status changes.invoice.paid: When the monthly/yearly bill is settled (resets generation counts).
5. Troubleshooting
Webhook Signature Mismatch
Error: Webhook signature verification failed
- Solution: Ensure
STRIPE_WEBHOOK_SECRETin.envmatches the secret shown in yourstripe listenoutput. Each time you runstripe listen, a new secret might be generated if not configured as a permanent endpoint.
Missing Keys
Error: Stripe API Key not found
- Solution: Verify
STRIPE_SECRET_KEYis set in the.envfile that the backend (server) is reading.
Checkout Session Fails
Error: No such price: price_...
- Solution: Ensure your
STRIPE_PRICE_ID_MONTHLYandSTRIPE_PRICE_ID_YEARLYvariables match the Price IDs in your Stripe Test Mode dashboard.
Technical Details
- Webhook Endpoint:
POST /api/payments/webhook - Checkout Initiation:
POST /api/payments/checkout - Billing Portal:
POST /api/payments/portal(Allows users to manage/cancel subscriptions) - Database Fields: User subscription status is stored in the
userstable (subscription_status,generation_count, etc.).