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.

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

<script defer="defer" src="bankAccountModule.bundle.js"></script>

<script defer="defer" src="creditCardModule.bundle.js"></script>

<script defer="defer" src="wireProfileModule.bundle.js"></script>

Dynamic script

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

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

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

<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 endpoint.
`beneficiaryToken`	`string`	✅	A unique identifier for the beneficiary. This is the `beneficiaryToken` retrieved when creating a new beneficiary through the Create Beneficiary 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:

window.bankAccountModuleConfig = {
  //JWT token
  authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  lang: "EN"
}

window.creditCardModuleConfig = {
  //JWT token
  authToken: 'ewbyuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryToken: "X89A089B-9E60-4111-9091-2215EVC24080",
  merchantId: "6D099995-E2F9-4A01-BEF1-258EB99C1B77",
  lang: "EN"
}

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:

{
  "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"
}

{
  "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"
}

{
  "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:

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

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

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

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

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

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:

{
  "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"
}

{
  "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"
}

{
  "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:

i-payout Custom Tag

Script Install

📘Script tag

Static Script

Dynamic script

Configuration

Calling the API

API Response

Retrieving the token Using Callback Events

Updating Data

Update API Response

Optional Parameters

📘
Script tag

Retrieving the `token` Using Callback Events