# Checkout

Express pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/checkout
```

## Usage

```tsx
import { Checkout } from '@/components/fetaui/checkout'

export function Example(props) {
  return <Checkout plans={props.plans} addOns={props.addOns} onPay={charge} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| plans | CheckoutPlan[] | required |
| addOns | CheckoutAddOn[] | required |
| countries | string[] | three samples |
| defaultPlan | string | first plan |
| defaultAddOns | string[] | [] |
| defaultSeats | number | 8 |
| yearlyDiscount | 0 to 1 | 0.2 |
| tax | 0 to 1 | 0.19 |
| taxLabel | string | VAT 19% |
| onPay | (total) => Promise<void> | void |  |
| processing | boolean | false |
| animated | boolean | true |

## When to use

- For a self serve purchase on one page.

## When not to use

- For buying credits: use Credit Top-up.

## Accessibility

- A real form with fieldsets, legends and autocomplete on card fields. Use test card fills demo values.
- Plan options are native radios.
- The form sets aria-busy while paying.
- This component only shows fields. Send card data to your payment provider, never your own server.

## Motion

- The total tweens over 240 ms as options change.
- Pay holds its width and shows Processing payment.
- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.