Mollie object

Mollie.js

https://js.mollie.com/v1/mollie.js

The Mollie object in the Mollie JavaScript SDK is used to initialize the Mollie integration.

For a step-by-step tutorial on integrating Mollie Components, refer to the Mollie Components guide.

Mollie(profileId[, options])

profileIdstringrequired

Your profile ID, for example pfl_3RkSN1zuPE.

optionsoptions objectoptional

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

Show child parameters

localestringoptional

Allows you to preset the language to be used. When this parameter is not provided, the browser language will be used instead. If we also not support the browser language then it will be shown in English. We recommend you provide the language tag, since 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

testmodebooleanoptional

Set to true to enable test mode. Test tokens will be recognizable by the test suffix, e.g. tkn_123abctest.

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 endpoint.

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

Javascript

 form.addEventListener('submit', e => {
   e.preventDefault();

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

ES6

form.addEventListener('submit', async e => {
  e.preventDefault();

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

mollie.createComponent(type[, options])

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

Refer to Component object to see which methods are available on the object.

For a credit card integration you need to create four components — one for each card holder data field.

typestringrequired

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

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

Note

Value "card" can not be used together with other ones (because it already contain all of the others). For more info, see Mollie Components.

optionsoptions objectoptional

The options you want to give to Mollie Components.

Show child parameters

stylesstyles objectoptional

See Styling Mollie Components.

componentscomponents objectoptional

Only available for "card" type. Allows you to customize individual Components inside the card component.

Show child parameters

cardHolderindividualComponent objectoptional

Allows you to customize card holder component inside the card component.

Show child parameters

labelstringoptional

Customize label for this component

cardNumberindividualComponent objectoptional

Allows you to customize card number component inside the card component.

Show child parameters

labelstringoptional

Customize label for this component

verificationCodeindividualComponent objectoptional

Allows you to customize verification code component inside the card component.

Show child parameters

labelstringoptional

Customize label for this component

expiryDateindividualComponent objectoptional

Allows you to customize expiration date component inside the card component.

Show child parameters

labelstringoptional

Customize label for this component

Example for cardHolder component

 var options = {
   styles: {
     base: {
       color: '#eee',
       fontSize: '10px',
       '::placeholder': {
         color: 'rgba(68, 68, 68, 0.2)',
       }
     }
   }
 }

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

Example for card component

 var options = {
   styles: {
     base: {
       color: '#eee',
       fontSize: '10px',
       '::placeholder': {
         color: 'rgba(68, 68, 68, 0.2)',
       }
     }
   },
   components: {
     cardHolder: {
       label: 'Custom card holder label'
     },
     verificationCode: {
       label: 'Custom verification code label'
     }
   }
 }

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