# Component object

`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](https://docs.mollie.com/docs/mollie-components).

# `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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement), or a valid CSS selector such as `#myId` or `.myClass`.

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

```javascript
 cardNumberEl.mount('#cardNumber');
```

```javascript ES6
 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

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

```javascript ES6
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

```javascript
cardNumberEl.unmount();
```

```javascript ES6
cardNumberEl.unmount();
```