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, addSecurityCodeField and addField 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.
`redacted`	Triggered when the field value has been masked (either automatically via `maskInput` or programmatically via `redactValue()`).
`unredacted`	Triggered when the field value has been unmasked (either automatically via `maskInput` or programmatically via `unredactValue()`).
`card-details-changed`	Triggered when the API confirms card details for the entered BIN. Includes the confirmed scheme, additional schemes (co-branded networks), and other card metadata. Only fires on the card number field.

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 } */ })
cardNumberField.addEventListener('redacted', () => { console.log('Field redacted') })
cardNumberField.addEventListener('unredacted', () => { console.log('Field unredacted') })
cardNumberField.addEventListener('card-details-changed', (data) => { console.log(data) /* { id: 'number', scheme: 'visa', additionalSchemes: ['mastercard'], ... } */ })

Get started

Integration guides

Best Practices

Resources

Features

Other

Secure Fields events

Global events

Field events

​Global events

​Field events

Global events

Field events