# Billing and plans

A plan decision that stays clear through payment.

Choosing a plan, paying for it and seeing exactly what was charged.

- Canonical page: https://notchset.dev/kits/billing
- Live pieces: 5 (1 free, 4 Pro)

## Follow the task

1. Pick a plan and a billing period.
2. Pay, and see each line and the total agree.
3. Try a payment that fails and retry it.

## States

A yearly saving shown honestly, a payment that fails and retries, totals that agree line by line.

## Application boundary

Amounts belong to a fictional demonstration. Your billing provider calculates real prices and payment results.

## Install the kit

Set up your project and authorized Pro registry first:
https://notchset.dev/docs/installation

```sh
npx shadcn@latest add @notchset-pro/plan-picker @notchset-pro/express-pay @notchset-pro/line-items @notchset-pro/price-summary @notchset/rolling-number
```

## Start with free pieces

No Pro entitlement is required for these public Base UI URLs.

```sh
npx shadcn@latest add https://notchset.dev/r/rolling-number.json
```

## Live pieces

- [Plan picker](https://notchset.dev/blocks/plan-picker) · Pro
- [Express pay](https://notchset.dev/blocks/express-pay) · Pro
- [Line items](https://notchset.dev/blocks/line-items) · Pro
- [Price summary](https://notchset.dev/blocks/price-summary) · Pro
- [Rolling number](https://notchset.dev/components/rolling-number) · Free

Each item installs as source in your project. This public guide contains descriptions and installation links, not Pro source.