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.

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 .

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

Example

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

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

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 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.
  • 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

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

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
)