Component object

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

A Component object in the Mollie JavaScript SDK references an embeddable checkout component, such as a credit card number field or a credit 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.

1
2
 <label for="cardNumber">Card number</label>
 <div id="cardNumber"></div>
targetElementHTMLElement|stringrequired
An HTMLElement or a valid CSS Selector such as #id and .class.

Javascript

1
 cardNumberEl.mount('#cardNumber');

ES6

1
 cardNumberEl.mount('#cardNumber');

component.addEventListener(event, callback)

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

eventstringrequired

Subscribe to the event that are emitted by Mollie js.

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

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