Secure Fields events

const cardNumberField = secureFields.addCardNumberField()

const handleInputChange = (data) => {
  console.warn('Input changed', data)
}

cardNumberField.addEventListener('input', handleInputChange)
...
cardNumberField.removeEventListener('input', handleInputChange)

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);
});

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: 'AU', additionalSchemes: ['mastercard'], ... } */ })

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();
});