You can quickly integrate Sardine Crypto On-ramp fiat via a mobile interface. For Mobile URL Webview implemenations, the checkout widget is generated via URL.
***Goal
By the end, you should be able to embed Sardine On-ramp into your mobile app through a WebView
Our Risk SDK is a mandatory requirement to help us fight fraud via device intelligence and behavior biometrics. Sardine’s proprietary technology is adept at this very task and is instrumental in identifying risky devices, behavior, and tools that are used during these sessions (example: VPNs, emulators, remote desktop protocols etc.)
By default, if no parameters are passed, users will be redirected to our standard checkout widget.
client_token is the only required parameter. Additional parameters that are passed will autofill the widget for the user and allow them to skip some screens.
Once the URL has been generated, it can be embedded into your web app as a hyperlink. Below, we have included samples of different ways of integrating the checkout
To assist with development, we have created some code samples which illustrate how your code can be structured to create the checkout url and handle the finished trade.
allowsInlineMediaPlayback should be enabled either via code or through storyboard
Start by importing Webview
Craft the URL based on preferred parameters
Create event handlers that will catch the processed,expired and declined events
Call the WebView component with parameters set as such. These have been set for the optimal user expereince.
Full code should look as such
import{WebView}from ‘react-native-webview’;const uri ="https://crypto.sandbox.sardine.ai/?address=0xjadadhadskaj2123&fiat_amount=1000&&asset_type=usdc&network=ethereum&client_token=123-asd-456";// URL prepared from above stepconst javaScriptFunction = `document.addEventListener('processed',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);});document.addEventListener('expired',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);});document.addEventListener('declined',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);}); `if(uri){let cryptoURL = uri;if(Platform.OS=="android"){ cryptoURL =`${uri}&android_package_name=com.your-app-pakage-name`}elseif(Platform.OS=="ios"){ cryptoURL =`${uri}&plaid_redirect_url=https://your-domain-here.com`}return(<View style={baseStyles.flexGrow}><WebView ref={(webView)=>this.webView= webView} source={{uri: cryptoURL }} mediaPlaybackRequiresUserAction={false} allowInlineMediaPlayback allowsBackForwardNavigationGestures javaScriptEnabled={true} injectedJavaScript={javaScriptFunction} originWhitelist={[‘*’]} onMessage={event=>{const orderData =JSON.parse(event.nativeEvent.data);if(orderData){setTimeout(()=>{// handle code for order successthis.handleOrderSuccess(orderData)},2000);}}}/></View>);}
Start by importing Webview
Craft the URL based on preferred parameters
Create event handlers that will catch the processed,expired and declined events
Call the WebView component with parameters set as such. These have been set for the optimal user expereince.
Full code should look as such
import{WebView}from ‘react-native-webview’;const uri ="https://crypto.sandbox.sardine.ai/?address=0xjadadhadskaj2123&fiat_amount=1000&&asset_type=usdc&network=ethereum&client_token=123-asd-456";// URL prepared from above stepconst javaScriptFunction = `document.addEventListener('processed',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);});document.addEventListener('expired',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);});document.addEventListener('declined',function(data){const d = data.detail;const v = d ?JSON.stringify(d):"";window.ReactNativeWebView&&window.ReactNativeWebView.postMessage(v);}); `if(uri){let cryptoURL = uri;if(Platform.OS=="android"){ cryptoURL =`${uri}&android_package_name=com.your-app-pakage-name`}elseif(Platform.OS=="ios"){ cryptoURL =`${uri}&plaid_redirect_url=https://your-domain-here.com`}return(<View style={baseStyles.flexGrow}><WebView ref={(webView)=>this.webView= webView} source={{uri: cryptoURL }} mediaPlaybackRequiresUserAction={false} allowInlineMediaPlayback allowsBackForwardNavigationGestures javaScriptEnabled={true} injectedJavaScript={javaScriptFunction} originWhitelist={[‘*’]} onMessage={event=>{const orderData =JSON.parse(event.nativeEvent.data);if(orderData){setTimeout(()=>{// handle code for order successthis.handleOrderSuccess(orderData)},2000);}}}/></View>);}
Sardine can fire off events that can be caught by event handlers that can be leveraged to update the user on the order status outside of the Sardine widget
There are two ways to get Order status, either via polling an orders endpoint or providing a redirect URL that we will send the events to
Developers can poll to the /orders endpoint to check its status with the order_id
There may be a delay between when an order was successful and the crypto is delivered to the user’s wallet. This delay is due to the time required for transactions to settle on the chain.
Once you have completed end-to-end testing in sandbox, you can go live by swapping to a set of production keys and updating your URLs. Please see the linked guide for a step-by-step of going live in production.