Skip to main content

​
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>
  );
};

​
Configuration

  • Possible values for flow: buy, sell, swap, swapsCustomerSetup
  • Possible values for environment: sandbox, production