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

​
0. Integrate the Risk SDK

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.)

Benefits of adding Risk SDK

  • Higher limts for good users

  • Better fraud identification

  • Less friction for good users

Select the Mobile SDK as per your need:

Android
iOS
ReactNative
Flutter

If you are unable to view the documents in the links above, please reach out to your Sardine representative to get access.

​
1. Obtain authorization token

Before we start, you’ll need the following credentials

json_schema
$ref: "../../../models/Authorization-Parameters.yaml"

You will need to obtain a clientToken, which is a unique identifier for each session and user.

Make a POST request to /client-tokens using Basic Auth by passing base64 encoding of <clientId>:<clientSecret>

http
{
  "method": "POST",
  "url": "https://api.sandbox.sardine.ai/v1/auth/client-tokens",
  "headers" : {
    "Authorization" : "Basic MTY3NDRkZGMtYThhMy00OGIyLWE4ZTktNjA2YWU4OTk1NTM5OmYyMGJhNGRiLTczYzItNDk0Mi04NDAyLWRhNzc4OTllNzY2Mg==",
  }
}

If the request is successful, you should receive a response that contains the clientToken and expiresAt field

client_token = response["clientToken"]
expires_at = response["expiresAt"]
orderId = response["orderId"]

​
2. Determine your widget configuration and create URL.

Sardine’s widget can be configured based on any parameters that are passed through. Please use the configuration reference guide.

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.

​
3. Implement the web checkout widget

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

  1. Start by importing Webview

  2. Craft the URL based on preferred parameters

  3. Create event handlers that will catch the processed,expired and declined events

  4. 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 step
        const 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`
            } else if(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 success
                                    this.handleOrderSuccess(orderData)
                                }, 2000);
                            }
                        }}
                    />
                </View>
            );
        }

​
4. Confirmation of Order Status

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

http
{
  "method": "GET",
  "url": "https://api.sandbox.sardine.ai/v1/orders/17983781730123",
  "query" : {
    "clientToken" : "7ce511d0-c973-4744-b819-d933a248ae51"
  },
  "headers" : {
    "Authorization" : "Basic Y2xpZW50SWQ6Y2xpZW50U2VjcmV0",
  }
}

​
5. Testing and Verification

Once the defined URL has been set and triggered, it should open a window that goes through the user flows for Sardine’s on ramp.

A developer can use the sample information provided in the Testing Payment Flows page to test the integration.

​
6. Going Live in Production

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.

Going to Production

You should now be able use an integrated Sardine Checkout Widget!