Guides
Get Started

React Native SDK

📱 Installation guide for our React Native SDK

Suggest Edits

Install

Install the official MoonPay package.

npm install --save @moonpay/react-native-moonpay-sdk

Install dependencies

Assuming you already installed react and react-native you need to install and configure react-native-webview.

npm install --save react-native-webview

We also highly recommend to install the following polyfill to prevent any issues with URL formatting

npm install --save react-native-url-polyfill

In-App Browser Implementation

You no longer need to install expo-web-browser or react-native-inappbrowser-reborn as optional dependencies. Instead, partners are now required to provide their own in-app browser implementation when using the MoonPay SDK. You can either use expo-web-browser, react-native-inappbrowser-reborn, or any standalone in-app browser of your choice. Alternatively, you can create a wrapper to manage the in-app browser you prefer to use.

Initialize

Initialize the SDK in your application with the flow, environment and any parameters related to Buy, Sell or Swap. Additionally you can choose to render the widget either as an in-app browser or a webview. If you're using the walletAddress or walletAddresses query param, you need to sign your widget URL before you can display the widget. Learn more about URL signing.

💡

How to choose?

An In-app browser will allow you to use native features like Google Pay, social sign-in and popups.

A Webview will allow you to use a communication layer between the widget and your app and therefore get your app to perform certain actions once some events occur in the widget. Additionally it will give you infinite choices on how it might look like. You can add it to a bottom sheet, drawer, or as full-screen. It's entirely up to you.

See below In-App browser examples. For additional examples you can look on our Github page here.

import { View, Button, Text, useEffect } from 'react-native';
import { useMoonPaySdk } from '@moonpay/react-native-moonpay-sdk';

const YourComponent = () => {
  const { openWithInAppBrowser, generateUrlForSigning, updateSignature } = useMoonPaySdk({
    sdkConfig: {
      flow: 'buy',
      environment: 'sandbox',
      params: {
        apiKey: 'pk_test_key',
      },
    },
    browserOpener: {
      open: (url) => {
        // Use any in-app browser or standalone browser here
        // Example with custom browser implementation
      },
    },
  });

  useEffect(() => {
    // The URL for signature should be sent to your backend, which should then
    // sign it with your API secret and return the signature.
    // Once you have the signature, you can update the SDK with it and show the widget.
    fetch('/sign-url', {
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer <token>',
      },
      method: 'POST',
      body: JSON.stringify({
        url: generateUrlForSigning(),
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        const signature = data.signature;
        updateSignature(signature);
      });
  }, []);

  return (
    <View>
      <Button onPress={() => openWithInAppBrowser()}>
        <Text>Open in InApp browser</Text>
      </Button>
    </View>
  );
};

import { View, Button, Text, useEffect } from 'react-native';
import { useMoonPaySdk } from '@moonpay/react-native-moonpay-sdk';

const InAppBrowserWrapper = {
  open: async (url) => {
    // Use any in-app browser method here
    InAppBrowser.open(url);
  },
};

const YourComponent = () => {
  const { openWithInAppBrowser, generateUrlForSigning, updateSignature } = useMoonPaySdk({
    sdkConfig: {
      flow: 'buy',
      environment: 'sandbox',
      params: {
        apiKey: 'pk_test_123',
      },
    },
    InAppBrowser: InAppBrowserWrapper,
  });

  useEffect(() => {
    // The URL for signature should be sent to your backend, which should then
    // sign it with your API secret and return the signature.
    // Once you have the signature, you can update the SDK with it and show the widget.
    fetch('/sign-url', {
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer <token>',
      },
      method: 'POST',
      body: JSON.stringify({
        url: generateUrlForSigning(),
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        const signature = data.signature;
        updateSignature(signature);
      });
  }, []);

  return (
    <View>
      <Button onPress={() => openWithInAppBrowser()}>
        <Text>Open in InApp browser</Text>
      </Button>
    </View>
  );
};


import { View, Button, Text } from 'react-native';
import { useMoonPaySdk } from '@moonpay/react-native-moonpay-sdk';

const YourComponent = () => {
  const { MoonPayWebView } = useMoonPaySdk({
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_key'
    }
  });
  
  useEffect(() => {
    // This is just an example of how it might look like.
    // You may handle this differently.
    fetch('/sign-url', {
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer <token>'
      },
      method: 'POST',
      body: JSON.stringify({
        url: sdk.generateUrlForSigning()
      })
    })
      .then(res => res.json())
      .then(data => {
        const signature = data.signature;
        sdk.updateSignature(data);
      });
  }, [])
  
  return (
    <View>
      <MoonPayWebView />
    </View>
  );
};

📘

Configuration

Possible values for flow: buy, sell, swap, swapsCustomerSetup, nft

Possible values for environment: sandbox, production

Updated 8 months ago