Events

How to subscribe to and detach Recurly.js element events with on / off, including a working example for the change event.

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);
Common eventFired when…Payload highlights
changeField value changes or validity updatesstate.valid, state.brand, state.empty
focusElement gains focus
blurElement loses focus
readyElement is fully rendered and interactive

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.