Developer Guide Menu


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
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 
Field loses focus.
Field contents are edited by the customer. This event contains various data such as validation information and details of any detected card types.
Field gains focus.
Customer requests submission of the field by pressing the Return key or similar.
Field has been loaded on the page and is ready for user input.
Field is removed from the page and no longer available for user input.
Field configuration was updated with new options.
Some events may return data to the event listener’s callback. See  Subscribing to Events .

Subscribing to Events

Using the 
 method provided in the 
 object, you can easily subscribe to any of the supported events.
For example, you could listen for the 
 event and in turn display appropriate card art and display brand-specific information.
var secCodeLbl = document.querySelector('#mySecurityCodeLabel'); var numberField = flex.createField('number'); // Update your security code label to match the detected card type's terminology numberField.on('change', function(data) { secCodeLbl.textContent = (data.card && data.card.length > 0) ? data.card[0] : 'CVN'; }); numberField.load('#myNumberContainer');
 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 
 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], "securityCode": { "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.
 is specified in the 
 method, the specified value always takes precedence over the detected value.


By default, Flex Microform supports the autocomplete event of the 
 field provided by certain browsers and third-party extensions. An 
 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. 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:
var number = microform.createField('number'); number.on('autocomplete', function(data) { if ( document.querySelector('#myName').value =; if (data.expirationMonth) document.querySelector('#myMonth').value = data.expirationMonth; if (data.expirationYear) document.querySelector('#myYear').value = data.expirationYear; });