Mollie Components reference

The Mollie object is used to initialize Mollie Components.

Mollie(profileId[, options])

profileId

string
required
Your Profile Id, for example pfl_3RkSN1zuPE.

options

options object
optional

Any options you want to set. E.g. { locale: "nl_NL"}

locale

string
optional

Allows you to preset the language to be used. When this parameter is not provided, the browser language will be used instead. We recommend you provide the language tag because this is usually more accurate.

Possible values: en_US nl_NL nl_BE fr_FR fr_BE de_DE de_AT de_CH es_ES ca_ES pt_PT it_IT nb_NO sv_SE fi_FI da_DK is_IS hu_HU pl_PL lv_LV lt_LT

testmode

boolean
optional
Set to true to enable test mode.

styles

styles object
optional
See Styling Mollie Components.

mollie.createToken()

Calling the createToken method will receive a token if successful. This token must then be sent to your back end where it can be passed as the cardToken parameter to the Create Payment API.

This method has to be invoked from the submit event of your checkout form:

Javascript

1
2
3
4
5
6
7
 form.addEventListener('submit', e => {
   e.preventDefault();

   mollie.createToken().then(function(result) {
     // Handle the result this can be either result.token or result.error.
   });
 });

ES6

1
2
3
4
5
form.addEventListener('submit', async e => {
  e.preventDefault();

  const { token, error } = await mollie.createToken();
});

mollie.createComponent(type[, options])

This will create the Components which the shopper uses to enter the card holder data. After creating, the components should be mounted in your checkout.

You need to create four components, one for each card holder data field.

type

string
required

The createComponent method will create an component ready to be mounted.

Possible values: "cardHolder" "cardNumber" "verificationCode" "expiryDate"

options

options object
optional

The options you want to give to Mollie Components. E.g. { styles: fontSize: "10px"}

styles

styles object
optional
See Styling Mollie Components.

Javascript

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

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

ES6

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

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

Component methods

component.mount(targetElement)

Adds the component to the DOM, meaning it will become visible for the user from this point onwards.

1
2
 <label for="card" >Card label</div>
 <div id="card"></div>

targetElement

HTMLelement|string
required
An HTMLElement or a valid CSS Selector such as #id and .class.

Javascript

1
 cardNumberEl.mount('#card');

ES6

1
 cardNumberEl.mount('#card');

component.addEventListener(event, callback)

Components can listen to several events. The callback receives an object with all the related information.

event

string
required

Subscribe to the event that are emitted by Mollie js.

Possible values: "blur" "focus" "change"

callback

function
required
A function that will be called whenever the event is been emitted.

Javascript

1
2
 var callback = function(event) { console.log('We need a real world example here', event.type) }
 cardNumberEl.addEventListener('change', callback);

ES6

1
2
 const callback = (event)=> { console.log('We need a real world example here', event.type) }
 cardNumberEl.addEventListener('change', callback);

component.unmount()

Removes the component from the DOM. Note that state — such as input values — is not preserved when re-mounting.

Javascript

1
 cardNumberEl.unmount();

ES6

1
 cardNumberEl.unmount();