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 an argument in the callback, containing:

- environment (sandbox or production)
- gr4vyId
- sessionId
- version (of the Secure Fields SDK in use)
FORM_CHANGETriggered when any value of the card form changes. An object is available as an argument in the callback, containing:

- fields (object of fields, each with validation information)
- complete (a form is complete if number and expiry date are filled and valid and security code is empty or valid)
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 } */

Was this page helpful?

ThemingClick to Pay