---
updatedAt: 2026-09-02T10:15:16.000Z
agentTools:
  projectIndex: https://docs.wert.io/llms.txt
---

# NFT Checkout

# Initialize the widget

<Callout icon="❗️" theme="error">
  To ensure the security and stability of your integration, please adhere to the following mandatory guidelines:

  **Official SDK Only**

  Using our <Anchor target="_blank" href="https://www.npmjs.com/package/@wert-io/widget-initializer">official SDK</Anchor> is the **ONLY** supported method for initializing the widget.

  **React Projects**

  If you are building with React, please use our <Anchor target="_blank" href="https://www.npmjs.com/package/@wert-io/module-react-component">dedicated wrapper</Anchor>.

  **Mobile Integration**

  For mobile applications, create a web app utilizing our <Anchor target="_blank" href="https://www.npmjs.com/package/@wert-io/widget-initializer">SDK</Anchor> 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 <Anchor target="_blank" href="https://github.com/wert-io/widget-integration-example/blob/master/src/buy-nft.ts">GitHub Integration Examples</Anchor> for reference implementations.
</Callout>

<br />

<Callout icon="💡" theme="default">
  ### 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](https://docs.wert.io/docs/forming-input-data) page.
</Callout>

<br />

Once SDK is installed, you can use the following code snippet to initialize the payment module:

```javascript
// 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
```

<br />

# Options

Here are the options you can pass to the widget.

## General options

<Table align={["left","left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Property
      </th>

      <th>
        Required
      </th>

      <th>
        Description
      </th>

      <th>
        Data Type
      </th>

      <th>
        Default value
      </th>

      <th>
        Possible values
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        partner_id
      </td>

      <td>
        Yes
      </td>

      <td>
        Provided when you register as a partner.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        -
      </td>
    </tr>

    <tr>
      <td>
        origin
      </td>

      <td>
        In sandbox
      </td>

      <td>
        Initializes the module in a sandbox/production environment.
      </td>

      <td>
        string
      </td>

      <td>
        https://widget.wert.io
      </td>

      <td>
        https://sandbox.wert.io
      </td>
    </tr>

    <tr>
      <td>
        click_id
      </td>

      <td>
        No
      </td>

      <td>
        Unique identifier for the order, which helps you track it.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        `uuid_v4()`
      </td>
    </tr>

    <tr>
      <td>
        currencies
      </td>

      <td>
        No
      </td>

      <td>
        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'])
      </td>

      <td>
        string
      </td>

      <td>

      </td>

      <td>
        (['USD', 'EUR'])
      </td>
    </tr>

    <tr>
      <td>
        redirect_url
      </td>

      <td>
        No
      </td>

      <td>
        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.
      </td>

      <td>
        URL string (with protocol)
      </td>

      <td>
        -
      </td>

      <td>
        https://origin.us/item_id
      </td>
    </tr>

    <tr>
      <td>
        support_url
      </td>

      <td>
        No
      </td>

      <td>
        Full url string (with protocol). This link will be used for helping users with failed orders.
      </td>

      <td>
        URL string (with protocol)
      </td>

      <td>

      </td>

      <td>
        https://partner.com/support
      </td>
    </tr>

    <tr>
      <td>
        listeners
      </td>

      <td>
        No
      </td>

      <td>
        You can use this if you want to listen to some module events and react to them.
      </td>

      <td>
        object
      </td>

      <td>
        -
      </td>

      <td>
        See the <a href="https://docs.wert.io/docs/listerners-object">listeners object</a>
      </td>
    </tr>

    <tr>
      <td>
        payment_method
      </td>

      <td>
        No
      </td>
      <td>
        Pre-selected payment method shown first, or an ordered list of payment methods to display.
      </td>

      <td>
        string | string[]
      </td>

      <td>
        -
      </td>

      <td>
        card, google-pay, apple-pay, sepa, cash-app
      </td>
    </tr>

    <tr>
      <td>
        payment_method_restriction
      </td>

      <td>
        No
      </td>

      <td>
        If true, shows only the method specified in payment_method.
      </td>

      <td>
        boolean
      </td>

      <td>
        false
      </td>

      <td>
        true, false
      </td>
    </tr>

    <tr>
      <td>
        hide_fee_breakdown
      </td>

      <td>
        No
      </td>

      <td>
        Hides fee details for all payment methods and only the fee value is shown.
      </td>

      <td>
        boolean
      </td>

      <td>
        false
      </td>

      <td>

      </td>
    </tr>
<tr>
      <td>
        payment_method_restriction
      </td>

      <td>
        No
      </td>

      <td>
        If true, shows only the method specified in payment_method.
      </td>

      <td>
        boolean
      </td>

      <td>
        false
      </td>

      <td>
        true, false
      </td>
    </tr>

    <tr>
      <td>
        user_id
      </td>

      <td>
        No
      </td>

      <td>
       The User ID for the associated profile. When passed, skips phone number entry screen, sends otp to attached phone number and lands user on otp entry screen. 
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
01KQWHEJNSY
      </td>
    </tr>
  </tbody>
</Table>

## Smart contract options

<Table align={["left","left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Property
      </th>

      <th>
        Required
      </th>

      <th>
        Description
      </th>

      <th>
        Data Type
      </th>

      <th>
        Default value
      </th>

      <th>
        Possible values
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        sc_address
      </td>

      <td>
        Yes
      </td>

      <td>
        The address of the smart contract.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        -
      </td>
    </tr>

    <tr>
      <td>
        sc_input_data
      </td>

      <td>
        Yes
      </td>

      <td>
        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.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        See

        [Forming input data](https://docs.wert.io/docs/forming-input-data)
      </td>
    </tr>

    <tr>
      <td>
        signature
      </td>

      <td>
        Yes
      </td>

      <td>
        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.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        See

        [Generate signed data](https://docs.wert.io/docs/generate-signed-data)
      </td>
    </tr>
  </tbody>
</Table>

## Pre-filled user data

<Table align={["left","left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Property
      </th>

      <th>
        Required
      </th>

      <th>
        Description
      </th>

      <th>
        Data Type
      </th>

      <th>
        Default value
      </th>

      <th>
        Possible values
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        country_of_residence
      </td>

      <td>
        No
      </td>

      <td>
        User’s country of residence.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        <Anchor target="_blank" href="https://www.nationsonline.org/oneworld/country_code_list.htm">alpha2</Anchor> code of the country
      </td>
    </tr>

    <tr>
      <td>
        state_of_residence
      </td>

      <td>
        No
      </td>

      <td>
        User’s state of residence (for USA).
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        <Anchor target="_blank" href="https://www.iso.org/obp/ui/#iso:code:3166:US">alpha2</Anchor> state
      </td>
    </tr>

    <tr>
      <td>
        date_of_birth
      </td>

      <td>
        No
      </td>

      <td>
        User’s date of birth.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        `DD/MM/YYYY` `MM/DD/YYYY` (USA)
      </td>
    </tr>

    <tr>
      <td>
        email
      </td>

      <td>
        No
      </td>

      <td>
        User’s email address.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        [test@test.com](mailto:test@test.com)
      </td>
    </tr>

    <tr>
      <td>
        full_name
      </td>

      <td>
        No
      </td>

      <td>
        The user’s first and last name.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        min 3, max 69 letters; `RegExp(/(\\w+\\s)\\w+/)`
      </td>
    </tr>

    <tr>
      <td>
        phone
      </td>

      <td>
        No
      </td>

      <td>
        User’s phone number in international format (E. 164 standard). The ‘+’ is optional.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        +11014321111
      </td>
    </tr>

    <tr>
      <td>
        card_country_code
      </td>

      <td>
        No
      </td>

      <td>
        card billing address <Anchor target="_blank" href="https://www.nationsonline.org/oneworld/country_code_list.htm">alpha2</Anchor> country code
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        US
      </td>
    </tr>

    <tr>
      <td>
        card_city
      </td>

      <td>
        No
      </td>

      <td>
        card billing address city
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        Los Angeles
      </td>
    </tr>

    <tr>
      <td>
        card_state_code
      </td>

      <td>
        No
      </td>

      <td>
        card billing address <Anchor target="_blank" href="https://www.iso.org/obp/ui/#iso:code:3166:US">alpha2</Anchor> state code (For US)
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        CA
      </td>
    </tr>

    <tr>
      <td>
        card_post_code
      </td>

      <td>
        No
      </td>

      <td>
        card billing address postal code
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        12345
      </td>
    </tr>

    <tr>
      <td>
        card_street
      </td>

      <td>
        No
      </td>

      <td>
        card billing address street
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        Main street 1
      </td>
    </tr>
  </tbody>
</Table>

## Widget customization

<Table align={["left","left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Property
      </th>

      <th>
        Required
      </th>

      <th>
        Description
      </th>

      <th>
        Data Type
      </th>

      <th>
        Default value
      </th>

      <th>
        Possible values
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        lang
      </td>

      <td>
        No
      </td>

      <td>
        Language of the widget.
      </td>

      <td>
        string
      </td>

      <td>
        en
      </td>

      <td>
        \*\*
      </td>
    </tr>

    <tr>
      <td>
        skip_init_navigation
      </td>

      <td>
        No
      </td>

      <td>
        By default, the module suggests the nearest purchase route based on given parameters. Setting to ‘true’ skips this logic.
      </td>

      <td>
        boolean
      </td>

      <td>
        undefined
      </td>

      <td>
        true
      </td>
    </tr>

    <tr>
      <td>
        theme
      </td>

      <td>
        No
      </td>

      <td>
        Module’s theme color.
      </td>

      <td>
        string
      </td>

      <td>
        undefined
      </td>

      <td>
        dark
      </td>
    </tr>

    <tr>
      <td>
        brand_color
      </td>

      <td>
        No
      </td>

      <td>
        Custom brand color that affects the following components: primary buttons, tooltips, steppers, tabs, checkboxes, toasts, pie countdowns.
      </td>

      <td>
        string
      </td>

      <td>
        -
      </td>

      <td>
        `#FF0000`
      </td>
    </tr>

    <tr>
      <td>
        is_crypto_hidden
      </td>

      <td>
        No
      </td>

      <td>
        It hides crypto mentions and exchange rates. Please reach out to us to enable this feature for you.

        Check [boolean usage](https://docs.wert.io/docs/nft-checkout#boolean-usage) below.
      </td>

      <td>
        boolean
      </td>

      <td>
        undefined
      </td>

      <td>
        true
      </td>
    </tr>
  </tbody>
</Table>

(\*\*) **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`.