How should a plan downgrade be presented?

Say what is lost and when it takes effect — at period end, not immediately, in most billing models. A downgrade that silently deletes data on click is the worst button in SaaS.

What should a usage meter do at 100%?

Change state before it gets there. Warn at around 80% with the upgrade path in reach; at the limit, say plainly what is now blocked, since a full bar with no sentence is a mystery outage.

Are these billing and usage screens free to use?

All 8 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.

How do I add one to my project?

Install it with the CLI: `npx hoverlab add billing-plan-summary` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.

8 Billing and usage screens — copy-paste

Plan & Next Charge Summary

Current plan, next charge with an actual figure and date, payment method, and a prominent pending-cancellation state.

Billing & Usage151 lines1 dep10 Sept

Cancel your Team plan

You can do this yourself, right here, and it takes one click once you have read what happens.

What happens, and when

You keep Team until 14 October 2026 — the period you have already paid for. Nothing stops today.
You will not be charged again, and there is no cancellation fee.
After that, your data is kept for 30 days and restoring is one click. It is deleted after that.

What breaks on 14 October 2026

API keys stop working, and any integration using them fails
Team members lose access to shared projects
Scheduled exports stop running

Why are you cancelling? — optional, and it does not change anything below

Type cancel to confirm

Subscription Cancel Flow

Self-serve cancellation with no dark patterns: the exact date access ends, what breaks, one honest alternative, and a button that works.

Billing & Usage273 lines1 dep

Invoice history

Every charge on this account. PDFs are available for seven years.

Billing portal

Invoice history
Invoice	Date	Status	Amount
INV-2026-0812Team plan — August	Aug 1, 2026	Paid	$490.00
INV-2026-0745Team plan — July	Jul 1, 2026	Paid	$490.00
INV-2026-0698Additional seats (3)	Jun 14, 2026	Refunded	$147.00
INV-2026-0671Team plan — June	Jun 1, 2026	Failed	$490.00
INV-2026-0602Pro plan — May	May 1, 2026	Paid	$190.00

Invoice History

Past invoices with tabular figures, worded statuses rather than bare coloured dots, and per-invoice download labels.

Billing & Usage174 lines1 dep10 Sept

Payment Methods On File

Cards on file with the two failures that cost the subscription: expiry called out before it fails, and the default stated on the row rather than implied by ordering.

Billing & Usage248 lines1 dep

You are past your included API requests

Everything is still running. You are being billed for the overage, and this is what it looks like so far.

1,402,500 of 1,000,000 requests140%

Over your allowance: 402,500 requests
Overage rate: $0.12 per 10,000
Charged so far: $4.83
At this rate, by day 30: $12.042,003,571 requests

Projected from 66,786 requests a day over 21 days so far. It is a straight line, not a forecast — a quiet week moves it.

Upgrading is usually cheaper than paying overage at this volume. Capping stops the charges and starts returning 429s — some teams genuinely prefer that, and it is a real option rather than a threat.

Overage Notice with Projection

Past the included allowance, with the end-of-month projection and every number the invoice will use — because a surprise bill is a product defect.

Billing & Usage230 lines1 dep2 Sept

Seat Count & Proration

Changing seats with the bill shown first: the part-period charge and the new recurring amount as two numbers, the arithmetic spelled out, and the asymmetry stated where it bites — removing a seat refunds nothing today.

Billing & Usage254 lines1 dep

Invoice INV-2026-0841

paid

Issued 31 August 2026 · Due 14 September 2026

Download PDF

Billed to

Acme Corp14 Bridgewater StreetManchester M1 5ANUnited Kingdom

Invoice number: INV-2026-0841
Tax registration: GB 123 4567 89
Payment method: Visa ending 4242

Description	Qty	Unit	Amount
Studio plan — 40 seats1 Aug – 31 Aug 2026	40	$12.00	$480.00
Unused time on Team plan20 Aug – 31 Aug 2026	24	$12.00	-$103.20
Remaining time on Studio plan20 Aug – 31 Aug 2026	40	$12.00	$172.00
AI credit pack — 2,000 credits	1	$15.00	$15.00
Subtotal			$563.80
VAT (United Kingdom) at 20%			$112.76
Total			$676.56

Invoice Detail

One invoice with the arithmetic shown: proration split into a credit and a charge with their own date ranges, tax as a line with its jurisdiction, and totals in a real tfoot.

Billing & Usage265 lines1 dep2 Sept

Credit balance

2,110credits available

320 credits from monthly allowance expire in 1 days; 150 credits from launch bonus expire in 3 days. They are spent last, so use them before buying more.

1Monthly allowance
320 / 500
Included with Pro+. Resets on the 1st and does not roll over. Expires September 1.
2Credit pack — 2,000
1,640 / 2,000
Purchased 12 August 2026. Never expires.
3Launch bonus
150 / 250
Granted with your first purchase. Expires September 3.

Credits are spent from the top of this list down, so the allowance included with your plan is used before anything you paid for.

Credit Balance and Expiry

Consumable credits split into the buckets they actually live in, rendered in spend order, with a proportional warning that only appears when a meaningful balance is about to expire.

Billing & Usage222 lines1 dep10 Sept

Billing and usage screens

Blocks8

Billing