Recurly.js Elements, as well as other Recurly.js objects, act as event emitters.

Register listeners with .on(event, handler) and remove them with .off(event, handler) to react to card-entry changes, focus, validation states, and more.

Key details

// 1. Create your Elements group and individual element
const elements = recurly.Elements();
const card = elements.CardElement();

// 2. Attach the element to the DOM
card.attach('#card-container');

// 3. Add an event listener
function changeHandler (state) {
  // `state` contains validity, card brand, last4, etc.
  console.log(state);
}
card.on('change', changeHandler);

// 4. Remove the listener when it's no longer needed
card.off('change', changeHandler);

Tip
Keep a reference to the exact handler you passed to .on(); you must supply the same function reference to .off() to successfully detach the listener.

Co-badged card state

For cards that can run on more than one network, the change event state includes:

card.on('change', state => {
  if (state.cardNetworkPreference) {
    console.log('Processing on', state.cardNetworkPreference);
  }
});

Note
The coBadge event fires whenever a valid card number is entered and reports
the detected networks regardless of whether you render your own selection UI. See the
Co-badged cards guide for the complete flow.