Event Hooks

You can also use Event Hooks to listen to what happened inside the iframe.

There are 2 categories of events you can hook into:

1. Form’s event hooks: onFormReady, onFormValidityChanged
2. Fields event hooks: onTextboxValueChanged, onFocusStateChanged, onFieldValidityChanged, onEmptyStateChanged

📘

Note

In the following example we used the hostedFields.getParentForm() utility function to get the payment-form element where the hosted fields are mounted.

📘

Note

In example we used the hostedFields.getParentForm() utility function to get the payment-form element where the hosted fields are mounted.

Form’s Event Hooks

onFormReady
Fired after all the fields are mounted and all iframes content is loaded. You can display a loading animation before mounting the payment form and listen to this event to stop the loading animation.

onFormValidityChanged

Fired when the form changes the validity:

• The form is valid when all fields are filled with a valid value
• The form is invalid If one of the fields is not valid or the validity was unknown

Field’s Event Hooks

Every hook is fired with the source which is the container element where the field is mounted to.
Every hook is fired with a event.detail containing some more information about the hosted field:

• event.detail.kind
• event.detail.valueMasked

onTextboxValueChanged
Fired each time the field value is changed. You can access to

• event.detail.valueMasked to get the masked value of the field.
• onFocusStateChanged
  Fired each time the field is focused or blur

onFieldValidityChanged
Fired each time the field validity changed. Unlike the form, the validity of a field could be

• true
• false
• or null means “unknown validity” (when the user does not finish typing for eg)

onEmptyStateChanged
Fired each time the field switches from empty to not empty (when the end-user starts typing) or vice versa