Wire Profile Module

You can customize the Add Wire Profile UI Component to integrate better with your website's design style. For this, you can use the optional parameters style and labels when calling the window.wireProfileModuleConfig 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.	'Step 1', 'Step 2', 'Step 3', 'Step 4'. There is a total of 4 steps. Pass an array of strings to override the 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:

Property	Definition
`widgetContainer`	Page container or wrapper.
`widgetHeader`	The header of the widget that contains the Add or Update Wire Profile title.
`widgetHeaderTitle`	Title displayed in the widget header.
`nextButton`	Label for the "Next" button.
`formContainer`	Container or wrapper for the form.
`formStepContainer`	Container for the form steps, which includes the step labels.
`formStepLabel`	Label for each step in the form.
`formControlsContainer`	Container for 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.wireProfileConfig function, with all available parameters:

window.wireProfileConfig  = {
  token: 'byuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryReference: "123545745454",
  labels : {
    widgetHeaderTitle: 'Wire Profile',
    nextButton: "Next Step",
    prevButton: "Prev Step",
    submitButton: "Final Submit",
    stepOptions: ['1st Step', '2nd Step', '3rd Step', '4th Step']
  },
  styles: {
    widgetContainer: {
      style: {
        'border': '2px solid #ccc'
      },
      cssClass: 'my-widget-container'
    },
    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'
      }
    }
  }