Fiat Onramp

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

PropertyRequiredDescriptionData TypeDefault valuePossible values
partner_idYesProvided when you register as a partner.string--
originIn sandboxInitializes the module in a sandbox/production environment.stringhttps://widget.wert.iohttps://sandbox.wert.io
click_idNoUnique identifier for the order, which helps you track it.string-uuid_v4()
redirect_urlNoIt 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
listenersNoYou 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

PropertyRequiredDescriptionData TypeDefault valuePossible values
addressNoUser’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.stringBTC-
commodityNoDefault crypto asset that will be selected in the module.stringBTCSee Supported coins and blockchains
networkNoNetwork for the default crypto asset.stringbitcoinSee Supported coins and blockchains
commodity_amountNoThe default crypto amount that will be pre-filled in the module. This option is ignored if currency_amount is set.numeric--
commoditiesNoCrypto assets that will be available in the module as a stringified JSON of an array of objects with the commodity and network options.stringBy default, all assets will be displayed.See Supported coins and blockchains
currency_amountNoThe 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_residenceNoUser’s country of residence.string-alpha2 code of the country
state_of_residenceNoUser’s state of residence (for USA).string-alpha2 code of USA state
date_of_birthNoUser’s date of birth.string-DD/MM/YYYY
MM/DD/YYYY (USA)
emailNoUser’s email address.string-[email protected]
full_nameNoThe user’s first and last name.string-min 3, max 69 letters; RegExp(/(\\w+\\s)\\w+/)
phoneNoUser’s phone number in international format (E. 164 standard). The ‘+’ is optional.string-+11014321111

Widget customization

PropertyRequiredDescriptionData TypeDefault valuePossible values
langNoLanguage of the widget.stringenen - for English
fr - for French
ja - for Japanese
es - for Spanish
skip_init_navigationNoBy default, the module suggests the nearest purchase route based on given parameters. Setting to ‘true’ skips this logic.booleanundefinedtrue
themeNoModule’s theme color.stringundefineddark
buttons_border_radius
secondary_buttons_border_radius
NoCustom radius of elements (in pixels).numeric4-
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
NoColor customization of specific elements of the Wert module.string-red
#FF0000
rgb(255,255,0)