KyberDeveloper · Powering Liquidity for the Ecosystem

KyberDeveloper · Powering Liquidity for the Ecosystem

  • Home
  • Integrations
  • Reserves
  • KyberPRO
  • Addresses
  • API/ABI
  • Trade Debugger
  • Tracker
  • GitHub

›Widgets

Getting Started

  • Introduction

RESTful API

  • RESTful API Overview
  • RESTful API

Widgets

  • Widgets Overview
  • KyberWidget
  • Sign In Widget

Core Smart Contracts

  • IKyberNetworkProxy
  • KyberNetworkProxy
  • IKyberNetwork
  • ISimpleKyberProxy
  • IKyberMatchingEngine
  • KyberMatchingEngine
  • IKyberHint
  • KyberHintHandler
  • IKyberFeeHandler
  • KyberFeeHandler
  • IKyberStaking
  • KyberStaking
  • IKyberDao
  • KyberDao
  • IKyberStorage
  • KyberStorage
  • IKyberHistory
  • KyberHistory
  • IKyberReserve
  • KyberReserve
  • ConversionRates
  • LiquidityConversionRates
  • IEpochUtils
  • EpochUtils

Contract ABIs

  • ABIs

Plugins

  • Plugins Overview
  • WooCommerce Plugin

Code Snippets

  • Token Quantity Conversion

Misc Contracts

  • KyberNetwork
  • ConversionRatesInterface
  • OrderbookReserveInterface
  • PermissionGroups
  • SanityRates
  • SanityRatesInterface
  • Withdrawable

KyberWidget

Overview

The KyberWidget can be implemented via HTML/JS. There is a widget generator that provides a user interface for configuration of the parameters described below.

KyberWidget

Widget URL Components

Base URL

https://widget.kyber.network/

Path

The widget version to be used.

Examples

v0.6.5/?
v0.8.0/?

Path Parameters

ParameterTypeDescriptionDefaultExample
typestringWidget type. Either pay, swap, or buypaypay
modestringBehavior of how the widget will appear to the user. Either tab, popup, or iframepopuppopup
receiveAddraddressDestination wallet address which will receive the destination tokens.N.A0xFDF28Bf25779ED4cA74e958d54653260af604C20
receiveTokenstringToken symbol of destination token. Has to be a token supported by Kyber.N.AETH
DAI
receiveAmountfloatAmount of receiveTokenUser gets to specify value1.2
25
callbackstringCallback URL that will be called after the tx has been broadcasted to the blockchain. It includes tx hash as a param and must return HTTP status code of 200 for the success. If not, the callback will be fired another 5 times at most-https://yourwebsite.com/kybercallback
networkstringETH network that widget will run inropsten1 of the following values:
test
ropsten
production
mainnet
paramForwardingbooleanIf true, all params that were passed to the widget will be submitted via the callback. Can be used to prevent malicious behaviour by giving your customer a OTP secret token and validating it in the callback--
commissionIdaddressWallet address that gets fees from the trade. Read more about platform fees here-0xFDF28Bf25779ED4cA74e958d54653260af604C20
commissionFeeintegerPlatform fee to be charged, in basis points. Read more about platform fees here-25 (0.25%)
pinnedTokensstringTokens that are pinned at the top of your token selector. Tokens are separated by an underscore.ETH_KNC_DAIETH_KNC_DAI
defaultPairstringThis param only takes effect when type=swap, it indicates default token pair will show in swap layout.ETHKNCETHKNC
signerstringConcatenated list of Ethereum addresses which the user must make the payment from, separated by underscore.N.A0xFDF28Bf25779ED4cA74e958d54653260af604C20_0xFDF28Bf25779ED4cA74e958d54653260af604C20
productNamestringName of the product bought. You can push multiple productName instances to the URL for multiple product names*N.AA%20Cat%20Picture
productQty*stringAmount of productName product. Multiple instances of productQty can be pushed into the URL*N.A7
productImage*stringPublic URL of an image of productName. Multiple instances of productImage can be pushed into the URL*N.A.https://images.unsplash.com/photo-1518791841217-8f162f1e1131
paymentDatastringAuxiliary data attached to payment after the tx is broadcastedN.AN.A

Things to note

network

  • test and ropsten runs on the Ethereum Ropsten network (ie. they are equivalent)
  • production and mainnet runs on the Ethereum mainnet.

productName

  • Multiple product instances are only supported on v0.6+

productQty

  • If this field is used, there must be a corresponding productName parameter preceding it. Otherwise, it will be ignored.

productImage

  • productAvatar is an alias for productImage in older versions (< v0.6)
  • If this field is used, there must be a corresponding productName parameter preceding it. Otherwise, it will be ignored.

Widget URL Examples

Test out the links below by copying, pasting and opening them in a new tab!

Pay Mode with Multiple Products

https://widget.kyber.network/v0.8.0/?type=pay&mode=tab&receiveAddr=0x63B42a7662538A1dA732488c252433313396eade&receiveToken=KNC&callback=https%3A%2F%2Fkyberpay-sample.knstats.com%2Fcallback&paramForwarding=true&network=ropsten&receiveAmount=50&theme=theme-emerald&productName=A%20Cat%20Picture&productQty=7&productImage=https://images.unsplash.com/photo-1518791841217-8f162f1e1131&productName=Falling%20Autumn%20Leaves&productQty=24&productImage=https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/fabdf38b-1811-49e8-8eeb-4c5632076c3e/dczgthc-076fcdf7-4932-4672-8d94-f3b6ed07d100.png&commissionId=0x90A21dbB74D7684B7AF747963D7ac7A8086b82B6&commissionFee=25

Swap Mode with Sunset Theme

https://widget.kyber.network/v0.8.0/?type=swap&mode=tab&callback=https%3A%2F%2Fkyberpay-sample.knstats.com%2Fcallback&paramForwarding=true&network=ropsten&pinnedTokens=KNC_DAI&theme=theme-sunset

Buy Mode

https://widget.kyber.network/v0.8.0/?type=buy&mode=tab&receiveToken=ETH&receiveAmount=0.1&callback=https%3A%2F%2Fkyberpay-sample.knstats.com%2Fcallback&paramForwarding=true&network=ropsten&pinnedTokens=KNC_DAI&theme=theme-emerald`

FAQ

  1. Even though I specified the popup / iframe mode, why does the browser open the widget in a new tab when the user clicks on the payment button?

Answer:

If your buttons do not have the ‘kyber-widget-button’ class, or they are generated on the fly when the page is already loaded, you need to manually activate the buttons as such:

window.kyberWidgetOptions.register(‘your buttons CSS selector here’);

If you don’t provide the CSS selector, it defaults to ‘kyber-widget-button’.

  1. How do I track or monitor the payment status?

Answer: Kindly refer to this monitoring PHP library. More monitoring tools may be built by Kyber and the community in the future. Alternatively, vendors can choose to implement and run their own monitoring logic to get the payment status from the Ethereum network.

License

KyberWidget is available under MIT License, see LICENSE file for more information.

Bugs/Features report

Please feel free to submit bugs report or any features you want to have in our KyberWidget by opening a Github issue here.

← Widgets OverviewSign In Widget →
  • Overview
  • KyberWidget
    • Widget URL Components
    • Things to note
    • Widget URL Examples
    • FAQ
  • License
  • Bugs/Features report
KyberDeveloper · Powering Liquidity for the Ecosystem
EssentialsGetting StartedDesign PrinciplesProtocol OverviewSmart Contract Architecture
IntegrationsDAppsVendorsWalletsPlatform Fees
ReservesFed PriceAutomated Price
© 2019 Kyber Network. All rights reserved.
Follow us on Facebook
Follow us on Twitter
Follow us on Github
Follow us on Reddit
Join our Telegram group
Subscribe to our Youtube channel
Read our blog on Medium