Skip to main content

​
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)
PricingTable component

​
Props

​
planIds
string[]
Filter which products to display. Omit to show all active products.
<PricingTable planIds={["prod_starter", "prod_pro"]} />
​
showIntervalToggle
boolean
default:"true"
Show the monthly/yearly billing interval toggle.
​
defaultInterval
'month' | 'year'
default:"'month'"
Which billing interval to show by default.
​
onSelectPlan
(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.
​
onPlanChanged
(subscription: any) => void
Called after a successful checkout or plan change.
​
title
string
Heading displayed above the pricing table.
​
description
string
Subheading displayed below the title.
​
customer
object
Prefill customer information in checkout.
​
footerText
string | null
Custom footer text below the pricing cards. Set to null to remove the footer entirely.
​
compact
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} />