Payment component customization

After integrating the payment component, the default user interface (UI) styling is applied.

You can customize the styling to match your brand's visual identity, including fonts, colors, and layout.

How to customize the UI

To edit the default styling of the component:

  1. Select each CSS class you want to edit.

  2. Add the relevant CSS properties and set the values.

    CSS class selectors
    CSS classWhat it does
    .msp-container-uiSelects the payment component
    .msp-ui-payment-formSelects the payment form
    .msp-ui-method-headerSelects the payment .msp-ui-method-image and heading
    .msp-ui-method-imageSelects the payment method logo
    .msp-ui-form-groupContains the .msp-ui-form-control and .msp-ui-form-label
    .msp-ui-form-labelSelects the field labels in the payment form
    .msp-ui-form-controlSelects the fields in the payment form
    .msp-ui-rowContains two .msp-ui-col-2 elements
    .msp-ui-col-2Contains .msp-ui-form-group
    .msp-ui-separatorSelects the space before and after the form fields

Example

Add the following to your CSS to edit the payment component to add a:

  • 5-pixel border-radius to the form fields

  • Shadow to the fields on focus

  • 10-pixel border-radius to the component container

  • Light grey background-color to the component container

    .msp-ui-form-control {
      border-radius: 5px
    }
    
    .msp-ui-form-control:focus {
      box-shadow: 0 7px 7px rgba(0, 15, 45, 0.2)
    }
    
    .msp-container-ui {
      border-radius: 10px;
      background-color: #f8f9fa;
    }
    

The payment component now looks like this:



💬

Support

Email [email protected]

Top of page


Did this page help you?