Bank Account Module

You can customize the Bank Account Module to integrate better with your website's design style. For this, you can use the optional parameters style and labels when calling the window.bankAccountModuleConfig function.

Labels

Using this parameter, you can customize the label and title values of the component. The labels parameter is an object. The table below presents all available labels you can change:

Property	Type	Descriptions	Default Value
`widgetHeaderTitle`	`string`	The title displayed in the header of the widget container.	Add or Update Wire Profile
`nextButton`	`string`	Label for the "Next" button.	Next
`prevButton`	`string`	Label for the "Previous" button.	Prev
`submitButton`	`string`	Label for the "Submit" button.	Submit
`stepOptions`	`array of strings`	Labels for each step in the multi-step form.	Account Info and Bank Info. There are a total of 2 steps. Pass an array of strings to override the step labels.

Styles

Using this parameter, you can customize the look and feel of the UI Component. The styles parameter is an object. The table below presents all the available property names you can edit:

Prop Name	Definition
`widgetContainer`	Page container or wrapper.
`widgetHeader`	Widget header that contains the Add Bank Information label.
`widgetHeaderTitle`	Label displayed in the widget header.
`nextButton`	Label for the "Next" button.
`formContainer`	Container or wrapper for the form.
`formStepContainer`	A container for form steps. Includes the step labels.
`formStepLabel`	Label for each step in the form.
`formControlsContainer`	The container contains the form controls such as input fields, dropdowns, or date pickers.
`sectionListMessageContainer`	Container for messages related to the section list.
`sectionListMessage`	Message displayed in the section list.
`formControlLabel`	Label for form inputs or dropdowns.
`input`	Form control input field or textbox.
`dropdown`	Form control dropdown.
`validationMessage`	A message displayed for form control validations (e.g., "Invalid account number"). The default color is crimson.

Each property above must receive an object as the value. This value can contain style and cssClass keys:

Key	Type	Description
`style`	`object`	An object containing any valid CSS styles to be applied to the property.
`cssClass`	`string`	A class name to be added to the HTML element.

Below, you can find a quick example of use for both keys:

styles: {
  widgetContainer: {
    style: {
      'border': '2px solid #ccc'
    },
    cssClass: 'my-widget-container'
  },

Full Example

The code below shows a complete example of the window.addBankInformationConfig function, with all available parameters:

window.addBankInformationConfig  = {
  token: 'byuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryReference: "123545745454",
  labels : {
    widgetHeaderTitle: 'Add New Bank Info',
    nextButton: "Next Step",
    prevButton: "Prev Step",
    submitButton: "Final Submit",
    stepOptions: ['Step 1', 'Step 2']
  },
  styles: {
    widgetContainer: {
      style: {
        'border': '2px solid #ccc'
      }
    },
    formContatainer: {
      style: {
        'background-color': 'green'
      }
    },
    formStepContainer:{
      style: {
        'background-color': 'pink'
      }
    },
    formStepLabel:{
      style: {
        'color': 'blue'
      }
    },
    formControlsContainer: {
      style: {
        width: '50%'
      }
    },
    sectionListMessageContainer:{
      style: {
        'list-style-type': 'none'
      }
    },
    sectionListMessage:{
      style: {
        'color': 'crimson',
        'font-style': 'italic'
      }
    },
    input: {
      cssClass: "i-payout-form-control"
    },
    dropdown: {
      cssClass: "i-payout-form-control"
    },
    validationMessage: {
      style: {
        color: 'red'
      }
    }
  }