---
updatedAt: 2025-09-18T11:06:24.000Z
agentTools:
  projectIndex: https://developer.i-payout.com/llms.txt
---

# How to Use the UI Components

While each UI Component has particularities found in its respective pages of this documentation, all components available in i-payout can be used similarly. This page guide showcases how to load a UI Component on your website.

## i-payout Custom Tag

The UI Component will be rendered in the `<i-payout>` custom tag. This tag is required as it initializes the component. You need to place the tag inside your HTML, which can be placed wherever you want.

```html
 <i-payout></i-payout>
```

## Script Install

With the custom tag covered, you need to add the component's script to your HTML. You can do this either by adding the static script tag or using a dynamic script tag.

> 📘 Script tag
>
> You must add the script tag after the  `<i-payout>` tag.

### Static Script

Add the following to load each component with a static script:

```html Add Bank Info
<script defer="defer" src="bankAccountModule.bundle.js"></script>
```
```html Add Credit Card
<script defer="defer" src="creditCardModule.bundle.js"></script>
```
```html Wire Profile
<script defer="defer" src="wireProfileModule.bundle.js"></script>
```

### Dynamic script

Use the following as an example to load each component with a dynamic script:

```html Add Bank Info
<script>

    const bankAccountModuleScript = document.createElement('script');

    //addBankInfo.bundle.js src file path 
    bankAccountModuleScript.src = 'bankAccountModule.bundle.js';
    
    bankAccountModuleScript.defer = 'defer';

    //Container you want to append the script. In this example, the body tag.
    const container = document.body;

    container.appendChild(bankAccountModuleScript);

</script>
```
```html Add Credit Card
<script>

    const creditCardModuleScript = document.createElement('script');

    //addBankInfo.bundle.js src file path 
    creditCardModuleScript.src = 'creditCardModule.bundle.js';
    
    creditCardModuleScript.defer = 'defer';

    //Container you want to append the script. In this example, the body tag.
    const container = document.body;

    container.appendChild(creditCardModuleScript);

</script>
```
```html Wire Profile
<script>

    const wireProfileModuleScript = document.createElement('script');

    //wireProfile.bundle.js source file path
    wireProfileModuleScript.src = 'wireProfileModule.bundle.js';
    
    wireProfileModuleScript.defer = 'defer';

    //Container where you want to append the script. In this example, the body tag.
    const container = document.body;

    container.appendChild(wireProfileModuleScript);

</script>
```

## Configuration

Now, you need to call the desired method, passing at least the required parameters. With this completed, the UI Component will be ready and displayed in your application.

| Parameter          | Type     | Required | Description                                                                                                                                                                            |
| :----------------- | :------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `token`            | `string` | ✅        | The authentication token used exclusively for drop-in components. You can obtain this token with the [Get Embedded Token](https://developer.i-payout.com/reference/get-embedded-token-2) endpoint.                          |
| `beneficiaryToken` | `string` | ✅        | A unique identifier for the beneficiary. This is the `beneficiaryToken` retrieved when creating a new beneficiary through the [Create Beneficiary](https://developer.i-payout.com/reference/create-beneficiary-2) endpoint. |
| `merchantId`       | `string` | ✅        | The merchant's unique identifier.                                                                                                                                                      |
| `lang`             | `string` |          | Language property. This value defaults to `EN`.                                                                                                                                        |
| `style`            | `object` | -        | An object defining the style settings.                                                                                                                                                 |
| `labels`           | `object` | -        | An object containing custom labels for the UI.                                                                                                                                         |

### Calling the API

Below, you will find examples of how to use the required parameters:

```javascript Add Bank Info
window.bankAccountModuleConfig = {
  //JWT token
  authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  lang: "EN"
}
```
```javascript Add Credit Card
window.creditCardModuleConfig = {
  //JWT token
  authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  lang: "EN"
}
```
```javascript Wire Profile
window.wireProfileModuleConfig = {
  //JWT token
  authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  lang: "EN"
}
```

### API Response

Following the request, the API will return a JSON, including the `token` and additional information. This token can be used later for other methods related to the entity created here. If you add a bank account, you will use this token to update or retrieve this same account data. The following is a JSON example of this response:

```json Add Bank Info
{
  "data": {
    //This property is required to fetch and update bank account informations later 
    "token": "c329023e-4a55-46fa-b5e9-039602ab2eb8",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Bank account added successfully.",
  "statusCode": 0,
  "logIdentifier": "062759676e2e4814a7b9126c6dfa539f"
}
```
```json Add Credit Card
{
  "data": {
    //This token property value is required to fetch and update credit card informations later
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Credit card added successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
}
```
```json Wire Profile
{
  "data": {
    //This token property value is required to fetch and update wire profile account informations later
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Wire profile created successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
}
```

### Retrieving the `token` Using Callback Events

You can add a callback event to the API call to retrieve the `token`. For this, you need to add a callback function to the `onComplete` key of the `events` parameter of the call. The code below exemplifies this feature:

```html Add Bank Info
<body>
  <!--Container-->
  <i-payout></i-payout>

  <script id="add-bank-call-back-event">

    //The function onAddBankAccount is a callback event that is passed to the bundle config in order to receive the `token` value. The function gets executed when the user's bank account has been added or updated.
    const onAddBankAccount = (error,response) => {
      //the two parameters - error and response both are object and have same child properties - statusCode & message. statusCode contains the api response code and message contains the token and some additional informations. Response code is given in section-4(c)

      if(!error){
        console.table(response);
        //check api response in section-4(c) 
      }
      else
        alert(error.statusCode + ' '+error.message);
    }

  </script>

  <!--Bank Account Module Config-->
  <script id="bank-account-module-config">
    window.bankAccountModuleConfig  = {
      authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
      beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
      merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
      lang: "EN",
      evenst: {
        onComplete: onAddBankAccount.bind(this) //passing callback-event in order to retrieve the token.
      }
    }
  </script>

  <!--Bank Account Module Bundle Script-->
  <script defer="defer" src="bankAccountModule.bundle.js"></script>
</body>
```
```html Add Credit Card
<body>
  <!--Container-->
  <i-payout></i-payout>

  <script id="callback-event">

    //The function onAddCreditCard is a callback event that is passed to the bundle config in order to receive the `token` value. The function gets executed when the user's credit card has been added or updated.
    const onAddCreditCard = (error,response) => {
      //the two parameters - error and response both are object and have same child properties - statusCode & message. statusCode contains the api response code and message contains the token and some additional informations. Response code is given in section-4(c)

      if(!error){
        console.table(response);
        //check api response in section-4(c) 
      }
      else
        alert(error.statusCode + ' '+error.message);
    }

  </script>

  <!--Credit Card Module Config-->
  <script id="credit-card-module-config">
    window.creditCardModuleConfig  = {
      authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
      beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
      merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
      lang: "EN",
      evenst: {
        onComplete: onAddCreditCard.bind(this) //passing callback-event in order to retrieve the token.
      }
    }
  </script>

  <!--Credit Card Module Bundle Script-->
  <script defer="defer" src="creditCardModule.bundle.js"></script>
</body>
```
```html Wire Profile
<body>
  <!--Container-->
  <i-payout></i-payout>

  <script id="callback-event">

    //The function onAddWireProfile is a callback event that is passed to the bundle config in order to receive the `token` value. The function gets executed when the user's wire profile account has been added or updated.
    const onAddWireProfile = (error,response) => {
      //the two parameters - error and response both are object and have same child properties - statusCode & message. statusCode contains the api response code and message contains the token and some additional informations. Response code is given in section-4(c)

      if(!error){
        console.table(response);
        //check api response in section-4(c) 
      }
      else
        alert(error.statusCode + ' '+error.message);
    }

  </script>

  <!--Wire Profile Module Config-->
  <script id="wire-profile-module-config">
    window.wireProfileModuleConfig  = {
      authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
      beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
      merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
      lang: "EN",
      evenst: {
        onComplete: onAddWireProfile.bind(this) //passing callback-event in order to retrieve the token.
      }
    }
  </script>

  <!--Wire Profile Module Bundle Script-->
  <script defer="defer" src="wireProfileModule.bundle.js"></script>
</body>
```

### Updating Data

With the retrieved token, you can now update the data from the previously created entity. For example, you can use the token you retrieved when adding a bank account to update it later on. To do this, you need to send the `token` inside the request's body, as presented on the examples below:

```javascript Add Bank Info
window.bankAccountModuleConfig = {
  authToken: 'eybyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  //token value is passed to the bankAccountToken parameter. Please check section- 4(c) and 4(d) - how to retrieve this token value
  bankAccountToken: "b86f2096-237a-4059-8329-1bbcea72769b",
  lang: "EN"
}
```
```javascript Add Credit Card
window.creditCardModuleConfig = {
  authToken: 'eybyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  //token value is passed to the creditCardToken parameter. Please check section- 4(c) and 4(d) - how to retrieve this token value
  creditCardToken: "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
  lang: "EN"
}
```
```javascript Wire Profile
window.wireProfileModuleConfig = {
  authToken: 'eybyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  //token value is passed to the wireProfileToken parameter. Please check section- 4(c) and 4(d) - how to retrieve this token value
  wireProfileToken: "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
  lang: "EN"
}
```

### Update API Response

The following are examples of responses for each update method used above:

```json Add Bank Info
{
  "data": {
    "token": "c329023e-4a55-46fa-b5e9-039602ab2eb8",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Bank account updated successfully.",
  "statusCode": 0,
  "logIdentifier": "062759676e2e4814a7b9126c6dfa539g"
}
```
```json Add Credit Card
{
  "data": {
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Credit card updated successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
} 
```
```json Wire Profile
{
  "data": {
    "token": "dc2eb0bf-63bc-463c-b104-8c193a3499b4",
    "isDocumentVerificationRequired": false,
    "lstErrMessagesReqFields": [],
    "code": 0,
    "desc": "",
    "msgType": 0,
    "expire_in_seconds": 0
  },
  "isSuccess": true,
  "message": "Wire profile updated successfully",
  "statusCode": 0,
  "logIdentifier": "5ea63eb299a949c99794beba934021c5"
}
```

## Optional Parameters

For detailed information on using `style` and `labels` refer to each UI Component's respective page:

* [Bank Account Module](https://developer.i-payout.com/docs/bank-account-module)
* [Credit Card Module](https://developer.i-payout.com/docs/credit-card-module)
* [Wire Profile Module](https://developer.i-payout.com/docs/wire-profile-module)