Developer Guide Menu

Events 0.4.4

autocomplete

This event is emitted when a customer uses a browser or third-party tool to perform an   event on the 
input
 field. Flex Microform attempts to capture additional information from the autocompletion and supply this information to the callback, if available.
Possible additional values returned are:
  • name
  • code
     (credit card security code)
  • cardExpirationMonth
  • cardExpirationYear
If a value is not provided in 
autocomplete
, it is undefined in the callback data. Check for the value before using this event.
Examples
The following example displays the possible format of data supplied to callback:
             
{ name: '_____', code: '_____', cardExpirationMonth: '__', cardExpirationYear: '____' }
The following example displays how to update the rest of your checkout process following an 
autocomplete
 event:
             
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; });

autocompleteChange

This event is emitted when a customer makes an edit to the input field subsequent to having used a browser or third-party tool to perform an   event.
Examples
             
microformInstance.on('autocompleteChange', function() { console.log('Input field has been manually edited'); }); // perform an autocomplete, then focus, then delete a couple of characters to see your handler execute

blur

This event is emitted when the 
input
 field has lost focus.
Examples
             
microformInstance.on('blur', function() { console.log('Field has lost focus'); }); // focus the field in the browser then un-focus the field to see your supplied handler execute

cardTypeChange

This event is emitted when the customer 
input
 field is detected as potentially being a specific card type. This event enables building dynamic user experiences that updates information as the customer is enters a card number. For example, card branding information and client-side validation rules update in real time.
Examples
The following example displays the format of data supplied to callback:
             
{ card: [ { name: "visa", brandedName: "Visa", cybsCardType: "001", spaces: [ 4, 8, 12 ], lengths: [ 13, 14, 15, 16, 17, 18, 19 ], code: { name: "CVN", length: 3 }, luhn: true }, ... ] }
The following example displays how to update the UI and validation options using the card type change data:
             
var cardImage = document.querySelector('img'); var cardTypeLabel = document.querySelector('label[for=cardType]'); var cardSecurityCode = document.querySelector('input[name=csc]'); var cardSecurityCodeLabel=document.querySelector('label[for=csc]'); microformInstance.on('cardTypeChange', function(data) { if (data.card.length === 1) { // update UI with the detected card info cardImage.src = '/appropriate_card_art.png'; cardTypeLabel = data.card[0].brandedName; cardSecurityCode.maxLength = data.card[0].code.length; cardSecurityCodeLabel.innerText = data.card[0].code.name; } else { // otherwise show a generic UI cardImage.src = '/unknown.png'; cardTypeLabel = 'No card detected'; cardSecurityCode.maxLength = 4; cardSecurityCodeLabel.innerText = ''; } });
The following example displays how to filter a card type select element in another part of your checkout process:
             
var cardTypeOptions=document.querySelector('select[name=cardType] option'); microformInstance.on('cardTypeChange', function(data) { // extract the identified card types var detectedCardTypes = data.card.map(function(c) { return c.cybsCardType; }); // if any cards have been detected, disable the options not in that list // otherwise enable all the options cardTypeOptions.forEach(function (o) { o.disabled = (detectedCardTypes.length > 0) && !detectedCardTypes.includes(o.value); }); });

disabled

This event is emitted following the disabling of the input field using 
MicroformInstance#disable
. See  "disable()." .
Examples
             
microformInstance.on('disabled', function() { console.log('Field has been disabled'); }); // disable to see your supplied handler execute microformInstance.disable();

empty

This event is emitted when the input field has transitioned from a state of including data to not including data. This condition could occur when a customer deletes the field contents or the field is programmatically cleared using 
MicroformInstance#clear
. See  "clear()."
Examples
             
microformInstance.on('empty', function() { console.log('Field is now empty'); }); // enter a card number into the field // either delete card number fully or trigger a clear to see your supplied handler execute microformInstance.clear();

enabled

This event is emitted after the input field is enabled using 
MicroformInstance#enable
. See  "enable()."
Examples
             
microformInstance.on('enabled', function() { console.log('Field has been enabled'); }); // disable & re-enable the field to see your supplied handler execute microformInstance.disable(); microformInstance.enable();

focus

This event is emitted when the 
input
 field receives focus.
Examples
             
microformInstance.on('focus', function() { console.log('Field has received focus'); }); // focus the field in the browser to see your supplied handler execute

inputSubmitRequest

This event is emitted when a customer requests the submission of the 
input
 field by pressing the 
Return
 key, or similar command. By subscribing to this event, you are able to transparently replicate the familiar UX of pressing 
Enter
 to submit a form.
This event is implemented as follows:
  1. The 
    inputSubmitRequest
     handler will call 
    MicroformInstance#createToken
    . See  "createToken(options, callback)."
  2. The result is added to a hidden input on your checkout.
  3. A trigger submission of the form including the newly-created token is available for you to use server-side.
Examples
             
var form = document.querySelector('form'); var hiddenInput = document.querySelector('form input[name=token]'); microformInstance.on('inputSubmitRequest', function() { microformInstance.createToken({}, function(response) { hiddenInput.value = response.token; form.submit(); }); });

notEmpty

This event is emitted when the 
input
 field is transitioned from a state of being empty to including data.
Examples
             
microformInstance.on('notEmpty', function() { console.log('Field is not empty'); }); // enter a card number into the field to see your supplied handler execute

tokenizeLoadStart

This event is emitted when the 
MicroformInstance#createToken
 is called. See  "createToken(options, callback)."  Using this event enables you to build a user interface that lets the customer know a request is in progress.
Examples
             
microformInstance.on('tokenizeLoadStart', function() { console.log('Show a loading indicator'); }); // later on... microformInstance.createToken({}, function(response) { console.log('Remove the loading indicator'); });

validationChange

This event is emitted when Flex Microform detects a change in the validation state of the entered card number. The callback receives an object including two values:
  • valid
    : indicates that based on the card detected, this is a valid card.
  • couldBeValid
    : indicates that while the card may not be fully valid, there is possible additional user input that could make the card valid. For example, the user is still entering their card information.
Examples
The following example displays the format of the data provided to the callback:
             
{ isValid: false, couldBeValid: true }
The following example displays how to update validation styles on your form element based on card validation events:
             
var myForm = document.querySelector('form'); microformInstance.on('validationChange', function(data) { myForm.classList.toggle('cardIsValidStyle', data.isValid); myForm.classList.toggle('cardCouldBeValidStyle', data.couldBeValid); });
Top