**Last updated**: 24 June 2025 | [**Change log**](/products/checkout/web/changelog/)

# 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`](/products/checkout/web/v1/create-sessionstate-web) 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`](#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");
    }
});
  ...
```