Billing Page

About this block

Billing Page is a full billing area assembled from four sibling blocks: the settings shell provides the tab navigation consistent with the rest of settings, the current plan and usage meters panel shows the account holder where they stand against their limits, the invoice history table lists every past invoice with download links, and the payment method panel shows the card on file and lets it be updated.

Each section is its own block and owns its spacing. Insert an upgrade comparison card between the plan panel and the invoice table to prompt a tier move, add a seat management panel for per-seat billing models, or swap the invoice table for a usage breakdown bill for metered pricing detail.

When to use

Reach for this page on the billing tab of workspace settings, wired to your subscription, usage, invoice, and payment method endpoints. Show or hide the upgrade prompt based on the current plan tier.

A natural flow around it on an Application Pro page:

Before

• Nothing, billing is reached from the settings shell

After

• Settings pages
• Notifications

What you can display

One strong use is the self-serve billing area for a SaaS workspace. Other billing page configurations:

• Metered pricing. Swap the invoice table for a usage breakdown bill that shows per-unit costs.
• Per-seat model. Append a seat management panel after the payment method panel.
• Enterprise billing. Remove self-serve upgrade prompts and surface a contact sales CTA instead.

Tip: surfacing live usage meters on the same page as the invoice history stops the why did I get charged support ticket before it is sent.