Stripe Product and Price Setup

Date: 2025-01-04 Status: ✅ Complete

Overview

All Stripe products and prices have been created successfully for the homepage.dev subscription tiers. This document provides the product and price IDs needed for environment configuration.

Products Created

1. Personal Tier

• Product ID: prod_TMSjryzabS4vOs
• Name: Personal
• Description: Perfect for individuals getting started with a custom homepage. Includes 3 pages, 5 tabs per page, and cloud sync.
• Features:
  • 3 pages maximum
  • 5 tabs per page
  • Cloud sync enabled
  • No premium widgets
  • No AI credits

2. Pro Tier

• Product ID: prod_TMSj5E2GvQBMYK
• Name: Pro
• Description: For power users who want unlimited customization and cloud sync. Unlimited pages and tabs, premium widgets, AI helper credits, custom domains, and API access.
• Features:
  • Unlimited pages
  • Unlimited tabs per page
  • Cloud sync enabled
  • Premium widgets enabled
  • 100 AI credits per month
  • Custom domains
  • API access

3. Team Tier

• Product ID: prod_TMSkjnNqny1cGj
• Name: Team
• Description: Collaborate with your team on shared homepages and resources. Unlimited pages and tabs, team sharing, SSO integration, advanced permissions, and dedicated support.
• Features:
  • Unlimited pages
  • Unlimited tabs per page
  • Cloud sync enabled
  • Premium widgets enabled
  • 500 AI credits per month
  • Team sharing
  • SSO integration
  • Custom domains
  • API access
  • Advanced permissions
  • Dedicated support

Prices Created

Personal Tier Pricing

Yearly Savings: $8.00 (16.67% discount)

Pro Tier Pricing

Yearly Savings: $18.00 (16.67% discount)

Team Tier Pricing

Yearly Savings: $38.00 (16.67% discount)

Environment Variables

Add these environment variables to your .env.local file:

# Stripe Configuration
STRIPE_SECRET_KEY=sk_live_...  # Your Stripe secret key
STRIPE_WEBHOOK_SECRET=whsec_... # Your webhook signing secret
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_... # Your publishable key

# Personal Tier Price IDs
STRIPE_PERSONAL_MONTHLY_PRICE_ID=price_1SPjo4Aye5brjRffe1sdUwS9
STRIPE_PERSONAL_YEARLY_PRICE_ID=price_1SPjoGAye5brjRff3OxcvQo8

# Pro Tier Price IDs
STRIPE_PRO_MONTHLY_PRICE_ID=price_1SPjokAye5brjRffO0iaBf5S
STRIPE_PRO_YEARLY_PRICE_ID=price_1SPjovAye5brjRfftU1yWaqo

# Team Tier Price IDs
STRIPE_TEAM_MONTHLY_PRICE_ID=price_1SPjqmAye5brjRffVAyS9mhe
STRIPE_TEAM_YEARLY_PRICE_ID=price_1SPjqwAye5brjRffqf7Enyuv

# Product IDs (optional, for reference)
STRIPE_PERSONAL_PRODUCT_ID=prod_TMSjryzabS4vOs
STRIPE_PRO_PRODUCT_ID=prod_TMSj5E2GvQBMYK
STRIPE_TEAM_PRODUCT_ID=prod_TMSkjnNqny1cGj

TypeScript Configuration

For type-safe access to these price IDs, create a configuration file:

// apps/homepage-web/lib/stripe/config.ts

export const STRIPE_CONFIG = {
  personal: {
    productId: process.env.STRIPE_PERSONAL_PRODUCT_ID,
    monthly: process.env.STRIPE_PERSONAL_MONTHLY_PRICE_ID,
    yearly: process.env.STRIPE_PERSONAL_YEARLY_PRICE_ID,
  },
  pro: {
    productId: process.env.STRIPE_PRO_PRODUCT_ID,
    monthly: process.env.STRIPE_PRO_MONTHLY_PRICE_ID,
    yearly: process.env.STRIPE_PRO_YEARLY_PRICE_ID,
  },
  team: {
    productId: process.env.STRIPE_TEAM_PRODUCT_ID,
    monthly: process.env.STRIPE_TEAM_MONTHLY_PRICE_ID,
    yearly: process.env.STRIPE_TEAM_YEARLY_PRICE_ID,
  },
} as const

export type BillingInterval = 'monthly' | 'yearly'
export type TierName = 'personal' | 'pro' | 'team'

export function getPriceId(tier: TierName, interval: BillingInterval): string | undefined {
  return STRIPE_CONFIG[tier][interval]
}

Trial Configuration

Trial periods should be configured in the checkout session creation, not on the prices themselves. The recommended trial period is 10 days for all paid tiers.

Example checkout session configuration:

const session = await stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [{
    price: priceId,
    quantity: 1,
  }],
  subscription_data: {
    trial_period_days: 10,
  },
  // ... other options
})

Next Steps: Phase 2

Now that products and prices are set up, proceed with Phase 2 implementation:

1. Webhook Handler (convex/stripe/webhooks.ts)

   • Handle subscription lifecycle events
   • Sync subscription data to Convex database
   • Update user tier based on Stripe events

2. Checkout Flow (app/api/stripe/checkout/route.ts)

   • Create checkout sessions with trial periods
   • Handle success/cancel redirects
   • Link Stripe customers to Convex users

3. Customer Portal (app/api/stripe/portal/route.ts)

   • Allow users to manage subscriptions
   • Handle plan changes and cancellations
   • Provide billing history access

4. Frontend Integration

   • Add upgrade buttons with tier selection
   • Display usage indicators and limits
   • Show trial status and countdown
   • Implement upgrade prompts on limit errors

Verification Checklist

• ✅ Personal product created with correct description
• ✅ Personal monthly price: $4.00/month
• ✅ Personal yearly price: $40.00/year
• ✅ Pro product created with correct description
• ✅ Pro monthly price: $9.00/month
• ✅ Pro yearly price: $90.00/year
• ✅ Team product created with correct description
• ✅ Team monthly price: $19.00/month
• ✅ Team yearly price: $190.00/year
• ✅ All prices are recurring with correct intervals
• ✅ All prices use USD currency
• ✅ 16.67% discount for yearly plans (2 months free)

Additional Notes

Pricing Strategy

• Consistent 16.67% discount on yearly plans (equivalent to 2 months free)
• Clear value progression: Personal → Pro → Team
• Monthly pricing allows users to try before committing to yearly

Trial Period Recommendations

• Personal: 10-day trial to test cloud sync
• Pro: 10-day trial to explore premium features
• Team: 10-day trial for team collaboration setup

Upgrade Path

• Users can upgrade from Personal → Pro → Team at any time
• Prorated credits apply automatically via Stripe
• Downgrades take effect at the end of the billing period

Reference: See docs/TIER_MANAGEMENT_PLAN.md for complete implementation roadmap Phase 1 Status: See docs/PHASE_1_IMPLEMENTATION_COMPLETE.md