Skip to main content
<MoonPayConnectionCheck> is a headless component (renders nothing visible) that checks the customer’s connection status. It is the declarative alternative to client.getConnection(). When the connection is active, 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. Mount this component once early in your flow — for example, when your app loads or when a payment screen becomes visible. Unmount it after you receive the "complete" event.
PaymentFlow.tsx
import React from "react";
import {
  MoonPayConnectionCheck,
  MoonPayConnect,
  type ConnectionCheckEvent,
} from "@moonpay/platform-sdk-react-native";

export function PaymentFlow() {
  const [connectionStatus, setConnectionStatus] = React.useState<string | null>(
    null,
  );

  const handleCheckEvent = (event: ConnectionCheckEvent) => {
    if (event.kind === "complete") {
      setConnectionStatus(event.payload.status);
    }
    if (event.kind === "error") {
      console.error(event.payload.message);
    }
  };

  return (
    <>
      {connectionStatus === null && (
        <MoonPayConnectionCheck onEvent={handleCheckEvent} />
      )}
      {connectionStatus === "connectionRequired" && <MoonPayConnect />}
    </>
  );
}

Props

PropTypeRequiredDescription
skipKycbooleanPass true for headless/Identity API integrations so the check opts out of KYC-based statuses. Mount-time only.
onEvent(event: ConnectionCheckEvent) => voidCallback for connection check events. See ConnectionCheckEvent.
This component renders nothing visible (0×0). It has no style prop.

ConnectionCheckEvent

kindPayloadWhen you receive it
"complete"ConnectionThe check finished. Inspect payload.status to route.
"error"{ message: string }The check encountered an error.
Connection statuses:
StatusMeaning
"active"The customer is connected. Credentials are applied to the client.
"connectionRequired"The customer needs to connect. Render <MoonPayConnect> or <MoonPayAuth>.
"unavailable"The customer’s region is not supported.
"pending"KYC is in progress — may resolve on a subsequent check.
"failed"KYC failed or was rejected.
"termsAcceptanceRequired"The customer must accept updated terms before proceeding.