NFT Checkout

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.


💡

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 datapage.


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
https://sandbox.wert.io/YOUR_PARTNER_ID/widget/order?address=0x96D5990185022212d367A0e09263B12Dbb4EE06A&commodity=ETH&network=sepolia&commodity_amount=0.005&sc_address=0x3b2305502bd6f8b1eb2ed474ac15c61c6702b18b&sc_input_data=0x9dae76ea000000000000000000000000000000000000000000000000000000000000003700000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000001&signature=D4383F7ACB2FC8D0AF6467FE1C4B2D9821A6311EBEB967ED8729C2CC6B1A669D16DED09C4B2A215DFA15F084CAD36F8AA6F671F78BE7076494BBDF1FD2A4BD04&click_id=d5f9f6dc-4772-4146-b348-327df6df2e9c&widget_layout_mode=Modal&commodity_id=eth_sepolia.sc.ethereum&currency=USD

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

Yes

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

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

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

Smart contract options

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

Default value

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 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

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

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.