Skip to main content
<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

PropTypeRequiredDefaultDescription
onEvent(event: AddCardEvent) => void—Callback for add-card lifecycle events. See AddCardEvent.
styleViewStyleflex: 1Container style.

​
AddCardEvent

Use event.kind to handle each event.
kindPayloadWhen 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

FieldTypeDescription
idstringThe saved card identifier.
typestringPayment method type.
cardTypestringCard scheme type.
brandstringCard network (for example, Visa).
last4stringLast four digits of the card.
expirationMonthstringTwo-digit expiry month.
expirationYearstringFour-digit expiry year.
availability{ active: true }Card availability status.