**Last updated**: 03 September 2026 | [**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-brands:change`

Triggers once your customer enters at least the first 12 digits of their card number. It indicates the brands associated with the card number entered by your customer.

You typically use this to apply a styling feature which displays the logo of your customer's global brand.

#### Example event with a single card brand:

```javascript
{
  detail: {
    brands: ["visa"]
  }
}
```

It contains up to two card brands when the SDK detects the global and domestic card brands once your customer enters at least the first 12 digits of their card number.
You typically use this to prompt your customer with a choice of brands to select from to pay their purchase and fulfill the [European Union (EU) Interchange Fee Regulation (IFR) 2015/751](https://eur-lex.europa.eu/eli/reg/2015/751).

See the [Co-branded cards](/products/checkout/web/cobranded-cards) section of our documentation for more details on how to integrate this.

#### Example event with multiple card brands:

```javascript
{
  detail: {
    brands: ["visa","cartesBancaires"]
  }
}
```

### `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:

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

### `wp:funding-type:change`

Triggers once your customer enters at least the first 12 digits of their card number. It indicates the funding type associated with the card number: `credit`, `debit`, `prepaid`, `chargeCard` or `deferredDebit`.

#### Example event body:

```javascript
{
  detail: {
    funding-type: "debit"
  }
}
```

### `wp:card:change`

Deprecated

This event is **deprecated**. You **must not use this** as it may contain **incorrect information** for certain card numbers.
It has been superseded by the `wp:card-brands:change` event and will be removed in the next major version of the SDK.