On This Page

{#jumplink-list}  
[Markdown](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-v2-reference/api-reference-v2/Class--Field-v2.md)  
Filter  
FILTER BY TAG

Class: Field {#class--field-v2}
===============================

An instance of this class is returned when you add a Field to a Microform integration using [microform.createField](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-v2-reference/api-reference-v2/class-microform-v2.md ""). 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.

| 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. |
[Parameters]

**Examples**  
*Using a CSS selector*

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

*Using an HTML element*

```
const container = document.getElementById('container'); 
field.load(container);
```

`off(type, listener)`  
Unsubscribe an event handler from a Microform Field.

| Name     | Type     | Description                                     |
|:---------|:---------|:------------------------------------------------|
| type     | string   | Name of the event you wish to unsubscribe from. |
| listener | function | The handler you wish to be unsubscribed.        |
[Parameter]

**Example**

```
// subscribe to an event using .on() but keep a reference to the handler that was supplied. 
const 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

{#class--field-v2_ul_2}  
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.

| Name     | Type     | Description                                 |
|:---------|:---------|:--------------------------------------------|
| type     | string   | Name of the event you wish to subscribe to. |
| listener | function | Handler to execute when event is triggered. |
[Parameters]

**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.

| Name    | Type   | Description                                           |
|:--------|:-------|:------------------------------------------------------|
| options | object | New options to be merged with previous configuration. |
[Parameter]

**Example**

```
// field initially loaded as disabled with no placeholder 
const 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

{#class--field-v2_ul_4}  
If a value has not been supplied in the autocompletion, it will be undefined in the callback data. As such you should verify that it exists 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

| Name         | Type    |
|:-------------|:--------|
| card         | object  |
| valid        | boolean |
| couldBeValid | boolean |
| empty        | boolean |
[Properties]

**Examples**  
*Minimal example:*

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

*Use the card detection result to update your UI.*

```
const cardImage = document.querySelector('img.cardDisplay');
const cardSecurityCodeLabel = document.querySelector('label[for=securityCode]');

// create an object to map card names to the URL of your custom images
const 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 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.*

```
const cardTypeOptions = document.querySelector('select[name=cardType] option');

field.on('change', function(data) {
  // extract the identified card types
  const 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.*

```
const 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:

1. Call `Microform.createToken()`.
2. Call [Microform.createToken()](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-v2-reference/api-reference-v2/class-microform-v2.md ""). For more information, see these topics:
   * [Module: FLEX](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-v2-reference/api-reference-v2/module-flex-v2.md "")
   * [Class: Microform](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/micro-v2-reference/api-reference-v2/class-microform-v2.md "")
3. Take the result and add it to a hidden input on your checkout.
4. Trigger submission of the form containing the newly created token for you to use server-side.

{#class--field-v2_ol_4}  
**Example**

```
const form = document.querySelector('form');
const hiddenInput = document.querySelector('form input[name=token]');

field.on('inputSubmitRequest', function() {
	const 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);
});
```

RELATED TO THIS PAGE