API Reference

Methods

    
field.clear();
    

    
field.dispose();
    

    
field.focus();
    

    
field.load('.form-control.card-number');
    

    
var container = document.getElementById('container'); 
field.load(container);
    

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

autocomplete
blur
change
error
focus
inputSubmitRequest
load
unload
update

    
field.on('focus', function() { 
  console.log('focus received'); });
    

    
field.unload();
    

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

name
expirationMonth
expirationYear

    
{ 
  name: '_____', 
  expirationMonth: '__', 
  expirationYear: '____' 
} 
    

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

    
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
    

    
field.on('change', function(data) {
  console.log('Change event!');
  console.log(data);
});
    

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

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

    
var myForm = document.querySelector('form'); 

field.on('change', function(data) { 
  myForm.classList.toggle('cardIsValidStyle', data.valid); 
  myForm.classList.toggle('cardCouldBeValidStyle', data.couldBeValid);
});
    

    
field.on('focus', function() {
  console.log('Field has received focus');
});

// focus the field in the browser to see your supplied handler execute
    

Call Microform.createToken().
Take the result and add it to a hidden input on your checkout.
Trigger submission of the form containing the newly created token for you to use server-side.

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

    
field.on('load', function() {
  console.log('Field is ready for user input');
});
    

    
field.on('unload', function() {
  console.log('Field has been removed from the DOM');
});
    

    
 field.on('update', function(data) {
  console.log('Field has been updated. Changes applied were:');
  console.log(data);
});
    

    
script src="https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js">

    

Methods

    
var flex = new Flex('header.payload.signature');
var microform = flex.microform();
    

    
var flex = new Flex('header.payload.signature');
var microform = flex.microform({
  styles: {
    input: {
      color: '#212529',
        'font-size': '20px'
    }
  }
});
    

Methods

    
var flex = new Flex('.........');
var microform = flex.microform();
var number = microform.createField('number');
    

    
var flex = new Flex('.........');
var microform = flex.microform();
var number = microform.createField('number', {
  styles: {
    input: {
      'font-family': '"Courier New", monospace'
    }
  }
});
    

    
var flex = new Flex('.........');
var microform = flex.microform();
var securityCode = microform.createField('securityCode', { maxLength: 4 });
    

    
microform.createToken({}, function(err, token) {
  if (err) {
    console.error(err);
    return;
  }

  console.log('Token successfully created!');
  console.log(token);
});
    

    
// Assumes your checkout has a select element with option values that are 
      
Cybersource
       card type codes:
// 
//   Visa
//   Mastercard
//   American Express
//    etc...
// 

var options = {
  type: document.querySelector('#cardTypeOverride').value
};
microform.createToken(options, function(err, token) {
  // handle errors & token response
});
    

    
microform.createToken(options, function(err, token) {
  if (err) {
    switch (err.reason) {
      case 'CREATE_TOKEN_NO_FIELDS_LOADED':
        break;
      case 'CREATE_TOKEN_TIMEOUT':
        break;
      case 'CREATE_TOKEN_NO_FIELDS':
        break;
      case 'CREATE_TOKEN_VALIDATION_PARAMS':
        break;
      case 'CREATE_TOKEN_VALIDATION_FIELDS':
        break;
      case 'CREATE_TOKEN_VALIDATION_SERVERSIDE':
        break;
      case 'CREATE_TOKEN_UNABLE_TO_START':
        break;
      default:
        console.error('Unknown error');
        break;
  } else {
    console.log('Token created: ', token);
  }
});
    

Members

Subscribing to Events

    
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].securityCode.name : 'CVN';
});

numberField.load('#myNumberContainer');
    

Card Detection

    
{
  "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 */
  ]
}
    

Autocomplete

    
{
name: '_____',
expirationMonth: '__',
expirationYear: '____'
}
    

    
var number = microform.createField('number');
number.on('autocomplete', function(data) {
  if (data.name) document.querySelector('#myName').value = data.name;
  if (data.expirationMonth) document.querySelector('#myMonth').value = data.expirationMonth;
 java.io.PrintWriter@136ffc65
 if (data.expirationYear) document.querySelector('#myYear').value = data.expirationYear;
});
    

Type Definitions

    
foo(function (err, data) {
    // check for and handle any errors
    if (err) throw err;

    // otherwise use the data returned
    console.log(data);
});
    

input
::placeholder
:hover
:focus
:disabled
valid
invalid

color
cursor
font
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-weight
line-height
opacity
text-shadow
text-rendering
transition
-moz-osx-font-smoothing
-moz-tap-highlight-color
-moz-transition
-o-transition
-webkit-font-smoothing
-webkit-tap-highlight-color
-webkit-transition

    
const styles = {
  'input': {
    'color': '#464646',
    'font-size': '16px',
    'font-family': 'monospace'
  },
  ':hover': {
    'font-style': 'italic'
  },
  'invalid': {
    'color': 'red'
  }
};