The MoonPay Mobile SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.
The MoonPay React Native SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.
For detailed integration instructions and further documentation, please visit our Documentation Site.
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
Before using this package, make sure you have the following:
- An active MoonPay account.
- Your MoonPay API key.
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 (
);
`
2. Using expo-web-browser
`typescript
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);
},
},
});
`
3. Using Linking
`typescript
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 (
);
``