PricingTable

Import

import { PricingTable } from "@billingos/sdk";

Basic usage

<PricingTable />

Fetches all your products and renders a complete pricing page with:

Pricing cards with feature comparison
Monthly/yearly toggle
“Current Plan” badge for subscribed users
Upgrade/downgrade buttons
Built-in checkout modal (opens automatically on plan select)

Props

string[]

Filter which products to display. Omit to show all active products.

<PricingTable planIds={["prod_starter", "prod_pro"]} />

boolean

default:"true"

Show the monthly/yearly billing interval toggle.

'month' | 'year'

default:"'month'"

Which billing interval to show by default.

(priceId: string) => void

Custom handler when a plan is selected. When set, the built-in checkout modal won’t open — you handle the flow yourself.

(subscription: any) => void

Called after a successful checkout or plan change.

string

Heading displayed above the pricing table.

string

Subheading displayed below the title.

object

Prefill customer information in checkout.

Show child attributes

string

Customer email

string

Customer name

string | null

Custom footer text below the pricing cards. Set to null to remove the footer entirely.

boolean

default:"false"

Compact layout for embedding in smaller spaces like sidebars.

Examples

Filtered plans with yearly default

<PricingTable
  planIds={["prod_starter", "prod_pro", "prod_enterprise"]}
  defaultInterval="year"
  title="Simple, transparent pricing"
  description="Start free, upgrade when you're ready."
/>

Custom plan selection

<PricingTable
  onSelectPlan={(priceId) => {
    router.push(`/checkout?price=${priceId}`);
  }}
/>

With customer prefill

<PricingTable
  customer={{ email: user.email, name: user.name }}
  onPlanChanged={(sub) => {
    toast.success("Subscribed!");
    router.push("/dashboard");
  }}
/>

Compact mode

<PricingTable compact={true} footerText={null} />

Getting Started

Components

Hooks

Advanced

Import

Basic usage

Props

Examples

Filtered plans with yearly default

Custom plan selection

With customer prefill

Compact mode

​Import

​Basic usage

​Props

​Examples

​Filtered plans with yearly default

​Custom plan selection

​With customer prefill

​Compact mode

Import

Basic usage

Props

Examples

Filtered plans with yearly default

Custom plan selection

With customer prefill

Compact mode