Initialize the widget

❗️
To ensure the security and stability of your integration, please adhere to the following mandatory guidelines:
Official SDK Only
Using our official SDK is the ONLY supported method for initializing the widget.
React Projects
If you are building with React, please use our dedicated wrapper.
Mobile Integration
For mobile applications, create a web app utilizing our SDK and embed the web app within your native app using a WebView or equivalent technology.
No Direct Redirects
Opening the widget via a direct redirect link is not supported.
💡 Need a head start?
Check out our GitHub Integration Examples for reference implementations.

💡
Did you know?
Our NFT checkout can also be used for any smart contract interaction such as facilating token swaps for DeFi projects. Basically anything you could do from your own wallet, we can do from ours but on on behalf of the user paying with fiat, and the best part, the end user is still the recipient of the transaction! Check out some great examples here at our Forming input data page.

Once 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

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()`
currencies	No	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'])	string		(['USD', 'EUR'])
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.	URL string (with protocol)		https://origin.us/item_id
support_url	No	Full url string (with protocol). This link will be used for helping users with failed orders.	URL string (with protocol)		https://partner.com/support
listeners	No	You can use this if you want to listen to some module events and react to them.	object		See the listeners object
payment_method	No	If set, this method will be pre-selected and shown first in the list of available methods. Other methods will still be available unless payment_method_restriction is used.	string	card	card, google-pay, apple-pay, sepa
payment_method_restriction	No	If true, the widget will show only the method specified in payment_method (if it’s available). If that method isn’t available, the widget will fall back to showing all available methods.	boolean	false	true, false
hide_fee_breakdown	No	Hides fee details for all payment methods and only the fee value is shown.	boolean	false

Smart contract options

Property	Required	Description	Data Type	Possible values
sc_address	Yes	The address of the smart contract.	string
sc_input_data	Yes	Input data that will be used for the smart contract execution (in hex format). For Tezos, this must be Michelson code passed as JSON transformed into hex format.	string	See Forming input data
signature	Yes	A digital signature encrypts the request, ensuring you have sent it. The private key stored on your backend signs the request, and the public key saved in our system decrypts it.	string	See Generate signed data

Property

Required

Description

Data Type

Default value

Possible values

sc_address

Yes

The address of the smart contract.

string

sc_input_data

Yes

Input data that will be used for the smart contract execution (in hex format).

For Tezos, this must be Michelson code passed as JSON transformed into hex format.

string

See

Forming input data

signature

Yes

A digital signature encrypts the request, ensuring you have sent it. The private key stored on your backend signs the request, and the public key saved in our system decrypts it.

string

See

Generate signed data

Pre-filled user data

Property	Required	Description	Data Type	Possible values
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 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	**
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
brand_color	No	Custom brand color that affects the following components: primary buttons, tooltips, steppers, tabs, checkboxes, toasts, pie countdowns.	string		`#FF0000`
is_crypto_hidden	No	It hides crypto mentions and exchange rates. Please reach out to us to enable this feature for you. Check boolean usage below.	boolean	undefined	true

(**) Supported Languages: en - English, fr - French, ja - Japanese, es - Spanish, ko - Korean, zh - Chinese, tr - Turkish, de - German, ka - Georgian, th - Thai

Boolean usage

So that you know, any value passed to a property with the boolean type is considered true. Example: is_crypto_hidden: "test" is equal to is_crypto_hidden: true.