> ## Documentation Index
> Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <MoonPayAddCard />

> Inline card entry frame. Embed card capture in your own layout.

`<MoonPayAddCard>` renders the Add Card frame inline in your layout. It is
the declarative alternative to
[`client.setupAddCard()`](/platform/sdk-reference/react-native/setup-add-card).

Use this component when you want the card capture form embedded in a custom
screen rather than presented as a full-screen modal.

```tsx AddCardScreen.tsx theme={null}
import {
  MoonPayAddCard,
  type AddCardEvent,
} from "@moonpay/platform-sdk-react-native";
import { StyleSheet, View } from "react-native";

export function AddCardScreen() {
  const handleEvent = (event: AddCardEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "complete":
        // event.payload.card contains the saved card details.
        console.log(event.payload.card.last4, event.payload.card.brand);
        break;
      case "error":
        console.error(event.payload.code, event.payload.message);
        break;
    }
  };

  return (
    <View style={styles.container}>
      <MoonPayAddCard onEvent={handleEvent} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});
```

***

## Props

| Prop      | Type                            | Required | Default   | Description                                                                  |
| --------- | ------------------------------- | -------- | --------- | ---------------------------------------------------------------------------- |
| `onEvent` | `(event: AddCardEvent) => void` |          | —         | Callback for add-card lifecycle events. See [`AddCardEvent`](#addcardevent). |
| `style`   | `ViewStyle`                     |          | `flex: 1` | Container style.                                                             |

### `AddCardEvent`

Use `event.kind` to handle each event.

| kind         | Payload                             | When you receive it                                     |
| ------------ | ----------------------------------- | ------------------------------------------------------- |
| `"ready"`    | —                                   | The card entry UI is rendered and ready.                |
| `"complete"` | `{ card: CardResponse }`            | The card was saved. Inspect `CardResponse` for details. |
| `"error"`    | `{ code: string; message: string }` | The flow encountered an error.                          |

**`"error"` codes:** `"configurationError"` | `"generic"`

### `CardResponse`

| Field             | Type               | Description                       |
| ----------------- | ------------------ | --------------------------------- |
| `id`              | `string`           | The saved card identifier.        |
| `type`            | `string`           | Payment method type.              |
| `cardType`        | `string`           | Card scheme type.                 |
| `brand`           | `string`           | Card network (for example, Visa). |
| `last4`           | `string`           | Last four digits of the card.     |
| `expirationMonth` | `string`           | Two-digit expiry month.           |
| `expirationYear`  | `string`           | Four-digit expiry year.           |
| `availability`    | `{ active: true }` | Card availability status.         |