# Checkout

Finish checkout on one calm page with address, delivery date, card and receipt in numbered sections. Placing the order brings your items back into view and the button becomes the confirmation.

> Screen template — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/ecommerce-checkout
```

## Import

```tsx
import { CheckoutScreen } from "@/screens/ecommerce/checkout";
```

## Registry dependencies

- `animated-number` — /components/animated-number
- `button` — /components/button
- `icon` — /components/icon
- `lightbox` — /components/lightbox
- `text` — /components/text

## Native packages

- react-native-reanimated@*
- react-native-svg@*
- react-native-safe-area-context@*

## Icons rendered

- `chevron-left` — /icons.html?i=chevron-left
- `lock` — /icons.html?i=lock
- `zap` — /icons.html?i=zap
- `alert-triangle` — /icons.html?i=alert-triangle

Source: https://lumioui.com/screens/ecommerce-checkout