You can call the addEventListener on a Secure Fields instance or on fields, passing one of the supported events and a callback. removeEventListener removes a previously attached event handler.

const cardNumberField = secureFields.addCardNumberField()

const handleInputChange = (data) => {
  console.warn('Input changed', data)
}

cardNumberField.addEventListener('input', handleInputChange)
...
cardNumberField.removeEventListener('input', handleInputChange)

​
Global Events

The following events can be listened to by attaching an event handler to the SecureFields instance using the addEventListener method.

NameDescription
CARD_VAULT_SUCCESSTriggered when the card is successfully vaulted.
CARD_VAULT_FAILURETriggered when the card vaulting fails. The data includes the API status and additional data about the failure.
READYTriggered when Secure Fields is loaded and ready to be used. An object is available as and argument in the callback, containing:

- environment (sandbox or production)
- gr4vyId
- sessionId
- version (of the Secure Fields SDK in use)
secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => {
  console.log("Card has been vaulted successfully!");
});

secureFields.addEventListener(
  SecureFields.Events.CARD_VAULT_FAILURE,
  ({ code, message, status }) => {
    console.log("Couldn't vault the card", { code, status, message });
  }
);

secureFields.addEventListener(SecureFields.Events.READY, (data) => {
  console.log("Secure fields loaded", data);
});

​
Field Events

The following events can be listened to by attaching an event handler to a field (returned by the addCardNumberField, addExpiryDateField and addSecurityCodeField methods) using the addEventListener method.

Some of these provide additional useful data like the card BIN, validation status, and scheme. For example, the input event on a card number field might include { schema: 'visa', codeLabel: 'CVV', valid: true, ... }.

NameDescription
blurTriggered when the field loses focus.
focusTriggered when the field gains focus.
inputTriggered when the field value has been changed.
cardNumberField.addEventListener('blur', (data) => { console.log(data) /* { type: 'number' } */ })
cardNumberField.addEventListener('focus', (data) => { console.log(data) /* { type: 'number' } */ })
cardNumberField.addEventListener('input', (data) => { console.log(data) /* { type: 'number', schema: 'visa', codeLabel: 'CVV', valid: true } */