Pricing

What It Does

@kit/billing/pricing provides composable pricing components and server-side helpers to render plan catalogs.

When To Use

• Building a pricing page in marketing or dashboard apps.

Prerequisites

• Valid billingConfig and provider products.

How To Use

Use server helper + pricing components.

Copy to Clipboardimport { PricingServer } from '@kit/billing/pricing';
import { billingConfig } from '~/config/billing.config';
 
export default async function PricingPage() {
  return <PricingServer config={billingConfig} />;
}

For advanced layouts, use primitives from @kit/billing/pricing (PricingRoot, PricingPlans, etc.).

MCP Context

Copy to Clipboardcapability: billing_pricing_ui
entrypoints:
  - @kit/billing/pricing
  - kit/billing/core/src/react/pricing/*
inputs:
  - billing_config
outputs:
  - pricing_page_ui
constraints:
  - pricing data depends on provider product synchronization
side_effects:
  - may start checkout when user triggers plan CTA

Agent Recipe

1. Fetch products through billing pricing helpers.
2. Render with pricing primitives or default server component.
3. Validate plan CTA paths and checkout flow.

Troubleshooting

• Missing prices usually means products are not retrievable from provider API.
• Wrong currency display usually means config currency mismatch.

Related

• Billing