• fields.create()
• field.mount()
• field.on()
• Other methods
  • blur()
  • clear()
  • destroy()
  • focus()
  • unmount()
  • update()

fields.create(type, options)

var card = fields.create('card');

This method creates an instance of a specific Smart Field. It takes the type of Smart Fields to create as well as an options object.

Smart Fields Types

Examples Checkout

Field Options

All Smart Fields accept a common set of options, and then some Field-specific options.

Common options

Options available exclusively to the card or number Field

Options available exclusively to the CVV Field

field.mount(domElement)

You need to create a container DOM element to mount a Smart Field. If the container DOM element has a label, the Field is automatically focused when its label is clicked. There are two ways to do this:

1. Mount the instance within a <label>.

<label>Card
  <div id="card-field"></div>
</label>

2. Create a <label> with a for attribute, referencing the ID of your container.

<label for="card-field">Card</label>
<div id="card-field"></div>

The field.mount() method attaches your Field to the DOM. field.mount() accepts either a CSS Selector (e.g., '#card-field') or a DOM element.

cardField.mount('#card-field');

field.on(event, handler)

The only way to communicate with your Smart Field is by listening to an event. Fields might emit any of the events below. All events have a payload object that has an fieldType property with the type of the Field that emitted the event.

Input validation

Smart Fields validates customer input as it is typed. To help your customers catch mistakes, listen to change events on the Field and display any reported errors:

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

Other Methods

The styles of a Smart Field can be dynamically changed using update(). This method can be used to simulate CSS media queries that automatically adjust the size of Fields when viewed on different devices.

window.addEventListener('resize', function(event) {
  if (window.innerWidth <= 320) {
    card.update({style: {base: {fontSize: '13px'}}});
  } else {
    card.update({style: {base: {fontSize: '16px'}}});
  }
});

var previousBrand;
card.on('change', function(event) {
  if (event.brand !== previousBrand && event.brand === 'mastercard') {
    card.update({style: {base: {color: 'orange'}}});
    previousBrand = event.brand;
  }
});