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();