Skip to main content

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.

<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 such as client.connect() or client.setupWidget(), the provider mounts a react-native-webview as a sibling of its children. Visible frames render with flex: 1; hidden utility frames (such as the one used by client.getConnection()) render with zero dimensions.
Layout
<MoonPayProvider sessionToken="c3N0XzAwMQ==">
  <YourAppShell />
  {/* MoonPay frames are rendered here automatically when methods are called */}
</MoonPayProvider>
To ensure the provider has space to render visible frames, mount it inside a parent that uses flex layout. Place <MoonPayProvider> near the top of your app, but below your navigation container so frames participate in the active screen’s layout.

​
Client methods

The hook exposes a client object with every integration method: