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 in your:

• Checkout page
• Dashboard

Via your checkout page

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	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 gray 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:

Via the dashboard

1. Sign in to your MultiSafepay dashboard .
2. Go to Sites, and then click the relevant site.
3. On the Site profile page, under Style your checkout solution, for Payment component click Edit.
4. On the Components settings page, under Preview - Default, select whether you want to:

• Apply the styling from another saved template.
• Edit an existing template.
• Style a new single payment method component.
• Style a new multiple payment method component.
• View the style in JSON format.

5. Under Configure page style, style the:

   Container

   
   

   • To set the color of the container background, in the Background color field, enter the Hex color .
   • To set the font for the field labels, from the Font family list, select a font.
   Fields

   
   

   • Set the Hex color for the background, placeholder text, label text, text entered by the customer, and the borders.
   • Set the size in pixels (px) for the labels, font, border radius, and box shadow.
   Settings for iDEAL issuers

   
   

   • To add the default padding, border, and labels for the issuers container, select the Embed mode checkbox.
   • To specify the layout of the issuers, from the iDEAL issuer selection list, choose Select button, List, or Dropdown.

6. To set this as your default template, select the Set as default template checkbox.

7. In the Save template as field, enter the name of the template (used as the template_id), and then click Submit settings.

Top of page