Show a pricing page

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

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

Prop	Type	Default	Description
`planIds`	`string[]`	All products	Filter which products to show
`showIntervalToggle`	`boolean`	`true`	Show 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
`title`	`string`	—	Heading above the pricing table
`description`	`string`	—	Subheading below the title
`customer`	`{ email?, name? }`	—	Prefill customer info in checkout
`footerText`	`string \| null`	—	Custom footer text (null to remove)
`compact`	`boolean`	`false`	Compact layout for smaller spaces

Get Started

Accept Payments

Manage Billing

Migrate

Production

Show a pricing page

Basic pricing page

Customization

Show specific plans only

Set the default billing interval

Add a title and description

Compact mode

Custom footer text

Prefill customer info

Handle plan selection

Built-in checkout (default)

Custom selection handler

Props reference

​Basic pricing page

​Customization

​Show specific plans only

​Set the default billing interval

​Add a title and description

​Compact mode

​Custom footer text

​Prefill customer info

​Handle plan selection

​Built-in checkout (default)

​Custom selection handler

​Props reference

Basic pricing page

Customization

Show specific plans only

Set the default billing interval

Add a title and description

Compact mode

Custom footer text

Prefill customer info

Handle plan selection

Built-in checkout (default)

Custom selection handler

Props reference