@moonpay/react-native-moonpay-sdk

@moonpay/react-native-moonpay-sdk

The MoonPay React Native SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.

Documentation

For detailed integration instructions and further documentation, please visit our Documentation Site.

Installation

To install the package, use npm or yarn:

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

or

yarn add @moonpay/react-native-moonpay-sdk

Prerequisites

Before using this package, make sure you have the following:

• An active MoonPay account.
• Your MoonPay API key.

Usage

• Import the useMoonPaySdk hook in you React Native component

import { useMoonPaySdk } from '@moonpay/react-native-moonpay-sdk';

• Invoke the hook with the passed configuration object

If you want to display the widget in a WebView:

const { MoonPayWebViewComponent } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
});

return (
  <View>
    <MoonPayWebViewComponent />
  </View>
);

If you want to display the widget in an In-App browser:

• Using react-native-inappbrowser-reborn

import { InAppBrowser } from 'react-native-inappbrowser-reborn';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url);
      }
    },
  },
});

return (
  <View>
    <Button onPress={openWithInAppBrowser} />
  </View>
);

• Using expo-web-browser

import * as WebBrowser from 'expo-web-browser';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      await WebBrowser.openBrowserAsync(url);
    },
  },
});

• Using Linking

import { Linking } from 'react-native';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      await Linking.openURL(url);
    },
  },
});

return (
  <View>
    <Button onPress={openWithInAppBrowser} />
  </View>
);