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

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:

Overview

Payment components