Pricing Plans

import { RecurringPricingImpl } from '@kit/billing/pricing';
import { billingConfig } from '../../../../dashboard/config/billing.config';

export async function PricingPlansDemo() {
    return (
        <div className="-mx-10 p-4 max-lg:-mt-10 lg:absolute lg:top-1/2 lg:left-1/2 lg:mx-auto lg:w-7xl lg:-translate-x-1/2 lg:-translate-y-1/2 lg:scale-[0.543]">
            <RecurringPricingImpl config={billingConfig} />
        </div>
    );
}

The PricingPlans component allows you to display your subscription plans in a beautiful and responsive layout, automatically synced with your billing provider's configuration.

Usage

Copy to Clipboardimport { RecurringPricingImpl } from '@kit/billing/ui/pricing-plans';
import { billingConfig } from '~/config/billing.config';
 
export default async function PricingPage() {
    return (
        <div className="container py-8">
            <RecurringPricingImpl config={billingConfig} />
        </div>
    );
}

Features:

• Automatically fetches plans from your billing provider
• Responsive pricing table layout
• Highlights recommended plans
• Shows plan features and limits
• Handles currency formatting
• Supports monthly/yearly toggle
• Direct checkout integration

Customization

The pricing plans component uses your billing configuration to determine:

• Currency display
• Price formatting
• Available plans
• Feature lists
• Checkout flow

You can customize these in your billing configuration file:

Copy to Clipboardexport const billingConfig = parseBillingConfig({
    provider: 'stripe', // or 'lemon-squeezy'
    checkoutUI: 'embedded',
    attachedTable: 'user',
    products: [
        // ...
    ],
});

Server/Client Components

The component is split into server and client parts for optimal performance:

• PricingPlans: Server component that fetches pricing data
• RecurringPricingImplClient: Client component that handles interactivity

This architecture ensures fast page loads while maintaining a smooth user experience.