Initialize the widget

You can integrate the Wert Widget into your web app using our SDK, this is the recommended way to initialize the widget. For React projects, we provide this wrapper.

You can find examples of the integration on GitHub.

Once the SDK is installed, you can use the following code snippet to initialize the payment module:

// Import the SDK
import WertWidget from "@wert-io/widget-initializer";

// Initialize the payment module
const wertWidget = new WertWidget({
  // Configuration options
  // ...
});

// Further code to handle widget events and interactions

https://sandbox.wert.io/YOUR_PARTNER_ID/widget/?click_id=34dc984f-1d0a-4b44-8ac4-5800d1401537&commodity=ETH&network=sepolia&commodities=%5B%7B%22commodity%22%3A%22ETH%22,%22network%22%3A%22sepolia%22%7D,%7B%22commodity%22%3A%22MATIC%22,%22network%22%3A%22amoy%22%7D%5D&widget_layout_mode=Modal&commodity_id=eth_sepolia.simple.ethereum

Options

Here are the options you can pass to the widget.

General options

Property	Required	Description	Data Type	Default value	Possible values
partner_id	Yes	Provided when you register as a partner.	string	-	-
origin	In sandbox	Initializes the module in a sandbox/production environment.	string	https://widget.wert.io	https://sandbox.wert.io
click_id	No	A unique identifier created by you. Can be used to help you reconcile the order on your side.	string	click_id	`uuid_v4()`Can be anything but try to avoid using special characters like % or pass them encoded to avoid parsing issues.
redirect_url	No	It includes a button 'Back to {Partner Name}' on the widget (not available in iFrame mode). It also redirects users from KYC emails to proceed with payment.	Full URL string (with protocol)	-	https://origin.us/item_id
listeners	No	You can use this if you want to listen to some module events and react to them.	object	-	See the listeners object.

Pre-filled user data

Property	Required	Description	Data Type	Default value	Possible values
address	No	User’s wallet address. It is validated based on the chosen `commodity`. If the address is invalid, this option is ignored. BTC address format is used as default.	string	BTC	-
commodity	No	Default crypto asset that will be selected in the module.	string	BTC	See Supported coins and blockchains
network	No	Network for the default crypto asset.	string	bitcoin	See Supported coins and blockchains
commodity_amount	No	The default crypto amount that will be pre-filled in the module. This option is ignored if `currency_amount` is set.	numeric	-	-
commodities	No	Crypto assets that will be available in the module as a stringified JSON of an array of objects with the commodity and network options.	string	By default, all assets will be displayed.	See Supported coins and blockchains
currency_amount	No	The default amount, in fiat, which will be pre-filled in the module. Minimum value is $1.50 on sandbox and $5 on prod.	numeric	-	-
country_of_residence	No	User’s country of residence.	string	-	alpha2 code of the country
state_of_residence	No	User’s state of residence (for USA).	string	-	alpha2 code of USA state
date_of_birth	No	User’s date of birth.	string	-	`DD/MM/YYYY` `MM/DD/YYYY` (USA)
email	No	User’s email address.	string	-	[email protected]
full_name	No	The user’s first and last name.	string	-	min 3, max 69 letters; `RegExp(/(\\w+\\s)\\w+/)`
phone	No	User’s phone number in international format (E. 164 standard). The ‘+’ is optional.	string	-	+11014321111
card_country_code	No	card billing address alpha2 country code	string	-	US
card_city	No	card billing address city	string	-	Los Angeles
card_state_code	No	card billing address alpha2 state code (For US)	string	-	CA
card_post_code	No	card billing address postal code	string	-	12345
card_street	No	card billing address street	string	-	Main street 1

Widget customization

Property	Required	Description	Data Type	Default value	Possible values
lang	No	Language of the widget.	string	en	en - for English fr - for French ja - for Japanese es - for Spanish ko - for Korean zh - for Chinese
skip_init_navigation	No	By default, the module suggests the nearest purchase route based on given parameters. Setting to ‘true’ skips this logic.	boolean	undefined	true
theme	No	Module’s theme color.	string	undefined	dark
buttons_border_radius secondary_buttons_border_radius	No	Custom radius of elements (in pixels).	numeric	4	-
color_background color_buttons color_buttons_text color_secondary_buttons color_secondary_buttons_text color_main_text color_secondary_text color_icons color_links color_success color_warning color_error	No	Color customization of specific elements of the Wert module.	string	-	`red` `#FF0000` `rgb(255,255,0)`