React Native
📱 Installation guide for our React Native SDK
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, sellPossible values for
environment
: sandbox, production
Updated 11 months ago