Skip to main content
A well-designed pricing page is the most important conversion touchpoint in your app. BillingOS gives you a production-ready pricing page with a single component — including checkout built in.

​
Basic pricing page

The PricingTable component fetches your products and renders a complete pricing page. No configuration needed. 
import { PricingTable } from "@billingos/sdk";

export default function PricingPage() {
  return <PricingTable />;
}
This gives you:
  • All your active products displayed as pricing cards
  • Feature comparison across plans
  • Monthly/yearly interval toggle
  • “Current Plan” badge for subscribed users
  • Upgrade/downgrade buttons
  • Built-in checkout modal when a plan is selected
PricingTable component

​
Customization

​
Show specific plans only

Filter which products appear using planIds: 
<PricingTable planIds={["prod_starter", "prod_pro", "prod_enterprise"]} />

​
Set the default billing interval

<PricingTable
  defaultInterval="year"
  showIntervalToggle={true}
/>

​
Add a title and description

<PricingTable
  title="Simple, transparent pricing"
  description="Start free, upgrade when you're ready."
/>

​
Compact mode

For embedding in sidebars or smaller spaces: 
<PricingTable compact={true} />

​
Custom footer text

<PricingTable footerText="All plans include a 14-day free trial" />
Set to null to remove the default footer entirely: 
<PricingTable footerText={null} />

​
Prefill customer info

Skip the email step in checkout by passing customer data: 
<PricingTable
  customer={{
    email: "user@example.com",
    name: "Jane Smith",
  }}
/>

​
Handle plan selection

​
Built-in checkout (default)

When a customer selects a plan, the checkout modal opens automatically. Handle success with onPlanChanged: 
<PricingTable
  onPlanChanged={(subscription) => {
    console.log("Subscribed!", subscription);
    router.push("/dashboard");
  }}
/>

​
Custom selection handler

If you want full control over what happens when a plan is clicked: 
<PricingTable
  onSelectPlan={(priceId) => {
    console.log("Selected price:", priceId);
    // Redirect, open a custom modal, etc.
  }}
/>
When onSelectPlan is set, the built-in checkout modal won’t open. You handle the flow yourself.

​
Props reference

PropTypeDefaultDescription
planIdsstring[]All productsFilter which products to show
showIntervalTogglebooleantrueShow monthly/yearly toggle
defaultInterval"month" | "year""month"Default billing interval
onSelectPlan(priceId: string) => void—Custom handler for plan selection
onPlanChanged(subscription: any) => void—Called after successful checkout
titlestring—Heading above the pricing table
descriptionstring—Subheading below the title
customer{ email?, name? }—Prefill customer info in checkout
footerTextstring | null—Custom footer text (null to remove)
compactbooleanfalseCompact layout for smaller spaces