> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gr4vy.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. |

```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 } */
```