Skip to content

Checkout JS events

A number of Hyvä checkout specific JavaScript events can be observed. They are mainly useful to initialize callbacks within components that use JavaScript.

checkout:init:after

This event is dispatched once after the preceding request for the checkout completes. It is useful to ensure code that uses the global hyvaCheckout variable can execute correctly.

The checkout:init:after event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

checkout:step:loaded

This event is dispatched on every step, including the first one. It is useful to initialize third party SDKs on the step they are used.

The checkout:step:loaded event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

checkout:navigation:success

This event is triggered every time a visitor navigates to the next or previous step of the checkout.
It is not triggered for the first step that is shown on the initial page load.

The checkout:navigation:success event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

checkout:init:shipping

This event can be useful to initialize event subscribers specific to the shipping step.

The checkout:init:shipping event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

shipping:method:update

This event is dispatched every time a shipping method is updated, for example after the shipping address was changed.

The shipping:method:update event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

checkout:shipping:method-activate

This event is dispatched every time the customer selects a shipping method on the shipping step.

The checkout:shipping:method-activate event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

checkout:payment:method-activate

This event is dispatched every time the customer selects a payment method on the payment step.

The checkout:payment:method-activate event should only be observed by custom code since it is automatically dispatched by the checkout-core module.

clear-messages

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