Last Updated: 19 September 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:
{ 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:
{ 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:
{ 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 session
or to display and enable your submit button.
Example event body:
{ 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.
... 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"); } }); ...