Last Updated: 22 January 2024 | Change Log

Event hooks

Our optional event hooks functionality allows you to listen to the internal state of our SDK to customize your customer's checkout experience.

wp:form:ready

Triggers when our SDK has been initialized properly. You could use the result to disable or hide an optional pre-loader to display the form and fields.

Example event body:

JavaScript

{
  detail: {
     is-ready: true,
  }
}

wp:field:change

Triggers when the information your customer enters in the field is valid. You could use the result to apply a styling feature, the feature could inform your customer that they have entered valid details in the field.

Example event body:

JavaScript

{
  detail: {
    field: {
        name: "expiry",
        $element: DOMelement
    },
    is-valid: true,
  }
}

wp:card:change

Triggers and returns your customer's card type, the card type is based on your customer's card number. You could use the result to apply a styling feature which displays the logo of your customer's card brand.

Example event body:

JavaScript

{
  detail: {
    type: "visa",
  }
}

wp:form:change

Triggers and returns the validity of the entire form. You could use the returned value; true to automatically start the process of creating a sessionState or to display and enable your submit button.

Example event body:

JavaScript

{
  detail: {
    is-valid: true,
  }
}

Here is an example of how you could use the event hooks to apply a styling feature based on the result of the wp:field:change event.

JavaScript

...
var form = document.getElementById("card-form");
form.addEventListener("wp:field:change", function(event) {
    if (event.detail["is-valid"]) {
        event.detail.field.$element.classList.add("valid-icon");
        }
    else {
            event.detail.field.$element.classList.remove("valid-icon");
    }
});
  ...