# Checkout — Steps

Check out in three steps (address, payment, review) while your items stay on stage and pack tighter with each step. Paying ends on a success seal with your order number.

> Screen template — React Native, Expo Go compatible.

## Install

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

## Import

```tsx
import { CheckoutStepsScreen } from "@/screens/ecommerce/checkout-steps";
```

## Registry dependencies

- `action-swap` — /components/action-swap
- `button` — /components/button
- `countdown` — /components/countdown
- `icon` — /components/icon
- `location-card` — /components/location-card
- `payment-card` — /components/payment-card
- `separator` — /components/separator
- `success-seal` — /components/success-seal
- `text` — /components/text

## Native packages

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

## Icons rendered

- `home` — /icons.html?i=home
- `briefcase` — /icons.html?i=briefcase
- `shopping-cart` — /icons.html?i=shopping-cart
- `package` — /icons.html?i=package
- `credit-card` — /icons.html?i=credit-card
- `clock` — /icons.html?i=clock
- `check` — /icons.html?i=check
- `shield` — /icons.html?i=shield

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