Search blocks by description or jump to a page.
A profile billing view with current plan, payment method, invoice history, and an upgrade prompt. Use it where members manage subscriptions and receipts.
Billing and Subscription is a focused account management view. A page heading and a "Billing Settings" button open the layout, followed by three cards stacked in order. The first card shows the active plan name, its monthly price and renewal date, a "Change Plan" button, a "Cancel Plan" button, and two labeled progress bars that track API request and monthly sync consumption against their limits. The second card displays the saved payment method alongside an "Update Payment Method" button. The third card is a billing history list where each row carries an invoice ID, a date, a status badge, an amount, and a per-row download button, with a "Download All" shortcut in the header.
All three cards are independent sections. You can rewrite the plan name, price, and renewal copy without touching the progress bars, and you can add or remove invoice rows freely. If your product does not expose usage quotas, the progress bar group can be dropped from the plan card without affecting the payment or history sections.
Reach for this block on a dedicated billing or subscription settings route inside a member account area. It works well for a creative agency or studio that bills clients through its own platform and needs staff to see exactly where their seat quota stands before a renewal. Compared to a minimal plan badge tucked inside a tabbed profile, this layout gives billing its own surface and puts usage data, payment details, and receipt history in one uncluttered place.
A natural flow around it on an Application page:
Before
After
Three self-contained cards cover the full billing lifecycle. Swap content in any one without disturbing the others:
Tip: if your free tier has no usage limits, hide the progress bar group and let the plan card stay compact until the member upgrades.