Billing settingsPro

The plan with dialogs to change or cancel it, usage that warns near its limits, the card on file and invoices.

When to use

The plan with dialogs to change or cancel it, usage near its limits, the card on file and invoices.
The billing page of any subscription product.

When not to use

One-time purchases without a subscription: an order history fits better.
Picking a plan for the first time: Pricing tiers.

Usage

Billing settings with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { BillingSettings } from "@/components/dashral/blocks/billing-settings"
2
3<BillingSettings
4  plans={plans}
5  plan={subscription.plan}
6  billing={subscription.interval}
7  used={usage}
8  card={paymentMethod}
9  invoices={invoices}
10  onChangePlan={(plan, billing) => api.billing.changePlan(plan, billing)}
11  onCancel={(reason) => api.billing.cancel(reason)}
12  onUpdatePayment={() => openPortal()}
13/>

API reference

BillingSettings

A billing page: the plan with its renewal, a dialog to change it (monthly or yearly, with the saving) and one to cancel it (with a reason, and a way back); usage against the plan's limits, warning near the top; the card on file; and past invoices to download. Every part comes from props, and every action calls your handler first: one that throws changes nothing and says why at the top.

Prop	Type	Default
`plans`	`BillingPlan[]`	`sample`
`plan`	`string` The plan you're on, by id, and how it's billed.	`"growth"`
`billing`	`Billing`	`"monthly"`
`canceled`	`boolean` Whether it's set to cancel at the renewal.	`false`
`renews`	`string` When it renews (or ends, once canceled).	`"Nov 1, 2026"`
`used`	`{ seats: number; events: number; storage: number }` What's used of the plan's limits.	`sample`
`usageNote`	`string`	`sample`
`card`	`{ brand: string; last4: string; expires: string } \| null` The card on file; null shows none.	`sample`
`billingEmail`	`string`	`"finance@acme.com"`
`taxId`	`string`	`"ID 01.234.567.8-901"`
`invoices`	`BillingInvoice[]`	`sample`
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`
`onChangePlan`	`(plan: string, billing: Billing) => Promise<void> \| void`	—
`onCancel`	`(reason: string) => Promise<void> \| void` Cancels at the renewal, with the reason given (if any).	—
`onResume`	`() => Promise<void> \| void` "Keep my plan" after canceling.	—
`onUpdatePayment`	`() => void`	—
`onDownload`	`(invoice: BillingInvoice) => void` An invoice without an href: download it yourself.	—

type Billing

= "monthly" | "yearly"

type BillingPlan

A plan: its price a month (a year is ten months), its limits and its icon.

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`monthly`	`number`	—
`seats`	`number`	—
`events`	`number`	—
`storage`	`number`	—
`icon`	`React.ReactNode`	—

type BillingInvoice

Prop	Type	Default
`id`	`string`	—
`date`	`string`	—
`amount`	`number`	—
`status`	`"paid" \| "refunded" \| "open"`	—
`href`	`string`	—