Element instance
When an element is mounted you can cache its instance into a variable and use it to listen for additional events as the customer interacts the element. This applies only to payment card and bank account fields.
// mount a combined card element on a container `div`
var card = Rebilly.card.mount('#card');
element.on()
Use the on()
method to attach specific handlers to events. These handlers will be triggered when the customer interacts with the card element.
The method accepts two arguments:
eventName
: a string that defines the event name to which the handler will be attached tohandler
: a function to run when the event is triggered by the customer interaction
element.on('ready', function() {
console.log('Card element is ready to use!');
});
element.on('error', function() {
// element automatically unmounted and destroyed
console.log('Card mount error!');
});
Events
Event Name | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|
ready |
Triggered after the element is mounted and the field has fully loaded into view. | ||||||||
error |
Triggered in case if the element can't to mount see Rebilly.on. | ||||||||
change |
Triggered when the element has changed after the customer's input. Use this event to detect validation errors in the element. The The argument passed to the handler function will expose these properties:
|
||||||||
focus |
Triggered when the element gains focus. | ||||||||
blur |
Triggered when the element loses focus. |
Example
In this example we enable the submit button only when the combined card field is ready and display the error messages whenever the input becomes invalid.
// the form submit button is disabled by default
var submitButton = document.querySelector('#submit-button');
var card = Rebilly.card.mount('#card');
card.on('change', function(data) {
if (data.error) {
document.querySelector('#errors').innerText = error.message;
}
if(data.completed){
// ready to submit
submitButton.removeAttribute('disabled');
}
});