Events

You can subscribe to Microform Integration events and obtain them through event listeners. Using these events, you can easily enable your checkout user interface to respond to any state changes as soon as they happen.

Some events might return data to the event listener’s callback as described in the next section.

Subscribing to Events

Using the .on() method provided in the microformInstance object, you can easily subscribe to any of the supported events.

For example, you can listen for the change event and in turn display appropriate card art and brand-specific information.

const secCodeLbl = document.querySelector('#mySecurityCodeLabel');const numberField = microform.createField('number');// Update your security code label to match the detected card type's terminologynumberField.on('change', function(data) {	secCodeLbl.textContent = (data.card && data.card.length > 0) ? data.card[0].securityCode.name : 'CVN';});numberField.load('#myNumberContainer');

The data object supplied to the event listener’s callback includes any information specific to the triggered event.

Card Detection

By default, Microform Integration attempts to detect the card type as it is entered. As the customer enters card numbers, Microform Integration sends detection information back in the change event. You can use this information to build a dynamic user experience by providing feedback to the user as they type their card number.

{  "card": [    { "name": "visa", "brandedName": "Visa", "cybsCardType": "001", "spaces": [4, 8, 12], "blocks": [4, 4, 4, 7], "lengths": [13, 14, 15, 16, 17, 18, 19], "securityCode": { "name": "CVV", "length": 3 }, "luhn": true, "valid": true, "couldBeValid": true },    { "name": "cartesbancaires", "brandedName": "Cartes Bancaires", "cybsCardType": "036", "spaces": [4, 8, 12], "blocks": [4, 4, 4, 7], "lengths": [13, 14, 15, 16, 17, 18, 19], "securityCode": { "name": "CVV", "length": 3 }, "luhn": true, "valid": true, "couldBeValid": true }  ],  "empty": false,  "couldBeValid": true,  "valid": true}

If Microform Integration is unable to determine a single card type, you can use this information to prompt the customer to choose from a possible range of values.

If type is specified in the microformInstance.createToken(options,...) method, the specified value always takes precedence over the detected value.

It is up to the merchant to then take the results from cardDetection and pass that into the type parameter within the microformInstance.createToken(options,...) method. Microform Integration no longer attempts to determine a single card type by default. Instead, it returns detectedCardTypes, in the transient token response and the merchant can decide how to handle this information.

Support for Dual-Branded Cards

Microform Integration supports dual-branded cards. To utilize this feature, you must include the card networks that have overlapping bank identification number (BIN) ranges in the capture context request. For example:

"allowedCardNetworks": ["VISA", "MASTERCARD", "AMEX", "CARTESBANCAIRES"]

When a card number within an overlapping BIN range is entered, Microform Integration returns the detected card types based on the order specified in the allowedCardNetworks array. You must then decide which card type to pass.

Support for Card Types without Security Code

Some card types, such as Korea Cyber Payments (KCP) and UATP, do not have security codes (CVV or CVN). Microform Integration supports these card types and provides automatic card detection. This enables you to dynamically display the fields that are relevant for the detected card type.

If you support only card types that do not have security codes, you must render only the card number field and the required fields. Do not render the security code field.

If you support card types that do not have security codes as well as cards types that do have security codes, you can use card detection to determine if the security code field should be enabled or disabled based on the card details that the customer enters.

This example shows an implementation that accounts for both cards that do and do not have security codes:

const numberField = microform.createField('number');const securityCodeField = microform.createField('securityCode');numberField.on('change', function (data) {  const allCardsWithoutSecurityCode = data.card && data.card.length > 0 &&    data.card.every(function (card) { return card.securityCode === false; });  if (allCardsWithoutSecurityCode) {    securityCodeField.update({ disabled: true });  } else {    securityCodeField.update({ disabled: false });  }});

Autocomplete

By default, Microform Integration supports the autocomplete event of the cardnumber field provided by certain browsers and third-party extensions. An autocomplete event is provided to allow easy access to the data that was provided to allow integration with other elements in your checkout process.

The format of the data provided in the event might be as follows:

{  "name": "_____",  "expirationMonth": "__",  "expirationYear": "____"}

These properties are in the object only if they contain a value; otherwise, they are undefined. Verify the properties before using the event. This example displays how to use this event to update other fields in your checkout process:

const number = microform.createField('number');number.on('autocomplete', function(data) {	if (data.name) document.querySelector('#myName').value = data.name;	if (data.expirationMonth) document.querySelector('#myMonth').value = data.expirationMonth;	if (data.expirationYear) document.querySelector('#myYear').value = data.expirationYear;});