Web Integration

Sardine’s web checkout widget offers a quick way to integrate our Crypto On/off-Ramp via a URL

This is best suited for quick integrations where the developer does not want to build their own UI. The Sardine Risk SDK is natively integrated into the checkout flow.

​

1. Obtain authorization token

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

You will need to obtain the 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>

{
  "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]

​

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

• Open in new window
• Open in new tab
• Embedded iFrame

import logo from './logo.svg';
import './App.css';

function App() {
  const params = `popup,scrollbars=0,resizable=0,status=0,location=0,toolbar=0,menubar=0,width=500,height=700`;
  const clientToken = "7ce511d0-c973-4744-b819-d933a248ae51";
  const url = `https://crypto.sandbox.sardine.ai/?address=0x10b195F7Be9B120efd05C58f16650A13f533eA33&fiat_amount=1000&asset_type=usdc&network=ethereum&client_token=${clientToken}`
  const handleClick = () => {
    window.open(url, '_blank', params);
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Sardine Crypto Integration Testing App
        </p>
        <a
          className="App-link"
          href={url}
          target="_blank"
          rel="noopener noreferrer"
        >
          New Tab
        </a>
        <a
          onClick={handleClick}
        >
          Window pop up
        </a>
      </header>
    </div>
  );
}

export default App;

​

4. Confirmation of Order Status

Sardine will fire off events that can be caught by event handlers that can be leveraged to update the user on the order status

There are two ways to get Order status

• Poll Orders Endpoint
• Redirect URL (On-ramp)
• Redirect URL (Off-ramp)

{
  "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