# Checkout

> Three-step checkout with shipping choice, card entry, promo codes and order summary.

Block · Pro · https://lodeui.com/blocks/checkout

## When to use

- Stores and SaaS purchases where you control the checkout UI.

## When not to use

- If your provider offers hosted checkout, prefer it for card handling.

## Installation

```bash
npx shadcn@latest add @lode/checkout
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Checkout } from "@/components/blocks/checkout";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Checkout />
    </main>
  );
}
```

Built from: Coupon input, Credit card input, Stepper

## API reference

### Checkout

A three-step checkout (details, shipping, payment) with an order summary, promo codes, validation and a confirmation state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields |
| Enter | Continue (on the button) |
| ← / → | Choose shipping |

## Accessibility

- Steps use the stepper with aria-current; errors use role="alert".
- Shipping options are a radio group.

## Motion

- Steps slide in the direction you move; discounts animate into the summary; confirmation pops.

## Responsive behavior

- The summary moves below the form under 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Send card data only to your payment provider; demo code: WELCOME15, test card 4242 4242 4242 4242.

## Related

- [Credit card input](https://lodeui.com/components/credit-card-input) — Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
- [Coupon input](https://lodeui.com/components/coupon-input) — Promo code field that validates, shows a removable ticket and shakes on errors.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.