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_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) /* { 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?