Payment Integration Guide

Stripe Setup

Follow these steps to set up Stripe for your SuperFast application:

1. Create a Stripe Account

First, you need to create a Stripe account:

1. Sign up for a Stripe account
2. Complete your business profile
3. Verify your email address

2. Get Your API Keys

Obtain your Stripe API keys:

1. Go to the [Developers] section in your Stripe dashboard
2. Click on [API keys]
3. You'll find both [Publishable key] and [Secret key]
4. [Important]: Keep your secret key secure and never expose it in client-side code

3. Configure Environment Variables

Add the following environment variables to your .env.local file:

# Stripe API KeysSTRIPE_SECRET_KEY=sk_test_your_secret_key_hereNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here# Stripe Webhook Secret (for handling webhooks)STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here

4. Implement Stripe Integration

Create the necessary files to handle Stripe payments and subscriptions:

• Stripe Utility: Create lib/stripe.ts to initialize Stripe and handle client-side operations
• Checkout API: Create app/api/stripe/create-checkout/route.ts to generate checkout sessions
• Success Page: Create app/payment/success/page.tsx to handle successful payments
• Verification API: Create app/api/stripe/verify-payment/route.ts to verify payment status
• Webhook Handler: Create app/api/webhook/stripe/route.ts to process Stripe events

These components work together to create a complete payment flow:

1. User initiates payment → Checkout API creates session
2. User completes payment on Stripe → Redirected to success page
3. Success page verifies payment → Updates user subscription
4. Webhook handler processes events → Updates database asynchronously

5. Configure Webhook Endpoint

Set up your webhook endpoint in the Stripe dashboard:

1. Go to the [Developers] section in your Stripe dashboard
2. Click on [Webhooks]
3. Click [Add endpoint]
4. Enter your webhook URL: https://your-domain.com/api/webhook/stripe
5. Select the following events to listen to:
   • checkout.session.completed
   • customer.subscription.created
   • customer.subscription.updated
   • customer.subscription.deleted
   • invoice.paid
   • invoice.payment_failed
6. Copy the [Signing secret] and add it to your environment variables as STRIPE_WEBHOOK_SECRET

6. Switch Payment Modes

Implement a feature to allow users to switch between one-time payment and subscription modes with a single click: