Last updated 8 months ago

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 to
  • handler: a function to run when the event is triggered by the customer interaction
JavaScriptJavaScript 
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 change event handler is the only one to receive an argument from the element.

The argument passed to the handler function will expose these properties:

valid A boolean that is present if the element contains valid data (or potentially valid data while the field is focused).
completed A boolean that is present if the element has valid and completed data See disabled submit button example.
source A string indicating the source of the event. Returns the type of the element used.
error An object that is present if the element has invalid data. Exposes the error.code, error.message and error.type 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');
    }
});
Next to Lead sources