Stripe is a payment processing platform that supports subscriptions, one-time payments, and complex billing scenarios. It provides robust APIs, webhooks, and a customer portal for subscription management.

1. Go to stripe.com and sign up for an account
2. Complete your business profile
3. Add a payment method (for account verification)
4. Switch between "Test mode" and "Live mode" using the toggle in the dashboard
5. Important: Use Test mode for development, Live mode for production

1. In your Stripe dashboard, go to "Developers" → "API keys"
2. You'll see two keys:
   • Publishable key: Starts with pk_test_ (test) or pk_live_ (live)
   • Secret key: Starts with sk_test_ (test) or sk_live_ (live)
3. Click "Reveal" to see the secret key
4. Copy both keys - you'll need them in the next step
5. Important: Never expose your secret key in client-side code

1. Go to "Products" in your Stripe dashboard
2. Click "Add product"
3. Fill in product details:
   • Name: Your subscription tier (e.g., "Starter")
   • Description: Optional
   • Pricing: Set recurring price (monthly, yearly, etc.)
4. Click "Save product"
5. Copy the Price ID (starts with price_) - you'll need this in your code
6. Repeat for each subscription tier you want to offer

Webhooks notify your app when payment events occur (subscription created, canceled, payment succeeded, etc.).

Step 1: Create Webhook Endpoint

1. Go to "Developers" → "Webhooks" in your Stripe dashboard
2. Click "Add endpoint"
3. Set the endpoint URL:
   • Development: http://localhost:3000/api/webhooks/stripe (use ngrok for local testing)
   • Production: https://yourdomain.com/api/webhooks/stripe
4. Select events to listen to (recommended: all customer.subscription.* events)
5. Click "Add endpoint"

Step 2: Get Webhook Secret

1. After creating the endpoint, click on it to view details
2. Click "Reveal" next to "Signing secret"
3. Copy the webhook secret (starts with whsec_)
4. This is your STRIPE_WEBHOOK_SECRET

Add these variables to your .env.local file:

# Stripe (Test mode)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_xxxxxxxxxxxxx"
STRIPE_SECRET_KEY="sk_test_xxxxxxxxxxxxx"
STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxx"

# Stripe Products
NEXT_PUBLIC_STRIPE_STARTER_PRICE_ID="price_xxxxxxxxxxxxx"

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

For Production: Replace test keys with live keys (starting with pk_live_ and sk_live_) and update NEXT_PUBLIC_APP_URL to your production domain.

Important:

• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is safe to expose in client code
• STRIPE_SECRET_KEY must NEVER be exposed - use server-side only
• STRIPE_WEBHOOK_SECRET is used to verify webhook signatures

1. Use Stripe's test mode (toggle in dashboard)
2. Restart your dev server: npm run dev
3. Navigate to your pricing/checkout page
4. Use Stripe test card: 4242 4242 4242 4242
   • Expiry: Any future date (e.g., 12/34)
   • CVC: Any 3 digits (e.g., 123)
   • ZIP: Any 5 digits (e.g., 12345)
5. Complete the checkout flow
6. Verify webhook events are received (check server logs)
7. Check subscription status updates in your database

Test Cards:

• Success: 4242 4242 4242 4242
• Decline: 4000 0000 0000 0002
• Requires 3D Secure: 4000 0027 6000 3184

Testing Webhooks Locally: Use Stripe CLI to forward webhooks:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

This gives you a webhook signing secret to use locally.