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

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

or

`bash 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`

1. Import the useMoonPaySdk hook in you React Native component

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

2. Invoke the hook with the passed configuration object

If you want to display the widget in a WebView:

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

return ( );`

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

1. Using react-native-inappbrowser-reborn

`typescript 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 (

Usage

1. Import the useMoonPaySdk hook in you React Native component

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

2. Invoke the hook with the passed configuration object

If you want to display the widget in a WebView:

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

return (
  
    
  
);

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

typescript
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);
      }
    },
  },
});