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
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 | Unique identifier for the order, which helps you track it. | string | - | uuid_v4() |
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) |
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 |
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 |
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) |
Updated about 2 months ago
Documentation related to this page