# 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-api-key'};
      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>

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
autoSelling Optional Skips instructions for selling transactions, in this case you should transfer crypto upon "transaction-created" event or receiving a notification via webhook
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

# 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