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¤cy=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() |
| 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 |
| listeners | No | You can use this if you want to listen to some module events and react to them. | object | - | See the listeners object. |
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/YYYYMM/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 |
| 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.
Updated 15 days ago
Documentation related to this page