Secure Fields events

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.

Name	Description
`CARD_VAULT_SUCCESS`	Triggered when the card is successfully vaulted.
`CARD_VAULT_FAILURE`	Triggered when the card vaulting fails. The data includes the API status and additional data about the failure.
`READY`	Triggered 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_CHANGE`	Triggered 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_SUCCESS, ({ scheme }) => {
  console.log(`Card (${scheme}) 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, ... }.

Name	Description
`blur`	Triggered when the field loses focus.
`focus`	Triggered when the field gains focus.
`input`	Triggered when the field value has been changed.

cardNumberField.addEventListener('blur', (data) => { console.log(data) /* { id: 'number' } */ })
cardNumberField.addEventListener('focus', (data) => { console.log(data) /* { id: 'number' } */ })
cardNumberField.addEventListener('input', (data) => { console.log(data) /* { id: 'number', schema: 'visa', codeLabel: 'CVV', valid: true } */

Getting Started

Integration

Tools

Cloud Vault

Features

Other

Global Events

Field Events

​Global Events

​Field Events

Global Events

Field Events