# 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:
- 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.
- We add XanPool widget library "xanpool-sdk-v1.js"
- 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 |
← Introduction Demo →