Skip to content

    Payout Widget

    The widget is a prebuilt UI component that can be embedded in your flow and allows you to send Payouts to cardholders in a simple and secure way.


    US Payout Widget 1

    The Payout Widget features provide the following:

    • Integration that is easy and simple
    • The possibility to embed it anywhere throughout your flow
    • Validation errors and input formatting
    • Responsive design
    • Appearance that can be effortlessly customised

    Use cases

    This component is useful if your business needs to send Payouts to cardholders.

    If you have already saved the cardholder's card in the past, you can trigger the payout directly. To find more information on this process, you may visit Payouts.

    However, with this prebuilt UI component, you will be able to collect card information for a Payout even if:

    • the card has not previously been saved
    • the card has been saved but cannot be used for Payouts

    Styling and Appearance

    You can customize the Widget to fit your flow and brand look. This personalization can be achieved in two ways:

    1. By using our Widget Preview Page to create a preferred combination. - You can use the page to adjust the design after choosing the preference that suits you best. You will be able to see the preview of the widget, and then you can retrieve the HTML and copy it to your website.

    Styling - payout widget

    2. By manually making the adjustments. - An alternative would be for you to make the code adjustments yourself by using the parameters described in the documentation of this portal.

    html - payout widget

    Widget Preview Page

    In this section, we will describe the the main options available on the Widget Preview Page.

    With the Payout Widget UI preview page, you can customise your page in accordance with your brand's look and feel. You can preview the changes while making them. Here are some examples of the customization that can be implemented:

    1. Theme: light or dark mode

    US Payout Widget 3

    2. Background: with or without background

    US Payout Widget 4

    3. Optional agreement checkbox for storing cards

    US Payout Widget 5

    Besides these customising features, you are also able to adjust colours, button placements, fonts, the option to display accepted cards, and other aspects of the design and layout. This can be achieved by specifying details on your own. For more details on the CSS properties and classes available, visit the Technical integration section of this page.

    Technical integration

    The Tokenization Widget can be easily integrated by following these steps:

    1. Add the Tokenization Widget JS library.
    2. Specify configuration attributes of the payment card data tokenization form.
    3. Handle the tokenization result events.

    1. Add the Tokenization Widget JS library

    The first step in the process of integration of the Tokenization Widget is to add the tokenization-widget.js script to your page.


    <script  src=""



    Use the defer attribute to download the script asynchronously to parse the page and execute it after the page has finished parsing.

    2. Specify configuration attributes of the payment card data tokenization widget

    The tokenization-widget is a custom HTML element that enables the integration of the payment card data tokenization widget into your web page.




    Parameter nameTypeSupported valuesMandatoryDescription
    id stringUnique HTML IdA standard HTML attribute used for unique identification of an HTML element within a document.
    merchant_key stringValid merchant Id assigned by the PSPSpecifies the unique merchant ID provided to the merchant by the PSP.
    enum stringPayoutType of the tokenization widget.
    brands enum string or list of enum stringsVisa, MastercardSpecifies accepted card brands.
    field_version enum stringdefault, slimSpecifies the style of the form fields.
    version enum stringdefault, no-backgroundBackground setup of the form.
    border_radius enum stringnone, medium, highSpecifies the corner radius of the form.
    button_position enum stringleft, center, rightDetermines the position of the submit button in the form.
    button_radius enum stringnone, medium, highSets the border radius of the submit button.
    primary_color stringAccepts RGB or hex color valuesSets the primary color of the form.
    font_family enum stringAll Google fontsSets the font of the text in the form.
    lang enum stringEN, DESets the language of the form.
    theme enum stringdark, lightTheme of the form.

    3. Handle the tokenization result events

    The tokenization-widget component emits two custom events:

    • tokenization-success
    • tokenization-error

    These events should be used as triggers for further actions.

    - The tokenization-success event: it is emitted when the tokenization process is successful. The details of the tokenization result can be accessed via e.detail.result.


    const widget = document.querySelector('#id_123');
    widget.addEventListener('tokenization-success', (e) => {
        // e.detail.result contains the details of the tokenization result

    Data structure of tokenization result

        "id": "id",
        "paymentCardDetails": {
            "bin": "41111",

    - The tokenization-error event: it is emitted when an error occurs during the tokenization process. The details of the error can be accessed via e.detail.error.


    const widget = document.querySelector('#id_123');
    widget.addEventListener('tokenization-error', (e) => {
        // e.detail.error contains the error details from the tokenization process

    Was this helpful?

    What was your feeling about it?