Tutorial: Payment Integration

Add Stripe subscription payments to your application using Bootspring.

What You'll Build#

• Pricing page with plan selection
• Stripe Checkout integration
• Customer portal access
• Webhook handling
• Subscription status management

Prerequisites#

• Next.js project with authentication
• Bootspring initialized
• Stripe account (test mode)
• Database with User model

Time Required#

Approximately 45 minutes.

Step 1: Set Up Stripe#

Create Stripe Account#

1. Go to stripe.com and sign up
2. Enable test mode (toggle in dashboard)
3. Create products and prices

Create Products#

In Stripe Dashboard → Products:

Free Plan

• Name: Free
• Price: $0/month (or skip)

Pro Plan

• Name: Pro
• Price: $29/month
• Price ID: price_pro_monthly
• Annual: $290/year
• Price ID: price_pro_annual

Team Plan

• Name: Team
• Price: $99/month per seat
• Price ID: price_team_monthly

Add Environment Variables#

Step 2: Apply Payment Skills#

Step 3: Install Dependencies#

Step 4: Create Stripe Client#

Ask the payment-expert:

Server Client#

Client-Side#

Step 5: Update Database Schema#

Run migration:

Step 6: Create Checkout API#

Step 7: Create Customer Portal API#

Step 8: Create Webhook Handler#

Step 9: Create Pricing Page#

Pricing Card Component#

Step 10: Add Billing Settings#

Manage Subscription Component#

Step 11: Test the Integration#

Set Up Stripe CLI#

Copy the webhook signing secret to .env.local.

Test Checkout Flow#

1. Go to /pricing
2. Select a plan
3. Use test card: 4242 4242 4242 4242
4. Complete checkout
5. Verify redirect to dashboard

Test Customer Portal#

1. Go to /settings/billing
2. Click "Manage Subscription"
3. Verify portal opens

Verification Checklist#

• Pricing page displays correctly
• Checkout creates subscription
• Webhook updates database
• Customer portal works
• Subscription status shows correctly

Security Review#

What You Learned#

• Setting up Stripe products
• Creating checkout sessions
• Handling webhooks
• Customer portal integration
• Subscription management

Next Steps#

• Add usage-based billing
• Implement team seats
• Add invoices

Resources#

• Stripe Documentation
• payments skills reference
• Payment Expert agent