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
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"></script>
<script>
  var flex = new Flex('header.payload.signature');
</script>

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:
// <select id="cardTypeOverride">
//   <option value="001">Visa</option>
//   <option value="002">Mastercard</option>
//   <option value="003">American Express</option>
//    etc...
// </select>

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

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

Header
Payload
Signature

xxxxx.yyyyy.zzzzz