> ## 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. |
| `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), the issuing country (`country`, a 2-letter ISO code, in version 2.11.0 or later), and other card metadata. The `country` value is `null` when the issuing country cannot be resolved, and can take more digits to resolve than the scheme does. 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', country: 'US', additionalSchemes: ['mastercard'], ... } */ })
```

### Reject specific card schemes

Secure Fields doesn't block card schemes for you. To refuse cards from a scheme you don't
accept, check the `scheme` in the `card-details-changed` event, show your own error message,
and don't call `submit()` while that scheme is entered.

```js theme={"system"}
const blockedSchemes = ['jcb', 'unionpay'];
let schemeBlocked = false;

cardNumberField.addEventListener('card-details-changed', ({ scheme }) => {
  schemeBlocked = blockedSchemes.includes(scheme);
  document.querySelector('#card-error').textContent = schemeBlocked
    ? 'This card type isn\'t accepted.'
    : '';
});

document.querySelector('#cc-button').addEventListener('click', () => {
  if (!schemeBlocked) secureFields.submit();
});
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.