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

A Component object in the Mollie JavaScript SDK references an embeddable checkout component, such as a card number field or a card expiry date field.

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

component.mount(targetElement)

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

targetElement HTMLElement | string

An HTMLElement, or a valid CSS selector such as #myId or .myClass.

 <label for="cardNumber">Card number</label>
 <div id="cardNumber"></div>

 cardNumberEl.mount('#cardNumber');

 cardNumberEl.mount('#cardNumber');

component.addEventListener(event, callback)

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

event string

Subscribe to the events that are emitted by Mollie.js.

Possible values: blur focus change

callback function

A function that will be called whenever an event of the chosen type is emitted.

Example

var callback = function(event) {
  console.log('Received event', event.type)
}
 
cardNumberEl.addEventListener('change', callback);

const callback = (event) => {
  console.log('Received event', 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.

Example

cardNumberEl.unmount();

cardNumberEl.unmount();