# Integration

The easiest way to start learning about XanPool widget is to show a simple example. The following web page integrates XanPool widget into the page.

<html>
<head>
  <script src="https://cdn.widget.xanpool.com/xanpool-sdk-v1.js"></script>
  <script>
    function onWidgetEvent(message) {
      console.log('Received message ' +message.type);
      console.log('Message payload: ' +message.payload);
    }

    function onLoad() {
      const options = {apiKey: 'test-test-api-key-007'};
      const widget = new XanPoolWidget(
            options, document.getElementById("widgetContainer"), onWidgetEvent
      );
      widget.init();

    }
  </script>
  <style type="text/css">
    .widgetContainer {
      width: 600px;
    }
  </style>
</head>
<body onload="onLoad()">
<div id="widgetContainer" class="widgetContainer"/>
</body>
</html>

For sandbox integration kindly use https://cdn.widget.sandbox.xanpool.com/xanpool-sdk-v1.js

Things to note in the example:

  1. We create a container div where we would like to display our widget. The widget will take 100% of this element(up to 580px). The height will be automatically adjusted by expanding root element.
  2. We add XanPool widget library "xanpool-sdk-v1.js"
  3. We initialize the widget after the page has been loaded

# Widget options

The first argument of initXanPoolWidget function is options, below is the list of available parameters.

Parameter Required Description
apiKey Required A unique key identifying a partner
wallet Optional Pre filled wallet for buying transactions, if you pass this parameter you also need to pass cryptoCurrency
cryptoCurrency Optional One of the supported cryptocurrencies
currency Optional One of the supported currencies
method Optional One of the supported methods , transactionType must be also provided
chain Optional This parameter is required for currencies which are supported by multiple chains, either zilliqa, ethereum, tron or binance_smart_chain
fiat Optional Pre-filled amount of local currency, cannot be used together with crypto
crypto Optional Pre-filled amount of cryptocurrency, cannot be used together with fiat
autoSelling Optional Skips instructions for selling transactions, in this case you should transfer cryptoCurrency upon "transaction-created" event
transactionType Optional Either "buy" or "sell", It will pre-select widget mode and hide the tabs
partnerData Optional A string that could help a partner to track/identify a transaction
redirectUrl Optional The page where you want to redirect the user
isWebView Optional Set this to true if you would like to inject the widget into a WebView on mobile device
lang Optional Set language of the widget, either en, zh, th, or vi
destinationTag Optional Required for crypto with destination tag

# Widget events

The third argument of initXanPoolWidget function is onEvent callback that is triggered upon transaction's initiation. This callback accepts an object with the following attributes

Parameter Description
type Type of the event, currently only 'transaction-created'
payload Payload for the event, usually an object with different attributes

# transaction-created payload

Attributes of 'transaction-created' payload

Parameter Description
id Unique id of the created transaction
type Either 'sell' or 'buy'
crypto How much crypto is being bought or sold
fiat How much fiat is either bought or sold
serviceCharge Service charge in crypto
total Amount of crypto/fiat(for selling) after deducting service charge
cryptoPrice Price of crypto in local currency
cryptoPriceUsd Price of crypto in USD
currency Fiat currency
depositWallet ONLY FOR SELLING: Wallet where user/you should transfer crypto funds to initiate selling