On This Page

Events

You can subscribe to Flex Microform 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.

Event Name	Emitted When
enabled	Field is enabled.
disabled	Field is disabled.
focus	Field gains focus.
blur	Field loses focus.
empty	Field transitions from having data to being empty.
notEmpty	Field transitions from being empty to having data.
cardTypeChange	Possible change of card type has been detected.
validationChange	Validity of the entered card number has changed.
inputSubmitRequest	Customer requests submission of the field by pressing the Return key or similar.
tokenizeLoadStart	A tokenize request is triggered.
autocomplete	Customer fills the credit card number using a browser or third-party extension. This event provides a hook onto the additional information provided during the autocomplete event.
autocompleteChange	Customer edits the credit card field after they filled it in with a previous autocomplete action.

NOTE

cardTypeChange

and

validationChange

only trigger if the card detectionfeature is enabled. See "Card Detection."

Subscribing

Using the

.on()

method provided in the

microformInstance

object, you can easily subscribe to any of the supported events.

For example, you could listen for the

cardTypeChange

event and in turn display appropriate card art and display brand-specific information.

var secCodeLbl = document.querySelector('label[for="secCode"]');

FLEX.microform(options, function (err, microformInstance) {

// Respond to changes in the detected card type by updating the
// security code label to that of the detected card type
microformInstance.on('cardTypeChange', function (data) {
secCodeLbl.innerHTML = (data && data.card) ? data.card.code.name : 'CVN';
});

});

The

data

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

Card Detection

By default, Microform attempts to detect the card type as it is entered. Detection info is bubbled outwards in the

cardTypeChange

event. You can use this information to build a dynamic user experience, providing feedback to the user as they type their card number.

{
  "card": [
    {
      "name": "mastercard",
      "brandedName": "MasterCard",
      "cybsCardType": "002",
      "spaces": [ 4, 8, 12],
      "lengths": [16],
      "code": {
        "name": "CVC",
        "length": 3
      },
      "luhn": true,
      "valid": false,
      "couldBeValid": true
    },
    /* other identified card types */
  ]
}

If Flex Microform 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.

NOTE

If cardType
is specified in the

microformInstance.createToken(...)

method, the specified value

always

takes precedence over the detected value.

NOTE

You can opt out of the card detection feature by specifying

cardDetection: false

in the initial set-up call.

Autocomplete

By default, Flex Microform supports the

autocomplete/autofill

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: '_____',
code: '_____',
cardExpirationMonth: '__',
cardExpirationYear: '____'
}

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

microformInstance.on('autocomplete', function(data) {
          if (data.name) document.querySelector('#myName').value = data.name;
          if (data.code) document.querySelector('#myCvn').value = data.code;
          if (data.cardExpirationMonth) document.querySelector('#myMonth').value = data.cardExpirationMonth;
          if (data.cardExpirationYear) document.querySelector('#myYear').value = data.cardExpirationYear;
});

NOTE

You can opt out of auto complete support by specifying

autocomplete: false

in the initial set-up call.