# Tenant Billing block

> Tenant billing settings with hosted Checkout, fixed test plans, usage meters, card and invoices

Signed in tenant's Stripe billing page: current plan, three fixed recurring test plans via hosted Checkout or the Customer Portal, usage against limits, payment summary and invoices. ReUI Frame, Badge, Alert; shadcn Item, ToggleGroup, Progress.

- Type: Pro block
- Category: [Billing](https://reui.io/blocks/solutions/billing.md)
- Page: https://reui.io/blocks/solutions/billing/solution-billing-10
- MCP: `get_block("solution-billing-10")`
- Built with: Alert, Badge, Button, Empty, Frame, Item, Progress, Skeleton, Spinner, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A tenant's own Stripe billing: hosted Checkout to subscribe, Portal flows to switch plans or cards, usage meters, invoice links

## Agent notes

- Wire `onCheckout` to create a Checkout Session and `onOpenPortal` to a Portal Session, then redirect to the URL Stripe returns
- With no handler wired, `useStripeReturn` replays each Stripe return locally; a wired handler skips it, so refetch when Stripe redirects back
- Replace `ACCOUNT`, `PLANS` and `USAGE` in data.ts; price ids are Stripe test mode placeholders and `REFERENCE_MS` pins today

## When not to use

- An operator working every customer's open and overdue invoices at once: use [Invoice Ledger](https://reui.io/blocks/solutions/billing/solution-billing-1.md) (`get_block("solution-billing-1")`)
- A stepped plan change with a proration preview before confirming: use [Plan Change](https://reui.io/blocks/solutions/billing/solution-billing-8.md) (`get_block("solution-billing-8")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-billing-10
```

## About Billing blocks

### When to use

- A billing back office: the invoice ledger, subscriptions, dunning, metered usage, plans and coupon rules
- One customer's account seen by staff, a plan change with proration, or an invoice built line by line
- A tenant's own billing settings, where plan, card and invoice changes hand off to Stripe hosted pages

### When not to use

- A public page where visitors compare plan tiers and pick one before signing up: use the [Pricing blocks](https://reui.io/blocks/marketing/pricing.md)
- A user's account page where billing is one tab beside personal details and security: use the [Profile blocks](https://reui.io/blocks/application/profile.md)
- A stepped intake flow with no money in it, such as vendor onboarding or team invites: use the [Wizard blocks](https://reui.io/blocks/application/wizard.md)

### Agent notes

- Each block sets a `min-h-svh` wrapper with `bg-background`, padding and a max width in page.tsx or its root component; drop it inside an app shell
- No block calls an API: sends, retries, saves and exports update `useState` or fire a sonner `toast`; post to your billing backend from those handlers

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.