We also highly recommend to install the following polyfill to prevent any issues with URL formatting
npm install --save react-native-url-polyfill
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, swap, swapsCustomerSetup, nft
Possible values for environment: sandbox, production
