# Integration Tutorial

FaTPay integrations are flexible to enable you to integrate us into any kind of apps/websites with an optimal user journey and experience.

As mentioned in \[[Quickstarts](/get-started/quickstarts.md#set-up-a-quick-integration)], it is the quickest and easiest way to integrate with FaTPay, that you can just add a button or directly embed our widget in your website.

{% hint style="info" %}
FaTPay widget has responsive web design which could fit into any screens, like desktop, tablets as well as mobile devices.
{% endhint %}

Therefore, the core of integration is to construct the widget URL. And all the authentication and customization will be done by passing query parameters in that URL.

{% hint style="success" %}
For the sake of security, **Premium Partner** is mandatory to add some more parameters including the signature parameter additionally. The signature algorithm is elaborated here \[[Widget Signature](/reference/integration-tutorial/widget-signature.md)].
{% endhint %}

## Widget URL

### Domain

> <https://ramp.fatpay.xyz/home>

### Common parameters

{% hint style="warning" %}
All keys and values of parameters are case-sensitive.
{% endhint %}

#### **`partnerId`**

* ***Description:*** The unique partner ID assigned by FaTPay during onboarding process, while fixed as *`public`* for Public Partners, e.g. *`partnerId=public`*;
* ***Format:*** String;
* ***Required:*** Mandatory for all partners;
* ***Signed:*** Mandatory to sign for Premium Partners;

#### **`timestamp`**

* ***Description:*** Unix timestamp in second, e.g. *`timestamp=1656600459`*;
* ***Format:*** String(10);
* ***Required:*** Mandatory for Premium Partners. While optional for others;
* ***Signed:*** Mandatory to sign for Premium Partners;

#### **`timeout [only NFT Checkout Widget need]`**

* ***Description:*** Unix timestamp in second, e.g. *`timestamp=1656600459`*;
* ***Format:*** String(10);
* ***Required:*** Mandatory for Premium Partners. While optional for others;
* ***Signed:*** Mandatory to sign for Premium Partners;

#### **`nonce`**

* ***Description:*** Random integer, e.g. *`nonce=183214`*;
* ***Format:*** String(6);
* ***Required:*** Mandatory for Premium Partners. While optional for others;
* ***Signed:*** Mandatory to sign for Premium Partners;

#### **`signature`**

* ***Description:*** Signature generated based on *`SecretKey`* and all need-to-be-signed parameters, e.g. *`signature=4UoZ2gIm3bcLTw5K6WdBJIaYBiXgQF3uvOfY4Ovc6+4=`*;
* ***Format:*** String;
* ***Required:*** Mandatory for Premium Partners. While optional for others;
* ***Signed:*** Mandatory to sign for Premium Partners;

### Append parameters to URL

Eventually, we will get the widget URL as following.

* ***Public Partner***

  > <https://ramp.fatpay.xyz/?partnerd=public>
* ***Basic Partner***

  > <https://ramp.fatpay.xyz/?partnerd=unique-partner-id>
* ***Premium Partner***

  > <https://ramp.fatpay.xyz/?partnerd=unique-partner-id\\&timestamp=1656600459\\&nonce=183214\\&signature=4UoZ2gIm3bcLTw5K6WdBJIaYBiXgQF3uvOfY4Ovc6+4=>

## Customization options

For more customization options, please check

{% content-ref url="/pages/0GumJFBafX2MD82057sS" %}
[On-ramp Widget Customization](/reference/integration-tutorial/on-ramp-widget-customization.md)
{% endcontent-ref %}

{% content-ref url="/pages/m46BuzLB73LGoncgcv0B" %}
[NFT Checkout Widget Customization](/reference/integration-tutorial/nft-checkout-widget-customization.md)
{% endcontent-ref %}

{% content-ref url="/pages/yq4L9luWqzJisyfQAR7U" %}
[Interface Customization](/reference/integration-tutorial/interface-customization.md)
{% endcontent-ref %}


---

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