\n \n | Property | \n Required | \n Type | \n Default value | \n Possible value(s) | \n Description | \n
\n \n | partner_id | \n required | \n String | \n - | \n - | \n partner_id will be given to you upon your registration as our partner. It's required to track your commission and statistics. If you don't have one, contact us. | \n
\n \n | click_id | \n optional | \n String | \n - | \n uuid_v4() | \n Unique identifier for the order that lets you track it and helps us with troubleshooting. | \n
\n \n | listeners | \n optional | \n Object | \n - | \n See the listeners object structure | \n Use this if you want to listen to some module events and react to them. | \n
\n \n | origin | \n optional | \n String | \n https://widget.wert.io | \n https://sandbox.wert.io | \n Required to initialize the module in the specific environment. | \n
\n \n | redirect_url | \n optional | \n String | \n - | \n https://origin.us/item_id | \n Full url string (with protocol). This link will be used for user redirection. | \n
\n \n | support_url | \n optional | \n String | \n - | \n https://partner.com/support | \n Full url string (with protocol). This link will be used for helping users with failed orders. | \n
\n \n | payment_method | \n optional | \n String | String[] | \n card | \n card
apple-pay
google-pay
cash-app
sepa
blik
['apple-pay', 'cash-app'] | \n One method (as a plain string, e.g. 'card') or several methods (as an array, e.g. ['apple-pay', 'cash-app']) to pre-select and show first, in the given order. Other methods will still be available unless payment_method_restriction is used. Passing a single string keeps working exactly as before — passing an array is fully backward-compatible and not required. | \n
\n \n | payment_method_restriction | \n optional | \n Boolean | \n false | \n true | \n If true, the widget will show only the method(s) specified in payment_method, in the given order (any methods that aren’t available are ignored). If none of the specified methods are available, the widget will fall back to showing all available methods. | \n
\n
\n\n### Smart contract options\n\n\n \n | Property | \n Required | \n Type | \n Default value | \n Possible value(s) | \n Description | \n
\n \n | address | \n optional | \n String | \n - | \n - | \n User's wallet address. The address is checked for validity based on the chosen commodity. BTC address format is used by default. If the address is invalid, this option is ignored. Will be ignored if the session has \"flow_type\": \"simple_full_restrict\" or if it was passed to the session with \"flow_type\": \"simple\". | \n
\n \n | commodity | \n optional | \n String | \n BTC | \n List of supported currencies | \n Default commodity that will be selected in the module. Will be ignored if the session has \"flow_type\": \"simple_full_restrict\" or if it was passed to the session with \"flow_type\": \"simple\". | \n
\n \n | network | \n optional | \n String | \n bitcoin | \n List of supported currencies | \n Network that will be selected for default commodity. Will be ignored if the session has \"flow_type\": \"simple_full_restrict\" or if it was passed to the session with \"flow_type\": \"simple\". | \n
\n \n | commodity_amount | \n optional | \n Number | \n - | \n - | \n Default commodity amount that will be pre-filled in the module. This option is ignored if the currency_amount has been set. Will be ignored if the session has \"flow_type\": \"simple_full_restrict\" or if it was passed to the session with \"flow_type\": \"simple\". | \n
\n \n | commodities | \n optional | \n String | \n - | \n List of supported currencies | \n Commodities that will be available in the module. By default, all commodities are present. Should contain a stringified JSON of an array of objects with commodity and network fields. Fields are filled with the same values as a default commodity and network, e.g. JSON.stringify([{ commodity: 'USDC', network: 'ethereum' }]). Will be ignored if the session has \"flow_type\": \"simple_full_restrict\". | \n
\n \n | currencies | \n optional | \n String | \n - | \n List of supported currencies | \n Set currencies to control what appears in the widget; if empty, invalid, or not passed, all supported currencies are shown, and in simple_full_restrict sessions a mismatched currency will result in a \"Purchase can’t be made\" message. Example: JSON.stringify(['EUR']) | \n
\n \n | currency_amount | \n optional | \n Number | \n - | \n - | \n Default currency amount that can be pre-filled in the module. Will be ignored if the session has \"flow_type\": \"simple_full_restrict\" or if it was passed to the session with \"flow_type\": \"simple\". | \n
\n \n | country_of_residence | \n optional | \n String | \n - | \n code of the country | \n User's country of residence. | \n
\n \n | state_of_residence | \n optional | \n String | \n - | \n code of USA state | \n User's state of residence (for the USA). | \n
\n \n | date_of_birth | \n optional | \n String | \n - | \n DD/MM/YYYY / MM/DD/YYYY (USA)\t | \n User's date of birth. | \n
\n \n | email | \n optional | \n String | \n - | \n test@test.com | \n User's email address. | \n
\n \n | full_name | \n optional | \n String | \n - | \n min 3, max 69 letters; RegExp(/(\\w+\\s)\\w+/) | \n User's first and last name. | \n
\n \n | phone | \n optional | \n String | \n - | \n +11014321111 / 11014321111 | \n User's phone number in the international format (E. 164 standard). Can be with or without +. Will be ignored if user_id was passed to the session. | \n
\n \n | user_id | \n optional | \n String | \n - | \n 01K88HMYQAK47DSWB9RM3ZBNTP | \n Applicable for NFT checkout only. Upon loading the Widget with user_id, sms with OTP code is automatically sent to the corresponding phone number. A user lands straight to ‘Enter OTP’ code and proceeds to log in. | \n
\n \n | card_country_code | \n optional | \n String | \n - | \n US | \n Card billing address alpha2 country code. | \n
\n \n | card_city | \n optional | \n String | \n - | \n New York | \n Card billing address city. | \n
\n \n | card_state_code | \n optional | \n String | \n - | \n NY | \n Card billing address alpha2 state code (For US). | \n
\n \n | card_post_code | \n optional | \n String | \n - | \n 12345 | \n Card billing address postal code. | \n
\n \n | card_street | \n optional | \n String | \n - | \n ### Church St | \n Card billing address street. | \n
\n \n | display_currency | \n optional | \n String | \n - | \n AUD | \n ISO currency code to display an estimated approximate amount in that currency next to the order amount. Must differ from the currencies supported in the widget. | \n
\n
\n\n### Appearance and restrictions\n\n\n \n | Property | \n Required | \n Type | \n Default value | \n Possible value(s) | \n Description | \n
\n \n | lang | \n optional | \n String | \n en | \n List of supported languages | \n Defines the language in the module. Falls back to English. | \n
\n \n | is_crypto_hidden | \n optional | \n Boolean | \n undefined | \n true | \n \n Allows to hide crypto mentions and exchange rate for NFT purchases if it is enabled for your partner_id.\n
\n - Please check the boolean usage note\n | \n
\n \n | skip_init_navigation | \n optional | \n Boolean | \n undefined | \n true | \n \n By default, module will try to provide the closest to purchase starting route depending on provided parameters. If true, this navigation logic will be skipped.\n
\n - Please check the boolean usage note\n | \n
\n \n | theme | \n optional | \n String | \n undefined | \n dark | \n The theme used in the module (uses the light theme by default). | \n
\n \n | \n brand_color\n | \n optional | \n String | \n undefined | \n #FF0000 | \n Custom brand color that affects the following components: primary buttons, tooltips, steppers, tabs, checkboxes, toasts, pie countdowns. | \n
\n \n | is_auto_logout_on_order_complete_enabled | \n optional | \n Boolean | \n undefined | \n true | \n \n When true, the user's auth session is silently cleared as soon as an order reaches success status. The success screen remains visible; no redirect occurs. Any subsequent navigation to an auth-protected route will resolve to the login page.\n
\n - Please check the boolean usage note\n | \n
\n \n | is_session_expire_on_email_mismatch | \n optional | \n Boolean | \n undefined | \n true | \n \n When true, the user's auth session is discarded if the email query parameter does not match the email of the currently logged-in user (comparison is case-insensitive). The user is redirected to the login page; no session data is preserved.\n
\n - Please check the boolean usage note\n | \n
\n
\n\n### Extra object structure\n\nThe `extra` object is an optional object that can contain some additional data.\n\n```\nextra: {\n item_info: Object,\n wallets: Array,\n}\n```\n\n#### Adding NFT information\nYou can add the following parameters to the **item_info** to display your NFT's name, image, the author’s avatar, the author’s name and the seller’s name in the widget.\n\n| Property | Type | Description |\n|---------------------|--------|----------------------------------------------------------------------------------------|\n| author_image_url | String | The URL of the author's avatar. Example: `https://something.com/images/image.jpg` |\n| author | String | The name of the author |\n| image_url | String | The URL of the NFT's image |\n| name | String | The name of the NFT |\n| category | String | The category of the NFT |\n| seller | String | The name of the NFT's seller |\n| header | String | The header to be shown instead of 'Buy token' |\n\n#### Adding default wallets\nYou can define the array of default **wallets** that will be prefilled when the user changes cryptocurrency. The array will be ignored if the session has `\"flow_type\": \"simple_full_restrict\"` or if `address` was passed to the session with `\"flow_type\": \"simple\"`. Non-valid addresses will be ignored. \n\nThe wallet object structure:\n\n| Property | Type | Description |\n|----------|--------|-------------------------------------------------------------------------------------------------------------------------|\n| name | String | Example: `ETH`. See the [list of supported currencies](https://docs.wert.io/docs/supported-coins-and-blockchains). |\n| network | String | Example: `ethereum`. See the [list of supported currencies](https://docs.wert.io/docs/supported-coins-and-blockchains). |\n| address | String | The wallet address. Non-valid addresses will be ignored. |\n\n### Listeners\n\n#### Initial event listeners\n\nSimply include the `listeners` object in the following format, where the key is the event type and the value is your callback.\n\n```\nconst widget = new WertWidget({\n ...options,\n listeners: {\n position: data => console.log('step:', data.step),\n },\n});\n```\n\n#### Events\n\n\n \n | Event type | \n Data | \n Description | \n
\n \n | \n close\n | \n \n undefined \n | \n \n An event raised by module when the user closes a widget.\n | \n
\n \n | \n error\n | \n \n\n ```\n {\n name: String\n message: String\n }\n ```\n\n | \n \n Information about an error that occurred in the module.\n | \n
\n \n | \n loaded\n | \n \n undefined \n | \n \n The module has the necessary data and is ready to work. In case extra data was used, it's ready to receive it. This event can be duplicated if there was a 3D Secure redirection.\n | \n
\n \n | \n payment-status\n | \n \n\n ```\n { \n status: String\n payment_id: String \n order_id: String\n tx_id: String // if available\n external_order_id: string;\n }\n ```\n\n | \n \n Possible statuses: pending, canceled, failed, success, failover. Event for each status can be not unique.\n | \n
\n \n | \n position\n | \n \n\n ```\n {\n step: String\n }\n ```\n\n | \n \n Informs about the changes in user's position in the flow.\n | \n
\n \n | \n rate-update\n | \n \n\n ```\n { \n ticker: String, \n fee_percent: String,\n currency_amount: String,\n fee_amount: String,\n commodity_amount: String,\n purchase_amount: String,\n miner_fee: String,\n currency_miner_fee: String\n }\n ```\n\n | \n \n Information on when does the widget updates the rate.\n | \n
\n
\n\n## Widget class methods\n\n| Method | Description |\n|--------------------------|-------------------------------------------|\n| **open** | Mounts module in DOM and makes it visible |\n| **updateTheme** | Switches the theme without reload |\n| **addEventListeners** | Adds event listeners |\n| **removeEventListeners** | Removes event listeners |\n| **close** | Closes the widget |\n\n### Showing the module\n\nAfter creating an instance of the widget class, you can call the `open` method to show the module to the user:\n\n```\nwertWidget.open();\n```\n\n### Closing the module\n\nYou can call the `close` method to close and remove the widget modal at any time:\n\n```\nwertWidget.close();\n```\n\n### Switching themes without reload\n\nTo switch to another theme without reloading the whole widget you can use the `updateTheme` method:\n\n```\nwertWidget.updateTheme({\n theme: 'dark', // undefined — for the default light theme \n brand_color: '#FF0000',\n});\n```\n\nPlease note that this **method should be called only after the widget is fully loaded**.\n\n### Adding event listeners\n\nIf you want to listen to the [widget events](#events), you can use the `addEventListeners` method. Pass an object of \nlisteners to add listeners, potentially rewriting the existing listeners of the same type:\n\n```\nwertWidget.addEventListeners({\n position: data => console.log('step:', data.step),\n});\n```\n\n### Removing event listeners\n\nIf you want to stop listening to the [widget events](#events), you can use the `removeEventListeners` method. Pass an event \ntype, array of \nthe event types or nothing to remove a listener, multiple listeners or all listeners:\n\n```\nwertWidget.removeEventListeners('rate-update');\n```\nor\n```\nwertWidget.removeEventListeners([ 'rate-update', 'payment-status' ]);\n```\nor\n```\nwertWidget.removeEventListeners();\n```\n\n## Additional notes\n\n*Additional information about the library usage*\n\n### Boolean usage\n\nPlease note that any value passed to the property with the boolean type will be considered