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 event | Fired when… | Payload highlights |
---|---|---|
change | Field value changes or validity updates | state.valid , state.brand , state.empty |
focus | Element gains focus | — |
blur | Element loses focus | — |
ready | Element 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.
Updated 12 days ago