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

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

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm i @moonpay/platform-sdk-react-native react-native-webview
  ```

  ```bash bun theme={null}
  bun add @moonpay/platform-sdk-react-native react-native-webview
  ```

  ```bash npm theme={null}
  npm i @moonpay/platform-sdk-react-native react-native-webview
  ```
</CodeGroup>

Follow the [`react-native-webview` install guide](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md) 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.

```tsx App.tsx theme={null}
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:

```ts theme={null}
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:

<Card title="Mount the provider" icon="brackets-curly" horizontal href="/platform/sdk-reference/react-native/provider" arrow />

<Card title="Access the client with useMoonPay()" icon="link-simple" horizontal href="/platform/sdk-reference/react-native/use-moonpay" arrow />

<Card title="Check the customer's connection" icon="eyes" horizontal href="/platform/sdk-reference/react-native/get-connection" arrow />

<Card title="Connect a customer" icon="link" horizontal href="/platform/sdk-reference/react-native/connect" arrow />

<Card title="Reset the customer's connection" icon="rotate-left" horizontal href="/platform/sdk-reference/react-native/reset-connection" arrow />

<Card title="List payment methods" icon="credit-card" horizontal href="/platform/sdk-reference/react-native/get-payment-methods" arrow />

<Card title="Get a quote" icon="receipt" horizontal href="/platform/sdk-reference/react-native/get-quote" arrow />

<Card title="Auth (email/OTP)" icon="envelope" horizontal href="/platform/sdk-reference/react-native/setup-auth" arrow />

<Card title="Set up Apple Pay" icon="apple" horizontal href="/platform/sdk-reference/react-native/setup-apple-pay" arrow />

<Card title="Set up Google Pay" icon="google" horizontal href="/platform/sdk-reference/react-native/setup-google-pay" arrow />

<Card title="Set up the widget" icon="window" horizontal href="/platform/sdk-reference/react-native/setup-widget" arrow />

<Card title="Set up the buy frame" icon="cart-shopping" horizontal href="/platform/sdk-reference/react-native/setup-buy" arrow />

<Card title="Set up the buy button" icon="hand-pointer" horizontal href="/platform/sdk-reference/react-native/setup-buy-button" arrow />

<Card title="Add a card" icon="credit-card" horizontal href="/platform/sdk-reference/react-native/setup-add-card" arrow />

<Card title="Set up the Challenge frame" icon="shield-check" horizontal href="/platform/sdk-reference/react-native/setup-challenge" arrow />

<Card title="Get a transaction" icon="magnifying-glass" horizontal href="/platform/sdk-reference/react-native/get-transaction" arrow />

<Card title="List transactions" icon="list" horizontal href="/platform/sdk-reference/react-native/list-transactions" arrow />

<Card title="Delete a payment method" icon="trash" horizontal href="/platform/sdk-reference/react-native/delete-payment-method" arrow />

## 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>`](/platform/sdk-reference/react-native/components/moonpay-apple-pay-button)   |
| `client.setupGooglePay()` | [`<MoonPayGooglePayButton>`](/platform/sdk-reference/react-native/components/moonpay-google-pay-button) |
| `client.setupBuyButton()` | [`<MoonPayBuyButton>`](/platform/sdk-reference/react-native/components/moonpay-buy-button)              |

<Card title="Inline components overview" icon="table-layout" horizontal href="/platform/sdk-reference/react-native/components/overview" arrow />

<Card title="Auth (email/OTP) — inline" icon="envelope-open" horizontal href="/platform/sdk-reference/react-native/components/moonpay-auth" arrow />