> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payments.sardine.ai/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Info>
  **Goal**

  By the end of this guide, you should be able to open a new window with Sardine On/Off-ramp, either in a new tab or in a new browser window.
</Info>

### 1. Obtain authorization token

<Note>
  Before we start, you'll need the following credentials

  ```
  yaml json_schema
  $ref: "../../../models/Authorization-Parameters.yaml"
  ```
</Note>

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>`

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

<br />

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](/guides/integration/payments/OnOffRamps/GettingStarted/configuration).

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.

<Note>
  **Supported tokens in Sandbox**<br />
  Currently Sardine only supports a subset of tokens available in production on its sandbox environment. We recommend using the GET /supported-tokens endpoint to fetch the list of tokens available
</Note>

### 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

<Info>
  If embedding an iframe, make sure to pass camera and geolocation permission `allow="camera *;geolocation *"` for proper KYC collection
</Info>

<Tabs>
  <Tab title="Open in new window">
    Recommended size is width=500, height=700 for new window

    ```js theme={null}

    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;

    ```

    <details />
  </Tab>

  <Tab title="Open in new tab">
    ```js theme={null}

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

    function App() {
      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');
      }

      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}
            >
              Tab pop up
            </a>
          </header>
        </div>
      );
    }

    export default App;

    ```
  </Tab>

  <Tab title="Embedded iFrame">
    ```js theme={null}
    <head>
    <script>
    /*
      The widget and begins its flow after this line,
      and will update the parent about its state via postMessage events.
    */
    function attachListener() {
      window.addEventListener("message", (data) => console.log("Event is", data))     }
    </script>
      </head>
      <body>
      <div class="center">
        <iframe src="https://crypto.sandbox.sardine.ai/?address=0x10b195F7Be9B120efd05C58f16650A13f533eA33&client_token=123-asd-456" onload="attachListener()" allow="camera *;geolocation *" id="sardine_iframe" /> //Make sure to allow camera and geolocation access
      </div>
    </body>
    ```
  </Tab>
</Tabs>

### 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

<Tabs>
  <Tab title="Poll Orders Endpoint">
    Developers can poll to the [/orders](https://docs.sardine.ai/docs/integrate-payments/900670db39399-get-order-s) endpoint to check its status with the `order_id`

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

  <Tab title="Redirect URL (On-ramp)">
    Pass a `redirect_url` parameter in the URL when intiating the widget. Once the transaction is complete, Sardine will make a call to the 'redirect\_url'

    `Expired` - The user didn't complete the transaction within the time

    ```json theme={null}
    {
      "status" : "Expired",
      "data" : {
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }
    }
    ```

    `Processed` - The payment is complete

    ```json theme={null}

    {
      "status" : "Processed",
      "data" : {
        "price": 100,
        "orderId": "123e4567-e89b-12d3-a456-426614174001",
        "transactionFee": 2,
        "networkfee": "0.35"
        "currencyCode": "usd",
        "paymentMethod": "ACH",
        "createdAt": 12312321312,
        "address": "0x10b195F7Be9B120efd05C58f16650A13f533eA33",
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }

    }

    ```

    `Declined` - The transaction was declined due to issues with their payment method or risk profile.

    ```json theme={null}
    {
      "status" : "Declined",
      "data" : {
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }
    }
    ```
  </Tab>

  <Tab title="Redirect URL (Off-ramp)">
    For the off ramp to function, the User needs to send crypto to a deposit address generated by Sardine. This address is sent in a frontend event and also via webhook, and can be displayed to the User or a transaction can be created for the User to sign to send the crypto to Sardine.

    The Order will be in `draft` status with the following JSON

    ```json theme={null}
    {
      "status" : "Draft",
      "data" : {
        "orderId" : "479813897123-adada89131-12312312",
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c",
        "assetType" : "ETH",
        "network" : "ethereum",
        "total" : "1.2",
        "depositAddress" : "0x4713jkadba83131312",
        "fiatCurrency" : "USD",
        "fiatAmount" : 2200.413
      }
    }
    ```

    ### Track Progress of Order

    Once Sardine receives the crypto at the `depositAddress` specified, we will send a webhook to acknowledge receipt of the funds

    `Expired` - The user didn't complete the transaction within the `expiration` paramter

    ```json theme={null}
    {
      "status" : "Expired",
      "data" : {
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }
    }
    ```

    `Processed` - The payment is complete

    ```json theme={null}

    {
      "status" : "Processed",
      "data" : {
        "price": 100,
        "orderId": "123e4567-e89b-12d3-a456-426614174001",
        "transactionFee": 2,
        "networkfee": "0.35"
        "currencyCode": "usd",
        "paymentMethod": "ACH",
        "createdAt": 12312321312,
        "address": "0x10b195F7Be9B120efd05C58f16650A13f533eA33",
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }

    }

    ```

    `Declined` - The transaction was declined due to issues with their payment method or risk profile.

    ```json theme={null}
    {
      "status" : "Declined",
      "data" : {
        "referenceId" : "42eadcb0-4a93-45af-9c8c-d295db5aeb6c"
      }
    }
    ```
  </Tab>
</Tabs>

### 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](/guides/integration/payments/Onboarding/testingcredentials) 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](/guides/integration/payments/OnOffRamps/GettingStarted/goingtoproduction)

<Check>
  You should now be able to route users to the Sardine Checkout Widget via your defined URL where they can instantly buy crypto tokens!
</Check>