Class: Field

An instance of this class is returned when you add a Field to a Microform integration using microform.createField. With this object, you can then interact with the Field to subscribe to events, programmatically set properties in the Field, and load it to the DOM.

Methods

clear()
Programmatically clear any entered value within the field.
Example
field.clear();
dispose()
Permanently remove this field from your Microform integration.
Example
field.dispose();
focus()
Programmatically set user focus to the Microform input field.
Example
field.focus();
load(container)
Load this field into a container element on your page.
Successful loading of this field will trigger a load event.
Parameters
Name
Type
Description
container
HTMLElement | string
Location in which to load this field. It can be either an HTMLElement reference or a CSS selector string that will be used to load the element.
Examples
Using a CSS selector
field.load('.form-control.card-number');
Using an HTML element
var container = document.getElementById('container'); 
field.load(container);
off(type, listener)
Unsubscribe an event handler from a Microform Field.
Parameter
Name
Type
Description
type
string
Name of the event you wish to unsubscribe from.
listener
function
The handler you wish to be unsubscribed.
Example
// subscribe to an event using .on() but keep a reference to the handler that was supplied. 
var focusHandler = function() { console.log('focus received'); } 
field.on('focus', focusHandler); 

// then at a later point you can remove this subscription by supplying the same arguments to .off() 
field.off('focus', focusHandler);
on(type, listener)
Subscribe to events emitted by a Microform Field. Supported eventTypes are:
  • autocomplete
  • blur
  • change
  • focus
  • inputSubmitRequest
  • load
  • unload
  • update
Some events may return data as the first parameter to the callback otherwise this will be undefined. For further details see each event's documentation using the links above.
Parameters
Name
Type
Description
type
string
Name of the event you wish to subscribe to.
listener
function
Handler to execute when event is triggered.
Example
field.on('focus', function() { 
  console.log('focus received'); });
unload()
Remove a the Field from the DOM. This is the opposite of a load operation.
Example
field.unload();
update(options)
Update the field with new configuration options. This accepts the same parameters as microform.createField(). New options will be merged into the existing configuration of the field.
Parameter
Name
Type
Description
options
object
New options to be merged with previous configuration.
Example
// field initially loaded as disabled with no placeholder 
var number = microform.createField('number', { disabled: true }); 
number.load('#container');

// enable the field and set placeholder text 
number.update({ disabled: false, placeholder: 'Please enter your card number' });
Events
autocomplete
Emitted when a customer has used a browser or third-party tool to perform an autocomplete/autofill on the input field. Microform will attempt to capture additional information from the autocompletion and supply these to the callback if available. Possible additional values returned are:
  • name
  • expirationMonth
  • expirationYear
If a value has not been supplied in the autocompletion, it will be undefined in the callback data. As such you should check for its existence before use.
Examples
Possible format of data supplied to callback
{ 
  name: '_____', 
  expirationMonth: '__', 
  expirationYear: '____' 
}
Updating the rest of your checkout after an autocomplete event
field.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; 
});
blur
This event is emitted when the input field has lost focus.
Example
field.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
change
Emitted when some state has changed within the input field. The payload for this event contains several properties.
Type:
 object
Properties
Name
Type
card
object
valid
boolean
couldBeValid
boolean
empty
boolean
Examples
Minimal example:
field.on('change', function(data) {
  console.log('Change event!');
  console.log(data);
});
Use the card detection result to update your UI.
var cardImage = document.querySelector('img.cardDisplay');
var cardSecurityCodeLabel = document.querySelector('label[for=securityCode]');

// create an object to map card names to the URL of your custom images
var cardImages = {
  visa: '/your-images/visa.png', 
  mastercard: '/your-images/mastercard.png', 
  amex: '/your-images/amex.png',
  maestro: '/your-images/maestro.png',
  discover: '/your-images/discover.png',
  dinersclub: '/your-images/dinersclub.png',
  jcb: '/your-images/jcb.png'
};

field.on('change', function(data) {
  if (data.card.length === 1) {
    // use the card name to to set the correct image src
    cardImage.src = cardImages[data.card[0].name];

    // update the security code label to match the detected card's naming convention
    cardSecurityCodeLabel.textContent = data.card[0].securityCode.name;
  } else {
    // show a generic card image
    cardImage.src = '/your-images/generic-card.png';
  }
});
Use the card detection result to filter select element in another part of your checkout.
var cardTypeOptions = document.querySelector('select[name=cardType] option');

field.on('change', function(data) {
  // extract the identified card types
  var detectedCardTypes = data.card.map(function(c) { 
return c.cybsCardType;
 });

  // disable any select options not in the detected card types list
  cardTypeOptions.forEach(function (o) {
    o.disabled = detectedCardTypes.includes(o.value);
  });
});
Updating validation styles on your form element.
var myForm = document.querySelector('form'); 

field.on('change', function(data) { 
  myForm.classList.toggle('cardIsValidStyle', data.valid); 
  myForm.classList.toggle('cardCouldBeValidStyle', data.couldBeValid);
});
focus
Emitted when the input field has received focus.
Example
field.on('focus', function() {
  console.log('Field has received focus');
});

// focus the field in the browser to see your supplied handler execute
inputSubmitRequest
Emitted when a customer has requested submission of the input by pressing Return key or similar. By subscribing to this event you can easily replicate the familiar user experience of pressing enter to submit a form. Shown below is an example of how to implement this. The inputSubmitRequest handler will:
  2. Take the result and add it to a hidden input on your checkout.
  3. Trigger submission of the form containing the newly created token for you to use server-side.
Example
var form = document.querySelector('form');
var hiddenInput = document.querySelector('form input[name=token]');

field.on('inputSubmitRequest', function() {
  var options = {
    //
  };

  microform.createToken(options, function(response) {
    hiddenInput.value = response.token;
    form.submit();
  });
});
load
This event is emitted when the field has been fully loaded and is ready for user input.
Example
field.on('load', function() {
  console.log('Field is ready for user input');
});
unload
This event is emitted when the field has been unloaded and no longer available for user input.
Example
field.on('unload', function() {
  console.log('Field has been removed from the DOM');
});
update
This event is emitted when the field has been updated. The event data will contain the settings that were successfully applied during this update.
Type:
 object
Example
 field.on('update', function(data) {
  console.log('Field has been updated. Changes applied were:');
  console.log(data);
});