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

# <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()`](/platform/sdk-reference/react-native/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](/platform/guides/connect-a-customer) guide.

```tsx ConnectScreen.tsx theme={null}
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`](#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`](/platform/sdk-reference/react-native/get-connection#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`.