Listen to PaymentUIComponent events

Because the PaymentUIComponents exist inside an elements.io hosted iframe, the only way to communicate with your PaymentUIComponents is by listening to an event. PaymentUIComponents might emit any of the events below. All events have a payload object that has an elementType property with the type of the PaymentUIComponents that emitted the event.

cardComponent.on('change', function(event) {
  // handle event here
});

{
    brand: ‘visa’,
    componentType: ‘card’,
    empty: false,
    valid: true,
    potentiallyValid: true
}

Method Parameters

on(eventName, handler)
This method registers the handler with the given eventName. The handler will be triggered when the corresponding event is emitted.

Method parameters

Name

Description

eventName (string)

The name of the event. can be any of: change, ready, focus, blur

handler: (event) => void

the callback function that you provide will be called when the event is fired. When called it will be passed an event object with the following properties:

brand string - The card brand of the card number is entered. Can be one of visa, mastercard, amex, discover, diners, jcb, unionpay, or unknown.

componentType string - The type of element that emitted this event.

empty boolean - true if the value is empty

valid boolean - true if the value is well-formed and valid. It can be used to progressively disclose the next parts of your form or to enable form submission.
It is not an indicator of whether a customer is done with their input—it only indicates that the input contains a potentially complete, well-formed value. In many cases, the customer could still add further input. This value should not be used to perform an action such as advancing the cursor to a subsequent field or performing a tokenization request.

potentiallyValid boolean - true if the input value is incomplete but potentially valid