# AI Credit Checkout block

> Multi-step AI token credit checkout with stepper and auto top-up controls

Three-step wizard to buy prepaid AI token credits: pick a provider, choose a bundle with auto top-up and usage alerts, then pay. ReUI Stepper, Frame, Alert, Badge; shadcn RadioGroup, Field, Input, Switch. Credit top-up, token billing, AI marketplace.

- Type: Pro block
- Category: [Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-3
- MCP: `get_block("checkout-3")`
- Built with: Alert, Badge, Button, Checkbox, Field, Frame, Input, Item, Radio Group, Spinner, Stepper, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Prepaid AI tokens from 4 providers in packs priced per 1M, with auto top-up and usage alert switches and card, wallet or invoice payment

## Agent notes

- `AI_PROVIDERS`, `TOKEN_BUNDLES` and `DEFAULT_TOKEN_CHECKOUT_VALUES` are demo data; replace them with your providers, pack prices and token amounts
- `handleSubmit` fakes the purchase with `window.setTimeout` and a Token credits issued toast; call your billing API there to add the tokens
- `autoTopUp` and `usageAlert` are only stored in `values`, with the 15% and 80% thresholds written into the copy, so save them and run the rules in your backend

## When not to use

- Setting up a billing profile with a spend limit and billing alerts, with no tokens to buy: use [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md) (`get_block("wizard-1")`)
- Sending an invoice to a customer, with line items and live tax and discount totals: use [Send Invoice](https://web.dev.reui.io/blocks/application/wizard/wizard-3.md) (`get_block("wizard-3")`)

## 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/checkout-3
```

## About Checkout blocks

### When to use

- A storefront checkout that takes a shopper from contact and shipping to payment beside the order total
- A one page pay screen, with typed shipping and card fields or a saved card confirmed by its CVV
- A prepaid AI token or usage credit purchase for a workspace, with billing details and no shipping

### When not to use

- A business task in numbered steps, such as vendor intake or an invoice, with no cart: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)
- Step markers and panel switching alone, wrapped around a form you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- First run account or workspace setup right after signup, with nothing to pay for: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)

### Agent notes

- No block calls a payment API: the final button fakes success with `window.setTimeout` or has no handler, so submit the order from there
- Card number and CVC are plain inputs with `cc-number` and `cc-csc` autofill; swap in your processor's hosted fields so raw card data stays off your app
- Each page.tsx wraps the block in a `min-h-svh` element and the root component sets its own max width; remove both inside your own layout

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