Client-side events

In order 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 and does not bubble.

Javascript examples

// Start listening to the customer updated event
document.addEventListener("collectorCheckoutCustomerUpdated", listener);
// Start listening to the order validation failed event
document.addEventListener("collectorCheckoutOrderValidationFailed", listener);
// Start listening to the locked event
document.addEventListener("collectorCheckoutLocked", listener);
// Start listening to the unlocked event
document.addEventListener("collectorCheckoutUnlocked", listener);
// Start listening to the reloadedByUser event
document.addEventListener("collectorCheckoutReloadedByUser", listener);
// Start listening to the expired event
document.addEventListener("collectorCheckoutExpired", listener);
// Start listening to the resumed event
document.addEventListener("collectorCheckoutResumed", listener);
// Start listening to the purchase completed event
document.addEventListener("collectorCheckoutPurchaseCompleted", listener);

Description of available events

EventDescription
collectorCheckoutCustomerUpdatedOccurs 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.
collectorCheckoutOrderValidationFailedThis event is only used if you use the optional validate order functionality. Occurs if a purchase is denied due to the result of the backend order validation (in other words if the response from the validationUri set at initialization is not successful). This usually means that one or more items in the cart is no longer in stock.
collectorCheckoutLockedOccurs when no user input should be accepted, for instance during processing of a purchase.
collectorCheckoutUnlockedOccurs 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).
collectorCheckoutReloadedByUserOccurs when the user has clicked a "reload" button in the Checkout. This can occur when there is a version mismatch in the Checkout. An example is when adding an item to the cart and before calling suspend/resume trying to set an alternative delivery address. This will show a message to the user that there is a conflict and the Checkout must be reloaded.
collectorCheckoutExpiredOccurs when the Checkout session has expired. A new Checkout session must be initialized and the new public token set on a new loader script.
collectorCheckoutResumedOccurs 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.
collectorCheckoutPurchaseCompletedOccurs when the purchase has been completed.