<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().

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

AddCardScreen.tsx

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.
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.