Styling Mollie Components

Mollie Components can be fully styled to ensure a smooth blend-in with your checkout.

Most of the styling should be applied to the .mollie-component container instead of passing styling to the actual Component. See the Components Examples repository for more info.

Styling can be applied to Components in the three states base, valid and invalid:

base
The state of the Component when your customer has not entered any data yet or is entering data.
valid
The state of the Component when your customer has entered valid data, such as a valid credit card number.
invalid
The state of the Component when your customer entered invalid data, such as an expiry date in the past.

For each of these there is an set of properties you can use:

  • backgroundColor of type color
  • color of type color
  • fontSize of type number
  • fontWeight of type string|number
  • letterSpacing of type number
  • lineHeight of type number
  • textAlign of type string
  • textDecoration of type string
  • textTransform of type string

Every property has one or more types. Multiple types are indicated by a | character. We don’t allow URL , http, https and www.

  • string A valid string, spaces aren’t allowed,
  • number A valid CSS number with an optional unit px, em or rem.
  • color We accept colors as #f00, #ff0000, rgb(a), hsl(a) and transparent,

We allow the following pseudo-classes. These will be autoprefixed and can be nested with the above listed properties.

  • ::placeholder

Example

Using styles with mollie.createComponent(type[, options]):

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 var options = {
   styles : {
     base: {
       color: '#eee',
       fontSize: '10px',
       '::placeholder' : {
         color: 'rgba(68, 68, 68, 0.2)',
       }
     },
     valid: {
       color: '#090',
     }
   }
 };

 var cardNumberEl = mollie.createComponent('cardNumber', options)