# Add Payment

Add a new card and watch it fill in as you type, recolouring to match the card network and turning over for the security code. Saving verifies the card and tucks it into your wallet.

> Screen template — React Native, Expo Go compatible.

## Install

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

## Import

```tsx
import { AddPaymentScreen } from "@/screens/ecommerce/add-payment";
```

## Registry dependencies

- `icon` — /components/icon
- `switch` — /components/switch
- `text` — /components/text

## Native packages

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

## Icons rendered

- `chevron-left` — /icons.html?i=chevron-left
- `lock` — /icons.html?i=lock
- `wifi` — /icons.html?i=wifi
- `check-circle` — /icons.html?i=check-circle
- `camera` — /icons.html?i=camera
- `alert-triangle` — /icons.html?i=alert-triangle
- `shield` — /icons.html?i=shield

Source: https://lumioui.com/screens/ecommerce-add-payment