Class: Microform

An instance of this class is returned when you create a Microform integration using 
flex.microform
. This object allows the creation of Microform Fields. For details,  see Module: Flex.

Methods

createField(fieldType, optionsopt) > {Field}
Create a field for this Microform integration.
Parameters
Name
Type
Attributes
Description
fieldType
string
Supported values:
  • number
  • securityCode
options
object
<optional>
To change these options after initialization use 
field.update()
.
Properties
Name
Type
Attributes
Default
Description
aria-label
string
<optional>
Set the input's label for use by assistive technologies using the aria-label attribute.
aria-required
boolean
<optional>
Used to indicate through assistive technologies that this input is required for submission using the aria-required attribute.
autoformat
Boolean
<optional>
true
Enable or disable automatic formatting of the input field. This is only supported for number fields and will automatically insert spaces based on the detected card type.
description
string
<optional>
Sets the input's description for use by assistive technologies using the aria-describedby attribute.
disabled
Boolean
<optional>
false
Sets the 
disabled
 attribute on the input.
maxLength
number
<optional>
3
Sets the maximum length attribute on the input. This is only supported for 
securityCode
 fields and may take a value of 
3
 or 
4
.
placeholder
string
<optional>
Sets the 
placeholder
 attribute on the input.
styles
stylingOptions
<optional>
Apply custom styling to this field
title
string
<optional>
Sets the title attribute on the input. Typically used to display tooltip text on hover.
Returns
Type: Field
Examples
Minimal Setup
const= new Flex('.........'); const microform = flex.microform('card'); const number = microform.createField('number');
Providing Custom Styles
const flex = new Flex('.........'); const microform = flex.microform(); const number = microform.createField('number', { styles: { input: { 'font-family': '"Courier New", monospace' } } });
Providing Custom Styles to All Fields within the
Microform Integration
const= new Flex('.........'); // apply styles to all fields const microform = flex.microform('card', { styles: customStyles }); // override the text color for for the card number field only const number = microform.createField('number', { styles: { input: { color: '#000' }}});
Providing Custom Styles to A Specific Field within the
Microform Integration
const= new Flex('.........'); const microform = flex.microform('card'); const number = microform.createField('number'), { styles: { input: { 'font-family': '"Courier New", monospace' } }});
Setting the Length of a Security Code Field
const= new Flex('.........'); const microform = flex.microform('card'); const securityCode = microform.createField('securityCode', {maxlength:4});
createToken(options, callback)
Request a token using the card data captured in the Microform fields. A successful token creation will receive a transient token as its second callback parameter.
Parameter
Name
Type
Description
options
object
Additional tokenization options.
callback
callback
Any error will be returned as the first callback parameter. Any successful creation of a token will be returned as a string in the second parameter.
Properties
Name
Type
Attributes
Description
type
string
<optional>
Three digit card type string. If set, this will override any automatic card detection.
expirationMonth
string
<optional>
Two digit month string. Must be padded with leading zeros if single digit.
expirationYear
string
<optional>
Four digit year string.
Examples
Minimal example omitting all optional parameters.
microform.createToken({}, function(err, token) { if (err) { console.error(err); return; } console.log('Token successfully created!'); console.log(token); });
Override the 
cardType
 parameter using a select element that is part of your checkout.
// Assumes your checkout has a select element with option values that are card type codes: // <select id="cardTypeOverride"> // <option value="001">Visa</option> // <option value="002">Mastercard</option> // <option value="003">American Express</option> // etc... // </select> const options = { type: document.querySelector('#cardTypeOverride').value }; microform.createToken(options, function(err, token) { // handle errors & token response });
Handling error scenarios
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); } });