Skip to main content
<MoonPayConnect> renders the MoonPay connect flow inline in your layout. It is the declarative alternative to client.connect(). When the customer completes the flow with an active connection, credentials are decrypted and stored on the shared client automatically. Subsequent calls to client.getQuote(), client.setupApplePay(), etc. use those credentials without any extra steps. If you want the full end-to-end flow (create session → check connection → connect), start with the Connect a customer guide.
ConnectScreen.tsx
import {
  MoonPayConnect,
  type ConnectEvent,
} from "@moonpay/platform-sdk-react-native";
import { StyleSheet, View } from "react-native";

export function ConnectScreen() {
  const handleEvent = (event: ConnectEvent) => {
    switch (event.kind) {
      case "ready":
        // The UI is ready. Reveal the surface if you hid it while loading.
        break;
      case "complete":
        // event.payload is the Connection — same shape as client.getConnection() returns.
        if (event.payload.status === "active") {
          console.log(event.payload.customer.id);
        }
        break;
      case "error":
        console.error(event.payload);
        break;
    }
  };

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

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

​
Props

PropTypeRequiredDefaultDescription
theme{ appearance?: "light" | "dark" }—Appearance override for the connect frame. Mount-time only.
onEvent(event: ConnectEvent) => void—Callback for connect lifecycle events. See ConnectEvent.
styleViewStyleflex: 1Container style.

​
ConnectEvent

Use event.kind to handle each event.
kindPayloadWhen you receive it
"ready"—The connect UI is rendered and ready.
"complete"ConnectionThe customer completed the flow. Same shape as client.getConnection() returns.
"error"ConnectEventErrorThe flow encountered an error.
ConnectEventError is discriminated by code:
codeExtra fieldsDescription
"validationError"errors: ConfigValidationFieldError[]One or more session/client/public-key fields are invalid.
"generic"message?: stringA generic connection failure.
ConfigValidationFieldError entries have code: "invalidSessionToken" | "invalidClientToken" | "invalidPublicKey" and a developer-facing message.