Billing

Overview

The billing system supports flexible pricing plans with features including:

  • Monthly and annual billing cycles with customizable discounts
  • Usage-based billing with credit systems and capped amounts
  • Trial periods and free tier support
  • Multiple currency support
  • Featured plan highlighting
  • Customizable feature lists per plan
  • Built-in annual discount calculations (20% by default)

All billing configuration is managed through a single file (commons/src/data/Plans.js), making it easy to update and maintain your pricing structure.

Getting Started

  1. Navigate to commons/src/data/Plans.js
  2. Plans are stored in the plansData array
  3. Each plan includes pricing, features, and billing settings
  4. Modify existing plans or add new ones by following the structure below

Plan Structure

Each plan is an object with the following key properties:

{
  id: 'plan-id',                 // Unique identifier
  name: 'Plan Name',             // Display name
  description: 'Description',    // Plan description
  features: [],                  // Array of features
  pricing: {
    monthly: 0,                  // Monthly price
    annual: 0,                   // Annual price (typically discounted)
    annualMonthly: 0,           // Monthly price when paid annually
  },
  currencySymbol: '$',          // Currency symbol
  currencyCode: 'USD',          // Currency code
  isFeatured: false,            // Featured plan flag
  isFree: false,                // Free plan flag
  trialDays: 14,                // Trial period
  credits: 100,                 // Usage credits
  cappedAmount: 500,            // Usage billing cap
  terms: 'Billing terms'        // Terms description
}

Pricing Calculations

  1. Monthly Pricing: Set the base price in the monthly field
  2. Annual Pricing: Common formula with 20% discount: 
    annual = monthly * 12 * 0.8
annualMonthly = monthly * 0.8

Adding a New Plan

const newPlan = {
  id: "your-plan-id",
  name: "Plan Name",
  description: "Plan description",
  features: ["Feature 1", "Feature 2", "Feature 3"],
  pricing: {
    monthly: 49,
    annual: 470, // 49 * 12 * 0.8
    annualMonthly: 39, // 49 * 0.8
  },
  currencySymbol: "$",
  currencyCode: "USD",
  isFeatured: false,
  trialDays: 14,
  buttonText: "14 days trial",
  isFree: false,
  credits: 150,
  cappedAmount: 300,
  terms: "Billed annually",
}

Usage-Based Billing

  • credits: Number of credits included in the plan
  • cappedAmount: Maximum billing amount for usage overages

Tips

  1. Keep plan IDs unique and descriptive
  2. Maintain consistent discount rates across plans
  3. Order plans from lowest to highest price
  4. Clearly differentiate feature sets between tiers

Example Plans Structure

export const plansData = [
  {
    // Free Plan
    id: "basic-free",
    pricing: { monthly: 0, annual: 0, annualMonthly: 0 },
    // ... other properties
  },
  {
    // Mid-tier Plan
    id: "business-pro",
    pricing: { monthly: 99, annual: 950, annualMonthly: 79 },
    // ... other properties
  },
  {
    // Premium Plan
    id: "enterprise",
    pricing: { monthly: 199, annual: 1900, annualMonthly: 158 },
    // ... other properties
  },
]
DatabaseCoupons