Skip to content

Events

API

checkout:init:*

If you specifically rely on a certain API section being fully initialised, you can listen for that particular section by replacing the * with your preferred subsection. Subsections are parts of the Frontend API that separate concerns into smaller, more clearly defined sections.

window.addEventListener('checkout:init:storage', () => {
    console.log('Storage initialized');
});

checkout:init:after

If you simply want to know when everything has been successfully initialised, use the checkout:init:after event.

checkout:init:done

For those rare scenarios where you need to wait even longer than after, use the checkout:init:done event.

Storage

checkout:storage:changed

Listen for any type of storage change.

Validation

checkout:validation:register

Listen for when a validation callback is being registered.

checkout:step:loaded

An important event that informs you when a step has been loaded. This can either be after page load, which is referred to as preceding, or dynamically via navigation, which is then a subsequent step.

window.addEventListener('checkout:step:loaded', event => {
  const requestType = event.detail.subsequent ? 'subsequent' : 'preceeding';

  console.log(`Checkout Step: ${event.detail.route}, Request Type: ${requestType}`);
});

checkout:navigation:success

This event is triggered every time a visitor navigates to the next or previous step of the checkout. Unlike the checkout:step:loaded event, it is not triggered for the first step shown on initial page load.

Shipping

checkout:shipping:method-activate

This event is dispatched every time the customer selects a shipping method on the shipping step, or the shipping step is rendered with a selected shipping method.

The event payload contains the selected shipping method code.

window.addEventListener('checkout:shipping:method-activate', event => {
  console.log(`Selected shipping method: ${event.detail.method}`);
});

Payment

checkout:payment:method-activate

This event is dispatched every time the customer selects a payment method on the payment step and when the payment list is rendered with a selected payment method.
The event payload contains the selected payment method code.

window.addEventListener('checkout:payment:method-activate', event => {
  console.log(`Selected payment method: ${event.detail.method}`);
});

payment:method:registered

Listen for when a payment method is being registered.

payment:method:success

Listen for when the payment component is on the page and doesn't have any backend errors, such as no method being selected.

Evaluation

checkout:evaluation-process:after

Normally, this isn't an event anyone will need to listen for.

However, for those rare situations where you do want to know whether a particular evaluation result has been processed, this is the right event for the job.

Miscellaneous

clear-messages

This event can be dispatched to clear all flash messages on the page. It can also be observed to clear custom messages on components.

window.dispatchEvent(new Event('clear-messages'));