React Native

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

If you are using expo then

npm install --save expo-browser expo-constants

otherwise

npm install --save react-native-inappbrowser-reborn

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

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

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.

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

const YourComponent = () => {
  const { openWithInAppBrowser, generateUrlForSigning, updateSignature } = useMoonPaySdk({
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_key'
    }
  });
  
  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(data);
      });
  }, [])
  
  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, swapsCustomerSetup, sell
Possible values for environment: sandbox, production