> For the complete documentation index, see [llms.txt](https://aliniex.gitbook.io/alix-pay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aliniex.gitbook.io/alix-pay/guides/on-off-ramp-service/widget-link.md).

# Widget Link

The Referral Link (URL parametization) allows you to link customers out to AliX Pay checkout without the need to make API calls. You can implement this simply by directing the customer to a blank order form, or by sending through parameters needed to populate the AliX Pay order form. Your customer will be directed to the AliX Pay order which will be pre-filled with any parameters that were passed through.

Use this integration option if you do not require webhooks or price comparison within your site.

<figure><img src="/files/wsUW4KIhdtWu4KgGK5KQ" alt="" width="375"><figcaption></figcaption></figure>

## Before you begin

* If you have requested an AliX Pay account, you will first need your Partner Account Manager to enable your integration

## Implementation

You can implement this by directing the customer to a blank order form with the base URL, or by constructing a URL that contains the parameters needed to populate the AliX Pay order form. Your customer will be directed to the AliX Pay order form which will be pre-filled with any parameters that were contained in the URL.

There are two UI approaches available for directing the customer to the AliX Pay checkout flow, a redirect to a new tab, or an iFrame.

### ➡️ Redirect

This will redirect the customer to the AliX Pay checkout flow in another tab to complete their order. The customer’s order page will be pre-filled with the order details that have been passed through to AliX Pay via the referral URL.

#### Example of a redirect URL

HTTP

```http
https://ramp.aliniex.com/{en|vi|cn}?coin=ETH&amount=500&network=ETH&theme=light& appToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQWxpeGdhdGUgVGVzdCIsImVtYWlsIjoiY2hpbmd1eXVlbjYyMXhAZ21haWwuY29tIiwibG9nbyI6bnVsbCwicGFydG5lckNvZGUiOiJjaGluZ3V5ZW42MjF4Iiwid2lkZ2V0Q29kZSI6IjVmOTljMjdhLTNlMWQtNGNmOC04ZDk0LTkxY2JmZjAzZWZkZCIsInR5cGUiOiJhcHBsaWNhdGlvbiIsImlhdCI6MTcyMTAyNTkxOX0.2m5SNszt9oLKn5JpOwb4LPhlqg5hX6rI_Geenjmcjg0&walletAddress=0xf831d1781287e499bd546cc4831cf783af84b8e3
```

### 🗔 iFrame

This will host the AliX Pay site in an iFrame and allow customers to complete the checkout process within this iFrame. The same URL can be used as in above example.

**Allow the below permissions for the iframe**

* encrypted-media
* microphone
* camera

### Parameters

Here are the supported parameters that can be passed to AliX Pay. All of these parameters are optional, however we recommend that you pass through as many values as possible as this significantly improves conversions.

> ### 👍
>
> The exact name and case of the parameter must be used.

| Parameter     | Description                                                                                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| appToken      | Can be used to indicate the application by configured on Partner's dashboard . This parameter is `required`                                                                          |
| amount        | Amount of currency that the customer wants to exchange e.g. 500                                                                                                                      |
| coin          | Coin currency code that the customer wants to exchange e.g. ETH                                                                                                                      |
| network       | Blockchain network code that is selected by the customer. If this parameter is not passed, the default blockchain configured for the `coin` selected will apply                      |
| walletAddress | Customer’s wallet address                                                                                                                                                            |
| theme         | Used to apply the correct contrast based on the selected background color. We suggest that for dark backgrounds, you use a dark theme so that input fields are contrasted correctly. |
| returnUrl     | This is the url that users will be redirected to when they have completed or cancel the order process. e.g. https\://{returnUrl}.com)                                                |

## Using the SDK

Alternatively, you can use our SDK. All you need to do is run a code snippet which will inject all the code you need in order to initiate AliX Pay checkout.

### Embed the following Code Snippet

TypeScript

```typescript
// code snippet
```

### Initiate AliX Pay class

Use the following snippet to create an instance of the Banxa class to generate redirect and iframes. Insert your company name into the code snippet.

TypeScript

```javascript
// code snippet
```

### ➡️ Redirect to a new tab

Use the following snippet to create a redirect to the Banxa Order page:

JavaScript

```javascript
<script>
    alixPay.launch('#redirect',
            {
                'coin': 'ETH',
                'amount': 0.2,
                'walletAddress': '3Hiy7HuFcqwkgERyfRSwEHqrwSwTirm8zb',
 		'theme': 'light'
            });
</script>

<button id="redirect">Launch Redirect</button>
```

### 🗔 iFrame embedded directly into your application

Use the following snippet to create an iframe:

TypeScript

```javascript
<script>
    alixPay.iframe('#iframeButton', '#iframeTarget',
        {
            'coin': 'BTC',
            'amount': 0.5,
            'walletAddress': '3Hiy7HuFcqwkgERyfRSwEHqrwSwTirm8zb',
        },
        "800px", //Optional width parameter – Pass `false` if not needed.
        "400px"  //Optional height parameter – Pass `false` if not needed.
    );

</script>

<button id="iframeButton">Launch iframe</button>

<div id="iframeTarget">
    <!-- Where the iframe will be loaded  -->
</div>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://aliniex.gitbook.io/alix-pay/guides/on-off-ramp-service/widget-link.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.
