> ## Documentation Index
> Fetch the complete documentation index at: https://guides.saber.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Through Saber Widget

> Integrate the Saber Bank Addition Widget for Plaid-linked deposit accounts via HMAC-SHA256 signature, redirect URL parameters, and sandbox endpoints.

The Saber Bank Addition Widget guides your users through adding a deposit bank account. Required for flows like USD onramp, where the bank is linked via Plaid.

## Steps for Bank Web Widget

**Prerequisite:**

1. **Create the User:** Ensure the user is initialised in the Saber system with proper phone and email.
2. **User KYC:** Ensure the user KYC is approved with Saber.

### Step 1: Generate the signature (secret) for the Widget

For each session, a unique secret needs to be generated every time.

```javascript theme={null}
// Variables (these should be securely stored and handled)
var clientId = 'YOUR_CLIENT_ID'; // Replace with your actual client ID
var clientSecret = 'YOUR_CLIENT_SECRET'; // Replace with your actual client secret
var user_id = 'USER_ID'; // Replace with the user's ID received when creating the user in Step 2

// Step 1: Generate timestamp
var timestamp = Math.floor(Date.now() / 1000).toString();

// Step 2: Create the signature string
var sigString = clientId + timestamp + "sdk" + user_id;

// Step 3: Generate the HMAC-SHA256 signature
var secret = CryptoJS.HmacSHA256(sigString, clientSecret).toString().toUpperCase();

// The 'secret' can now be used to authenticate the SDK request
```

### Step 2: Generate redirect URL

Once the secret is created for the user, the following query parameters are **required** to be passed along in the base URL to create the link:

| Query parameter      | Description                                                                    |
| -------------------- | ------------------------------------------------------------------------------ |
| `API Key(client_id)` | Provided by Saber                                                              |
| `user_id`            | When creating the user, the UUIDv4 will be generated for the user              |
| `timestamp`          | The timestamp of the payment request (used at the time of creating the secret) |
| `signature(secret)`  | The secret generated in step 1                                                 |

Optionally, you can also pass:

| Query parameter | Description                                                                                                                         |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `redirect_url`  | Where the user is sent once the Plaid bank linking flow finishes. Must be URL-encoded and appended as the **last** query parameter. |

**The Base URL**

| Environment | Link                                                                                 |
| ----------- | ------------------------------------------------------------------------------------ |
| Production  | [https://app.saber.money/bank/add](https://app.saber.money/bank/add)                 |
| Sandbox     | [https://app.sandbox.saber.money/bank/add](https://app.sandbox.saber.money/bank/add) |

**Example of a full link**

```text theme={null}
https://app.sandbox.saber.money/bank/add?client_id=d951b040-ecb0-432b-ae3c-2ae7d2d19987&user_id=d951b040-ecb0-432b-ae3c-2ae7d2d1998&timestamp=1687276964&secret=CE1B5BD087BA408C2AFF01B00595007858DF496D3468CE3307CB1A7966DDC265
```

> 📘
>
> Does the URL expire?
>
> The URL validity is **10 minutes** from the creation of the secret.

### Step 3: Redirect your user to the link

Once the URL is generated, redirect your user to the link, and the user will see the Plaid Bank addition screen.

#### Returning the user to your app

To bring the user back into your own app once they exit the Plaid flow, append `redirect_url` as the last query parameter:

```text theme={null}
?redirect_url=<url-encoded-url>
```

Full example:

```text theme={null}
https://app.sandbox.saber.money/bank/add?client_id=d951b040-ecb0-432b-ae3c-2ae7d2d19987&user_id=d951b040-ecb0-432b-ae3c-2ae7d2d1998&timestamp=1687276964&secret=CE1B5BD087BA408C2AFF01B00595007858DF496D3468CE3307CB1A7966DDC265&redirect_url=https%3A%2F%2Fyourapp.com%2Fbank%2Fcomplete
```

<Note>
  The value must be URL-encoded, otherwise its own query string is parsed as part of the widget URL. If `redirect_url` is omitted, the user stays on the Saber-hosted page after finishing.
</Note>

<Warning>
  A redirect only signals that the user left the flow — it is not a confirmation that the account was linked or approved. Confirm the outcome from the [bank account webhook](/user/bank-account/webhooks) or by fetching the user's bank accounts.
</Warning>


## Related topics

- [Overview](/user/bank-account/overview.md)
- [KYC Widget](/user/kyc/widget.md)
- [Through API Endpoints](/user/bank-account/api.md)
- [Triggering Limit Upgrade and EDD](/users/limits-edd/widget.md)