---
id: clientevents
title: Client-side events
hide_title: true
description: "Client side or frontend side events for Walley Checkout"
---

import Ingress from "../../../src/components/ingress/ingress.react";

<Ingress title="Client-side events">
  To provide a better customer experience, you can listen to custom
  client-side events and take appropriate action. All events are dispatched
  using the global document object as target and cannot be cancelled or
  bubbled.
</Ingress>

:::info Important
Do not rely on client-side events for business critical functionality. Use the api to retrieve information. For example:

1. Instead of relying only on `walleyCheckoutPurchaseCompleted`, listen for the Completed Purchase [callback](/docs/checkout/notificationcallback).
1. When receiving a `walleyCheckoutCustomerUpdated`, [get checkout information](/docs/checkout/getcheckoutinformation) of what has been updated.
   :::

## Javascript examples

```javascript
// Start listening to the customer updated event
document.addEventListener("walleyCheckoutCustomerUpdated", listener);

// Start listening to the locked event
document.addEventListener("walleyCheckoutLocked", listener);

// Start listening to the unlocked event
document.addEventListener("walleyCheckoutUnlocked", listener);

// Start listening to the resumed event
document.addEventListener("walleyCheckoutResumed", listener);

// Start listening to the purchase completed event
document.addEventListener("walleyCheckoutPurchaseCompleted", listener);

// Start listening to the shipping updated event
document.addEventListener("walleyCheckoutShippingUpdated", listener);

// Start listening to the CRM updated event
document.addEventListener("walleyCheckoutCrmUpdated", listener);

// Start listening to the voucher updated event
document.addEventListener("walleyCheckoutVoucherUpdated", listener);

// Start listening to the validation failed event
document.addEventListener("walleyCheckoutOrderValidationFailed", listener);

// Start listening to the payment aborted event
document.addEventListener("walleyCheckoutPaymentAborted", listener);
```

## Description of available events

| Event                                   | Description                                                                                                                                                                                                                                                                                                   |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **walleyCheckoutCustomerUpdated**       | Occurs when the Checkout client-side detects any change to customer information, such as a changed email, mobile phone number or delivery address. This event is also fired the first time the customer is identified.                                                                                        |
| **walleyCheckoutLocked**                | Occurs when no user input should be accepted, for instance during processing of a purchase.                                                                                                                                                                                                                   |
| **walleyCheckoutUnlocked**              | Occurs after a locked event when it is safe to allow user input again. For instance after a purchase has been processed (regardless of whether the purchase was successful or not).                                                                                                                           |
| **walleyCheckoutResumed**               | Occurs when the Checkout has loaded new data and is back in its normal state after a suspend. See section [Client-side API](/docs/checkout/optional/clientapi) for more details.                                                                                                                              |
| **walleyCheckoutPurchaseCompleted**     | Occurs when the purchase has been completed.                                                                                                                                                                                                                                                                  |
| **walleyCheckoutShippingUpdated**       | Only available when [Delivery Module](/docs/checkout/delivery/introduction-delivery-module) is used. Indicates that the delivery selection has changed.                                                                                                                                                       |
| **walleyCheckoutCrmUpdated**            | Only available when [Loyalty Booster](/docs/checkout/loyalty-booster/loyalty-booster) is used. Occurs when the customer has changed any information for the CRM module, such as toggling to apply for membership.                                                                                             |
| **walleyCheckoutVoucherUpdated**        | Occurs when the voucher state on the order changes, for instance when a voucher is applied, removed or fails to redeem. The event is dispatched with an empty payload, so [get checkout information](/docs/checkout/getcheckoutinformation) to retrieve the updated order state.                              |
| **walleyCheckoutOrderValidationFailed** | Occurs when [order validation](/docs/checkout/optional/validateorder) returns a non-2XX response. If a `clientPayload` object is returned in the validation response, it is sent as a `payload` parameter here. This can be useful if the client-side code needs information about why the validation failed. |
| **walleyCheckoutPaymentAborted**        | When the payment is aborted, a payload is sent to describe the reason and, if applicable, the error code. See payload specification below.                                                                                                                                                                    |

### walleyCheckoutPaymentAborted payload

```
{
  reason: 'ERROR' | 'USER_CANCELLED',
  errorCode: 'AGE_RESTRICTED_CART' | 'DENIED' | 'UNKNOWN_ERROR'
}
```

- `ERROR`: This reason could have many different causes, some of which can be identified by the error codes below:
  - `AGE_RESTRICTED_CART`: The purchase has been aborted due to items in the cart having age restrictions.
  - `DENIED`: The purchase cannot be completed using the selected payment method given the current conditions.
  - `UNKNOWN_ERROR`: This error code will be used for all other error scenarios.
- `USER_CANCELLED`: This reason can occur when the user cancels the process. This can happen due to various reasons, such as a change of mind or an accidental click. The user can retry.