Skip to main content
<MoonPayProvider> initializes the SDK with a sessionToken and renders MoonPay frames as react-native-webview instances when you call SDK methods. Wrap the part of your app that needs access to the client.
App.tsx
import { MoonPayProvider } from "@moonpay/platform-sdk-react-native";

export default function App() {
  return (
    <MoonPayProvider sessionToken="c3N0XzAwMQ==">
      <YourApp />
    </MoonPayProvider>
  );
}
Read the client from descendant components with useMoonPay().

​
Props

PropertyTypeRequiredDescription
sessionTokenstring✅The sessionToken created on your server.
childrenReactNode✅Your app tree. Components below the provider can call useMoonPay().
apiBaseUrlstringOverride the MoonPay Platform API base URL. Defaults to production. Use this only when MoonPay support has asked you to point at a non-production environment.
frameBaseUrlstringOverride the MoonPay frame base URL. Defaults to production. Use this only when MoonPay support has asked you to point at a non-production environment.

​
Frame rendering

When you call a method that opens a visible frame — such as client.connect(), client.setupWidget(), or client.setupAddCard() — the provider presents it in a full-screen native Modal with a slide animation. Multiple frames stack naturally: for example, a challenge frame appears on top of an active widget. On Android, the hardware back button dismisses the top frame and disposes it. Hidden utility frames (used by client.getConnection(), client.setupBuy(), and client.resetConnection()) render as zero-size siblings with no visible impact on your layout.
Layout
<MoonPayProvider sessionToken="c3N0XzAwMQ==">
  <YourAppShell />
  {/* Hidden utility frames are mounted here as zero-size siblings.
      Visible frames appear in full-screen modals above your content. */}
</MoonPayProvider>

​
Client methods

The hook exposes a client object with every integration method: