# Widget Signature

For the sake of security, Premium Partners have to sign for the widget URL using a hash-based message authentication code ([HMAC](https://en.wikipedia.org/wiki/Hash-based_message_authentication_code)) with [SHA-256](https://en.wikipedia.org/wiki/SHA-2).

## Signature for query parameters

You will get your own `SecretKey` during \[[Onboarding](/get-started/onboarding.md)]. 

{% hint style="danger" %}
**NEVER store the `SecretKey` in the frontend.** Your account might be blocked once the credential leakage is detected. FaTPay reserves the right to take any other actions and pursue any other legal rights available to us.
{% endhint %}

### Procedure

1. **Retrieve parameters**
   * Firstly, retrieve all the query parameters required to sign(check \[[Integration Tutorial](/reference/integration-tutorial.md#common-parameters)], \[[On-ramp Widget Customization](/reference/integration-tutorial/on-ramp-widget-customization.md)] and \[[Interface Customization](/reference/integration-tutorial/interface-customization.md)]). Build a map with all key-value pairs;
   * Then remove all the items with null keys or null values;
2. **Sort parameters**
   * Sort all parameter <mark style="color:red;">**keys**</mark> in ascending order(as per ASCII values of the characters);
3. **Prepare&#x20;*****`to-be-signed-payload`***
   * Convert the sorted map to a string *`to-be-signed-payload`* in the form of `key=value` and concatenate them with `&` character as the separator;
4. **Compute signature**
   * Next use `SecretKey` to generate signature for the string *`to-be-signed-payload`* from last step with  a hash-based message authentication code ([HMAC](https://en.wikipedia.org/wiki/Hash-based_message_authentication_code)) with [SHA-256](https://en.wikipedia.org/wiki/SHA-2). And don't forget urlencoding it. Please refer to \[[Widget Signature Demo](/appendix/demo/widget-signature-demo.md)];
5. **Assign signature**
   * Finally, assign the signature to `signature` in the query parameters and append it to the widget URL;

### Example

OK. For instance, a Premium Partner would like to set a default wallet address, while lock the wallet address and set the wallet address invisible to the user.

{% code title="Query parameters" overflow="wrap" %}

```javascript
{
  "walletAddress": "0xF0C35891CAf1cCa9b1daB1291c61fF232E6D5888",
  "walletAddressHidden": "1",
  "walletAddressLocked": "1",
  "ext": "ext"
}
```

{% endcode %}

<pre class="language-javascript" data-title="Common parameters"><code class="lang-javascript">{
  "nonce": 748219,
  "partnerId": "mqMBpCIP630LJxLY",
  "timestamp": 1656600459
<strong>}
</strong></code></pre>

#### Retrieve parameters

Firstly, retrieve all the query parameters required to sign.&#x20;

{% code overflow="wrap" %}

```java
ext=ext&nonce=54335363&partnerId=mqMBpCIP630LJxJK&partnerUrl=https://yoururl.com&timestamp=1657854065&walletAddress=xxxx&walletAddressHidden=1&walletAddressLocked=1
```

{% endcode %}

Then Build a map with all key-value pairs. And remove all the items with null keys or null values;.

```javascript
{
  "partnerId": "mqMBpCIP630LJxLY",
  "timestamp": 1656600459,
  "nonce": 748219,
  "walletAddress": "0xF0C35891CAf1cCa9b1daB1291c61fF232E6D5888",
  "walletAddressHidden": "1",
  "walletAddressLocked": "1",
  "ext": "ext"
}
```

**Sort parameters**

Sort all parameter keys in ascending order(as per ASCII values of the characters).

```javascript
{
  "ext": "ext",
  "nonce": 748219,
  "partnerId": "mqMBpCIP630LJxLY",
  "timestamp": 1656600459,
  "walletAddress": "0xF0C35891CAf1cCa9b1daB1291c61fF232E6D5888",
  "walletAddressHidden": 1,
  "walletAddressLocked": 1
}
```

**Prepare&#x20;*****`to-be-signed-payload`***

Convert the sorted map to a string *`to-be-signed-payload`* in the form of `key=value` and concatenate them with `&` character as the separator.

> ext=ext\&nonce=54335363\&partnerId=mqMBpCIP630LJxJK\&timestamp=1657854065\&walletAddress=0xF0C35891CAf1cCa9b1daB1291c61fF232E6D5888\&walletAddressHidden=1\&walletAddressLocked=1

**Compute signature**

Next use `SecretKey` to generate signature for the string *`to-be-signed-payload`* from last step with  a hash-based message authentication code ([HMAC](https://en.wikipedia.org/wiki/Hash-based_message_authentication_code)) with [SHA-256](https://en.wikipedia.org/wiki/SHA-2).

> 4UoZ2gIm3bcLTw5K6WdBJIaYBiXgQF3uvOfY4Ovc6+4=

Urlencode the signature:

> 4UoZ2gIm3bcLTw5K6WdBJIaYBiXgQF3uvOfY4Ovc6%2B4%3D

**Assign signature**

Finally, assign the signature to signature in the query parameters and append it to the widget URL.

{% code overflow="wrap" %}

```
https://ramp.fatpay.xyz/home?ext=ext&nonce=748219&partnerId=mqMBpCIP630LJxLY&timestamp=1656600459&walletAddress=0xF0C35891CAf1cCa9b1daB1291c61fF232E6D5888&walletAddressHidden=1&walletAddressLocked=1&signature=4UoZ2gIm3bcLTw5K6WdBJIaYBiXgQF3uvOfY4Ovc6%2B4%3D
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.fatpay.org/reference/integration-tutorial/widget-signature.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.