> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anglpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```js theme={"system"}
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: <br /><br />- `environment` (sandbox or production) <br />- `gr4vyId` <br />- `sessionId` <br />- `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: <br /><br />- `fields` (object of fields, each with validation information) <br />- `complete` (a form is complete if number and expiry date are filled and valid and security code is empty or valid) |

```js theme={"system"}
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. |

```js theme={"system"}
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'], ... } */ })
```