Billing & invoices

A React block (a whole screen) in Beamline's Blocks category.

The billing page of a subscription: the plan with its seats and renewal, cancel and resume in place, the card on file with a checked update form, metered usage against the plan, the next invoice line by line, and the invoice history with status, PDF download and Pay now on a failed one; a failed payment leads the page with the one action that fixes it.

Use it for

The Billing page of a SaaS account on Stripe, Paddle or your own billing: what you pay, for what, with what, and every invoice.
A trial account that has not added a card yet (the page leads with adding one).

Not for

Choosing between plans (plan-comparison); Change plan hands over to it.
A compact plan and usage section inside a settings area (settings).
Checkout for a first purchase.

Anatomy

notice (only when payment failed, a card expires or a trial ends): what happened and the one action that fixes it
plan panel: plan name and state, price per period, seats used of included, renewal or end date, Change plan, Cancel plan (asks in place) or Resume
payment method panel: card brand, last four, expiry (Expires soon within 60 days), name, Update card; Add a card when there is none
usage panel: one meter per metered allowance, split by source
next invoice panel: lines, credits and the total that rolls when a line changes
invoices: date, number and period (folded into the date in a narrow room), amount, status in words and glyph, Download PDF (busy, then done), Pay now on a failed or open invoice, Show older
card dialog: name on card, number grouped as typed with its brand, expiry, security code, postcode; checked before sending

States

loading
load failed (Try again)
active, trialing (days left), past due, cancelling (ends on a date, Resume), cancelled
no card on file (Add a card is the primary action)
card expires soon
no invoices yet
downloading an invoice; download failed
paying an invoice: busy, paid (status changes in place), declined (says why)
card form: invalid number, past expiry, short code; sending; declined (stays open with the reason); saved (the panel shows the new card)
partial data: usage, next invoice or payment method left out hides that panel; an amount not known yet reads Not billed yet, never $0

Keyboard

Tab through the notice's action, the panels' actions, then each invoice row's Download and Pay now
Cancel plan asks in place: Enter confirms, Esc steps back
Card dialog: Enter submits from any field; errors move focus to the first wrong field

Motion

The total of the next invoice rolls when a line changes. Cancel plan morphs into its question and then its result with Resume. A paid invoice's status badge changes in place and the notice above folds away. A download button turns into a spinner and closes into a check. A new card replaces the old one with a short rise. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`plan` (required)	`BillingPlan`	—	Name, price, period, status, seats, renewal, trial or cancel dates.
`currency / locale`	`string / string`	—	ISO currency (default USD) and number locale for every amount.
`paymentMethod`	`BillingCard \| null`	—	The card on file; null shows Add a card; leave out to hide the panel.
`usage`	`BillingUsage[]`	—	Metered allowances; leave out to hide the panel.
`nextInvoice`	`{ date, lines: { label, amount \| null }[] } \| null`	—	What the next invoice will hold.
`invoices / defaultInvoices / onInvoicesChange`	`BillingInvoice[]`	—	The invoice history, newest first.
`onChangePlan`	`() => void`	—	Shows Change plan; open your plan picker.
`onCancelPlan / onResumePlan`	`() => Promise<void>`	—	Cancel at the end of the period, and take it back.
`onUpdateCard`	`(card: BillingCardInput) => Promise<BillingCard>`	—	Pass the fields to your provider's tokenizer; resolve with what to show. A rejection keeps the dialog open with the reason.
`onDownloadInvoice`	`(id) => Promise<void>`	—	Shows Download on each invoice.
`onPayInvoice`	`(id) => Promise<void>`	—	Shows Pay now on failed and open invoices.
`onLoadOlder / hasOlder`	`() => Promise<BillingInvoice[]> / boolean`	—	Shows Show older invoices.
`loading / error / onRetry`	`boolean / ReactNode / () => void \| Promise<unknown>`	—
`level`	`1 \| 2`	—
`className / classNames / style / ref`	`string / BillingClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

alert
badge
button
confirm-morph
dialog
input
usage-meter
slot-text
table
empty-state
toast
skeleton
spinner
tooltip

Dependencies

lucide-react, motion

Import

import { Billing } from "@/blocks/billing/billing";

Get it

Billing & invoices is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent