Overview

Use the React Native SDK to build fiat-to-crypto ramps with headless payments in your mobile app.

The React Native SDK wraps the MoonPay Developer Platform in a <MoonPayProvider> and a useMoonPay() hook. The SDK ships with TypeScript types for autocomplete and inference.

The SDK is tested against:

• React Native 0.73+
• React >=18
• react-native-webview 13.0+
• iOS 14+ and Android API 26+

Install

Install the SDK package and its peer dependency:

pnpm

pnpm i @moonpay/platform-sdk-react-native react-native-webview

bun add @moonpay/platform-sdk-react-native react-native-webview

npm i @moonpay/platform-sdk-react-native react-native-webview

Follow the react-native-webview install guide to link the native module. On iOS, run pod install from your ios/ directory.

Conventions

Provider + hook

Mount <MoonPayProvider> near the top of your app tree and call useMoonPay() from any descendant component to get the client.

The SDK presents frames in two ways:

• Client methods such as client.connect() or client.setupWidget() open a full-screen modal managed by the provider. Hidden utility frames (connection check, headless buy, reset) render at zero size.
• Inline components such as <MoonPayConnect> or <MoonPayWidget> render the frame wherever you place them in your layout.

App.tsx

import { MoonPayProvider } from "@moonpay/platform-sdk-react-native";

export default function App() {
  return (
    <MoonPayProvider sessionToken="c3N0XzAwMQ==">
      <YourApp />
    </MoonPayProvider>
  );
}

Result<T, E>

Most SDK functions return a Result<T, E> instead of throwing.

Field	Type	Required	Description
ok	boolean	✅	Whether the operation succeeded.
value	T		Present when ok is true.
error	E		Present when ok is false.

Use this pattern to branch on success vs failure:

const result = await client.getConnection();

if (!result.ok) {
  // Handle error
  console.error(result.error);
  return;
}

console.log(result.value);

Function reference

These pages document the provider, hook, and individual SDK functions:

Mount the provider

Access the client with useMoonPay()

Check the customer's connection

Connect a customer

Reset the customer's connection

List payment methods

Get a quote

Auth (email/OTP)

Set up Apple Pay

Set up Google Pay

Set up the widget

Set up the buy frame

Set up the buy button

Add a card

Set up the Challenge frame

Get a transaction

List transactions

Delete a payment method

Inline components

Every frame also has a declarative component you can render directly in your JSX tree. Components are a good fit when you want a frame embedded in a custom screen. The three deprecated methods below have direct component replacements.

Deprecated method	Component replacement
client.setupApplePay()	<MoonPayApplePayButton>
client.setupGooglePay()	<MoonPayGooglePayButton>
client.setupBuyButton()	<MoonPayBuyButton>

Inline components overview

Auth (email/OTP) — inline