<MoonPayConnect />

Inline connect flow. Render it wherever it should appear in your layout.

<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

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

ConnectEvent

Use event.kind to handle each event.

kind	Payload	When you receive it
"ready"	—	The connect UI is rendered and ready.
"complete"	Connection	The customer completed the flow. Same shape as client.getConnection() returns.
"error"	ConnectEventError	The flow encountered an error.

ConnectEventError is discriminated by code:

code	Extra fields	Description
"validationError"	errors: ConfigValidationFieldError[]	One or more session/client/public-key fields are invalid.
"generic"	message?: string	A generic connection failure.

ConfigValidationFieldError entries have code: "invalidSessionToken" | "invalidClientToken" | "invalidPublicKey" and a developer-facing message.