Customizing payment components


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.

Customizing 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 class selectors

CSS class What it does
.msp-container-ui Selects the payment component
.msp-ui-payment-form Selects the payment form
.msp-ui-method-header Selects the payment .msp-ui-method-image and heading
.msp-ui-method-image Selects the payment method logo
.msp-ui-form-group Contains the .msp-ui-form-control and .msp-ui-form-label
.msp-ui-form-label Selects the field labels in the payment form
.msp-ui-form-control Selects the fields in the payment form
.msp-ui-row Contains two .msp-ui-col-2 elements
.msp-ui-col-2 Contains .msp-ui-form-group
.msp-ui-separator Selects 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:

Feedback

Propose a change on GitHubexternal-link-icon or
send an email to [email protected]

Other languages

For an explanation in another language, contact your account manager.