Pricing Plans

Note: This is mock/placeholder content for demonstration purposes.

Configure your pricing structure to match your business model.

Plan Structure

Each pricing plan consists of:

• ID - Unique identifier
• Name - Display name
• Price - Amount in your currency
• Interval - Billing frequency (month, year)
• Features - List of included features
• Limits - Usage constraints

Example Configuration

// config/billing.config.ts
export const billingConfig = {
  provider: 'stripe',
  products: [
    {
      id: 'starter',
      name: 'Starter',
      description: 'Perfect for getting started',
      currency: 'usd',
      features: ['5 projects', 'Basic analytics'],
      plans: [
        {
          id: 'starter-monthly',
          name: 'Monthly',
          price: 0,
          interval: 'month',
          type: 'recurring',
          lineItems: [
             {
                id: 'price_123',
                name: 'Starter Subscription',
                cost: 0,
                type: 'flat',
             }
          ],
          limits: {
            projects: 5,
            members: 1,
          },
        },
      ],
    },
    {
      id: 'pro',
      name: 'Professional',
      description: 'For growing businesses',
      currency: 'usd',
      features: ['Unlimited projects', 'Advanced analytics'],
      plans: [
        {
          id: 'pro-monthly',
          name: 'Monthly',
          price: 49,
          interval: 'month',
          type: 'recurring',
           lineItems: [
             {
                id: 'price_456',
                name: 'Pro Subscription',
                cost: 49,
                type: 'flat',
             }
          ],
          limits: {
            projects: -1,
            members: 20,
          },
        },
      ],
    },
  ],
};

Feature Gating

Restrict features based on subscription plan:

import { hasFeature } from '~/lib/billing/features';

async function createProject() {
  const subscription = await getSubscription(accountId);

  if (!hasFeature(subscription, 'api_access')) {
    throw new Error('API access requires Pro plan');
  }

  // Create project
}

Usage Limits

Enforce usage limits per plan:

import { checkLimit } from '~/lib/billing/limits';

async function addTeamMember() {
  const canAdd = await checkLimit(accountId, 'members');

  if (!canAdd) {
    throw new Error('Member limit reached. Upgrade to add more members.');
  }

  // Add member
}

Annual Billing

Offer discounted annual plans:

{
  id: 'pro-annual',
  name: 'Professional Annual',
  price: 470, // ~20% discount
  interval: 'year',
  discount: '20% off',
  features: [ /* same as monthly */ ],
}

Trial Periods

Configure free trial periods:

export const trialConfig = {
  enabled: true,
  duration: 14, // days
  plans: ['starter', 'pro'], // plans eligible for trial
  requirePaymentMethod: true,
};

Customizing the Pricing Page

The pricing page automatically generates from your configuration:

import billingConfig from '~/config/billing.config';

export default function PricingPage() {
  return (
    <PricingTable
      config={billingConfig}
      paths={{
        signUp: '/auth/sign-up',
        return: '/',
      }}
    />
  );
}

Adding Custom Features

Extend plan features with custom attributes:

{
  id: 'enterprise',
  name: 'Enterprise',
  price: null, // Contact for pricing
  custom: true,
  features: [
    'Everything in Pro',
    'Dedicated support',
    'Custom SLA',
    'On-premise deployment',
  ],
  ctaText: 'Contact Sales',
  ctaUrl: '/contact',
}