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.

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.
2. When receiving a walleyCheckoutCustomerUpdated, get checkout information of what has been updated.

Javascript examples

// 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 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 for more details.
walleyCheckoutPurchaseCompleted	Occurs when the purchase has been completed.
walleyCheckoutShippingUpdated	Only available when Delivery Module is used. Indicates that the delivery selection has changed.
walleyCheckoutCrmUpdated	Only available when Loyalty Booster is used. Occurs when the customer has changed any information for the CRM module, such as toggling to apply for membership.
walleyCheckoutOrderValidationFailed	Occurs when order validation 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.