Menu

Event hooks

SDK v1
Last updated September 2021

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:

Copied!
{
  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:

Copied!
{
  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:

Copied!
{
  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 ofcreating a sessionStateor to display and enable your submit button.

Example event body:

Copied!
{
  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 thewp:field:changeevent.

Copied!
...
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");
    }
});
  ...


Next steps


Create sessionState