# Mollie object

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

# `Mollie(profileId[, options])`

#### `profileId` *string*

> Your profile ID, for example `pfl_3RkSN1zuPE`.

#### `options` *object (optional)*

Any options you want to set. For example: `{locale: "nl_NL"}`.

# `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](create-payment) .

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

## Example

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

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

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

#### `type` *string*

> Create a component of the chosen type.
>
> Possible values:
>
> * `card` — create a full card component with a card holder name, card number, verification code, and expiry date field.
> * `cardHolder` — a component for the customer to fill out the card holder name.
> * `cardNumber` — a component for the customer to fill out their card number.
> * `verificationCode` — a component for the customer to fill out their card's verification code.
> * `expiryDate` — a component for the customer to fill out their card's expiry date.

#### `options` *object (optional)*

> An optional object of options specific to the chosen type of component.
>
> Available options:
>
> * `styles` — see [Styling Mollie Components](https://docs.mollie.com/docs/styling-mollie-components).
> * `components` — available for the `card` type to customize individual components.
>   * `cardHolder`
>     * `label` — customize the card holder component label.
>   * `cardNumber`
>     * `label` — customize the card number component label.
>   * `verificationCode`
>     * `label` — customize the verification code component label.
>   * `expiryDate`
>     * `label` — customize the expiry date component label.

## Example for `cardHolder` component

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

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