Credit Card Module

You can customize the Credit Card 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.creditCardModuleConfig 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`	Title displayed in the widget header.	Add or Update Credit Card
`submitButton`	`string`	Label for the "Submit" button.	Submit

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 or Update Credit Card label.
`widgetHeaderTitle`	Label displayed in the widget header.
`formContainer`	Container or wrapper for 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.
`sectionTitle`	Title for sections within the form, such as Card Information and Billing Address Information.
`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.
`submitButton`	Label for the "Submit" button.

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.addCreditCardConfig function, with all available parameters:

window.addCreditCardConfig   = {
  token: 'byuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng==',
  beneficiaryReference: "123545745454",
  labels : {
    widgetHeaderTitle: 'Add Credit Card Info',
    submitButton: "Final Submit"
  },
  styles: {
    widgetContainer: {
      style: {
        'border': '2px solid #ccc'
      }
    },
    formContatainer: {
      style: {
        'background-color': 'green'
      }
    },
    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'
      }
    }
  }