On This Page

Events v0.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

autocomplete

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: "CVV", 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:

The

inputSubmitRequest

handler will call

MicroformInstance#createToken

. See "createToken(options, callback)."

The result is added to a hidden input on your checkout.

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);
});