Skip to content

Latest commit

 

History

History
271 lines (222 loc) · 7.61 KB

File metadata and controls

271 lines (222 loc) · 7.61 KB

Day 2: Payment Integration Sprint

🎯 Objective

Implement full Stripe payment integration with 3-tier pricing, checkout flow, subscription management, and webhook handling.

📊 Pricing Strategy

Tier 1: Basic - $29/month

Target: Individual professionals, solo practitioners

  • Access to Alpha Deck (general ops)
  • 100 AI interactions/month
  • Voice & Vision modes (limited)
  • Email support
  • Basic analytics

Tier 2: Pro - $99/month

Target: Active professionals, small practices

  • All Basic features
  • Access to Defense Deck (legal) OR Medical Deck (clinical)
  • 500 AI interactions/month
  • Unlimited Voice & Vision
  • Priority support
  • Advanced analytics
  • Export capabilities
  • MOST POPULAR

Tier 3: Enterprise - $299/month

Target: Practices, organizations, power users

  • All Pro features
  • Access to ALL decks (Alpha, Defense, Medical)
  • Unlimited AI interactions
  • White-label options
  • API access
  • Dedicated support
  • Custom integrations
  • Team collaboration (up to 5 users)

🏗️ Implementation Plan

Phase 1: Stripe Setup ✅

  • Install stripe and @stripe/stripe-js packages
  • Create lib/stripe.ts for server-side Stripe instance
  • Create lib/stripe-client.ts for client-side Stripe
  • Add Stripe keys to .env.example
  • Document Stripe dashboard setup

Phase 2: API Routes 🔧

  • Create /api/stripe/checkout - Create Checkout Session

    • Accept: priceId, userId (from session)
    • Return: sessionId for redirect
    • Modes: subscription (recurring)
  • Create /api/stripe/portal - Customer Portal

    • Redirect to Stripe Customer Portal for:
      • Cancel subscription
      • Update payment method
      • View invoices
      • Download receipts
  • Create /api/stripe/webhook - Handle Stripe Events

    • Listen for: checkout.session.completed
    • Listen for: customer.subscription.created
    • Listen for: customer.subscription.updated
    • Listen for: customer.subscription.deleted
    • Listen for: invoice.payment_failed
    • Update internal subscription state (localStorage for now, DB later)

Phase 3: Pricing Page 🎨

  • Create app/pricing/page.tsx
  • Design 3-column pricing table
  • Add feature comparison matrix
  • Add FAQ section
  • Mobile-responsive design
  • "Most Popular" badge on Pro tier
  • "Start Free Trial" CTA (14 days)
  • Social proof (testimonials from homepage)

Phase 4: Subscription Management 🔐

  • Create lib/subscription.ts for subscription checks
  • Add subscription context to terminal
  • Update middleware to check subscription status
  • Add "Upgrade" prompts when limits reached
  • Create subscription state management:
    interface Subscription {
      tier: 'free' | 'basic' | 'pro' | 'enterprise';
      status: 'active' | 'canceled' | 'past_due' | 'trialing';
      currentPeriodEnd: number;
      cancelAtPeriodEnd: boolean;
      usageThisMonth: {
        interactions: number;
        limit: number;
      };
    }

Phase 5: Billing Dashboard 💳

  • Create components/BillingDashboard.tsx
  • Show current plan details
  • Show usage this month (interactions)
  • Show next billing date
  • "Manage Subscription" button → Stripe Portal
  • "Upgrade" button → Pricing page
  • Invoice history

Phase 6: Usage Tracking 📈

  • Add interaction counter to terminal
  • Persist count in localStorage (temporary)
  • Show progress bar: "45/100 interactions this month"
  • Block requests when limit reached (with upgrade prompt)
  • Reset counter on new billing period

Phase 7: Testing & QA 🧪

  • Test checkout flow with Stripe test cards
  • Test webhook events with Stripe CLI
  • Test subscription upgrades/downgrades
  • Test cancellation flow
  • Test payment failure scenarios
  • Verify security (no exposed keys, HTTPS only)

🔑 Stripe Keys Needed

Add to .env.local:

# Stripe (get from https://dashboard.stripe.com/apikeys)
STRIPE_SECRET_KEY=sk_test_...your-secret-key...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...your-publishable-key...
STRIPE_WEBHOOK_SECRET=whsec_...your-webhook-secret...

# Stripe Price IDs (create products in Stripe Dashboard first)
STRIPE_PRICE_BASIC=price_...basic-monthly...
STRIPE_PRICE_PRO=price_...pro-monthly...
STRIPE_PRICE_ENTERPRISE=price_...enterprise-monthly...

📋 Stripe Dashboard Setup Steps

1. Create Stripe Account

  • Go to https://stripe.com/
  • Sign up for account
  • Complete onboarding
  • Switch to Test Mode (top right toggle)

2. Create Products

Navigate to Products → Add Product

Product 1: DarkDeck Basic

  • Name: DarkDeck Basic
  • Description: Individual professional plan with Alpha Deck access
  • Pricing: $29.00 USD / month
  • Billing period: Monthly
  • Copy the Price ID → STRIPE_PRICE_BASIC

Product 2: DarkDeck Pro

  • Name: DarkDeck Pro
  • Description: Professional plan with Defense or Medical Deck access
  • Pricing: $99.00 USD / month
  • Billing period: Monthly
  • Copy the Price ID → STRIPE_PRICE_PRO

Product 3: DarkDeck Enterprise

  • Name: DarkDeck Enterprise
  • Description: Enterprise plan with full access to all decks
  • Pricing: $299.00 USD / month
  • Billing period: Monthly
  • Copy the Price ID → STRIPE_PRICE_ENTERPRISE

3. Get API Keys

  • Go to Developers → API Keys
  • Copy Publishable keyNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
  • Copy Secret keySTRIPE_SECRET_KEY

4. Set Up Webhooks (After Deployment)

  • Go to Developers → Webhooks
  • Add endpoint: https://yourdomain.com/api/stripe/webhook
  • Select events:
    • checkout.session.completed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
    • invoice.payment_failed
  • Copy Signing secretSTRIPE_WEBHOOK_SECRET

5. Configure Customer Portal

  • Go to Settings → Customer Portal
  • Enable portal
  • Configure:
    • ✅ Cancel subscriptions
    • ✅ Update payment methods
    • ✅ View invoices
    • ✅ Update billing details

🧪 Testing with Stripe

Test Cards

Success: 4242 4242 4242 4242
Decline: 4000 0000 0000 0002
Requires Auth: 4000 0025 0000 3155

Expiry: Any future date
CVC: Any 3 digits
ZIP: Any 5 digits

Test Webhooks Locally

# Install Stripe CLI
scoop install stripe

# Login
stripe login

# Forward webhooks to local server
stripe listen --forward-to localhost:3000/api/stripe/webhook

# This will give you a webhook secret starting with whsec_
# Add it to .env.local as STRIPE_WEBHOOK_SECRET

Test Checkout Flow

  1. Start dev server: pnpm dev
  2. Go to /pricing
  3. Click "Subscribe" on any tier
  4. Use test card: 4242 4242 4242 4242
  5. Should redirect to success page
  6. Check Stripe Dashboard → Customers (should see new customer)
  7. Check webhook logs (should see checkout.session.completed)

🎯 Success Criteria

By end of Day 2, you should have:

  • ✅ Working pricing page with 3 tiers
  • ✅ Functional checkout flow
  • ✅ Webhook handling for subscription events
  • ✅ Subscription state management
  • ✅ Usage tracking (interactions)
  • ✅ Billing dashboard component
  • ✅ Upgrade prompts when limits reached
  • ✅ All tested with Stripe test mode

📈 Expected Impact

Revenue Potential (conservative estimates):

  • 10 Basic subscribers: $290/month
  • 30 Pro subscribers: $2,970/month
  • 5 Enterprise subscribers: $1,495/month
  • Total MRR: $4,755/month ($57,060/year)

Infrastructure Score Improvement:

  • Payment Integration: 0/10 → 9/10
  • Monetization: 0/10 → 8/10
  • Business Model: 3/10 → 7/10
  • Overall Score: 6.5/10 → 7.5/10

🚀 Let's Build!

Starting with Phase 1: Stripe Setup...