# On-Ramp Fan Tokens

## Implement the On-Ramp Fan Token flow

Our On-Ramp Fan Token is an extension of the Partner web app. This feature will allow your users to buy the Fan Token of one team.

To integrate it into your website or mobile app, you only need your Partner URL and a few parameters (all [others parameters](https://connect.socios.com/partner-web-app/url-parameters) can be combined with the followings). 

<pre class="language-url"><code class="lang-url"><strong>https://[Partner Shortname].socios.com/on-ramp-token
</strong></code></pre>

You must use your Partner URL in an iframe, a modal or a WebView.

Then, add a few dedicated parameters:

| Parameter            | Value                                    | Description                                                            |
| -------------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
| `on_ramp_token`      | true                                     | Mandatory. Set it to `true` to trigger the On-Ramp Fan Token flow.     |
| `purchase_qty`       | 0 -> infinite                            | Optional. User will be able to change it when they arrive on the flow. |
| `fiat_currency_code` | 'EUR', 'USD', 'GBP', 'BRL', 'TRY', 'KRW' | Optional.                                                              |

For instance, ACM would have the following URL to redirect to the ACM On-Ramp Fan Token flow with 34 pre-populated ACM tokens to buy and with USD FIAT currency

{% code overflow="wrap" %}

```
https://acm.socios.com/on-ramp-token?purchase_qty=10&on_ramp_token=true&fiat_currency_code=EUR
```

{% endcode %}

## Get informed once the user has finalised their transaction

The window that triggers the On-Ramp flow can listen to the `message` event from a `postMessage` and the `onRampTokenPaymentStatus` code, in order to retrieve when the user has finalised their transaction, and to see how many fan tokens they have bought. &#x20;

{% hint style="info" %}
We strongly recommend to check your transfer via RPC data (ie. token balance).\
See [#retrieve-user-token-balances](https://connect.socios.com/interact-with-chiliz-chain/working-with-tokens#retrieve-user-token-balances "mention")
{% endhint %}

Here is how you should handle it, making sure you are listening to the right `event.data` and the right `event.origin`:

```javascript
window.addEventListener(
  "message",
  (event) => {
    if (
      event.data !== "onRampTokenPaymentStatus" ||
      event.origin !== "https://gateway-capsicum.socios.com"
    )
      return;

    <HERE do a refetch or whatever is needed>
  },
  false
); 
```