Billing Page
Billing page composing the settings shell, current plan usage, invoice history, and payment method panel.
Billing page composing the settings shell, current plan usage, invoice history, and payment method panel.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the self-serve billing area for a SaaS workspace. Other billing page configurations:
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.