You can customise the available plans inside the defaultPricingPlans. The code will then get the correct one based on the billingPlan that was specified inside the billing.config.ts.

It’s recommended to not change the FREE_STRIPE_PRICE_INDICATOR as this is used for the free plan and used throughout the codebase.

export const defaultPricingPlans: {...} = {
    monthly: [
        {
            name: SubscriptionTier.FREE,
            description:
                "This is the description of the FREE plan and can be modified.",
            price: "$0",
            billing_period: BillingPeriod.MONTHLY,
            billing_plan: BillingPlan.RECURRING,
            is_highlighted: false,
            stripe_price_id: FREE_STRIPE_PRICE_INDICATOR,
            subscription_tier: SubscriptionTier.FREE,
        },
        ...
    ],
    annual: [
        {
            name: SubscriptionTier.FREE,
            description:
                "This is the description of the FREE plan and can be modified.",
            price: "$0",
            billing_period: BillingPeriod.YEARLY,
            billing_plan: BillingPlan.RECURRING,
            is_highlighted: false,
            stripe_price_id: FREE_STRIPE_PRICE_INDICATOR, // Important! Do not change this!!
            subscription_tier: SubscriptionTier.FREE,
        },
        ...
    ],
    oneTime: [
        {
            name: SubscriptionTier.ESSENTIALS,
            description:
                "This is the description of the ESSENTIALS plan and can be modified.",
            price: "$999",
            billing_period: BillingPeriod.LIFETIME,
            billing_plan: BillingPlan.ONE_TIME,
            is_highlighted: false,
            stripe_price_id: "YOUR_STRIPE_PRICE_ID",
            subscription_tier: SubscriptionTier.ESSENTIALS,
        },
        ...
    ],
};

You’re gonna notice that we also have a pricingCardFeatures and pricingComparisonFeatures object inside our pricing.config.ts file.

pricingCardFeatures is used to configure what features to show on the pricing card pricing-card.tsx

export const pricingCardFeatures: PricingFeatureItem[] = [
    {
        name: "Duis aute irure dolor",
        [SubscriptionTier.FREE]: true,
        [SubscriptionTier.ESSENTIALS]: true,
        [SubscriptionTier.INDIE_HACKER]: true,
    },
    ...
];

pricingComparisonFeatures is used to configure what features to show on the pricing comparision table pricing-comparison.tsx

export const pricingComparisonFeatures: PricingFeatureSection[] = [
    {
        category: "Lorem",
        items: [
            {
                name: "Lorem ipsum dolor sit amet",
                [SubscriptionTier.FREE]: true,
                [SubscriptionTier.ESSENTIALS]: true,
                [SubscriptionTier.INDIE_HACKER]: true,
            },
            ...
        ],
    },
    {
        category: "Ipsum",
        items: [
            {
                name: "Minim veniam",
                [SubscriptionTier.FREE]: "1 GB",
                [SubscriptionTier.ESSENTIALS]: "50 GB",
                [SubscriptionTier.INDIE_HACKER]: "500 GB",
            },
            ...
        ],
    },
];

To-Do’s:

  • Configure the name, description, price, stripe_price_id and subscription_tier for each of the plans inside the defaultPricingPlans. You can find the stripe_price_id in Stripe.
  • Configure the pricingCardFeatures and defaultPricingFeatures objects to contain the relevant features for each subscription.

FYI: You’ll be shown in the Stripe section how to create the plans and get the stripe_price_id for each plan.

app.config.tsbilling.config.ts