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 (not dispatched), since it is automatically dispatched by the hyva-checkout 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. new CustomEvent('checkout:step:loaded', { detail: Object.assign({}, current, { subsequent: false }) }) 

window.addEventListener('checkout:step:loaded', event => {
  const requestType = event.detail.subsequent ? 'subsequent' : 'preceeding';
  console.log(`Checkout Step: ${event.detail.route}, Request Type: ${requestType}`);
}, {once: true})
If you render the observer in a component that is only present on one checkout step, be sure to add the {once: true} option to avoid the event listener being registered multiple times during step navigation.

The checkout:step:loaded event should only be observed (not dispatched), since it is automatically dispatched by the hyva-checkout 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.

If you render the observer in a component that is only present on one checkout step, be sure to add the {once: true} option to avoid the event listener being registered multiple times during step navigation.

The checkout:navigation:success event should only be observed (not dispatched), since it is automatically dispatched by the hyva-checkout module.

checkout:init:payment and checkout:init:shipping

These events are triggered once, after the preceding request to the checkout page completes.
They are not triggered for a step specifically.

All checkout:init:* events

There are more events like these, but they are probably only useful to the internal hyva-checkout module implementation, and not so much for custom checkout components.
At the time of writing, the full list of checkout init events are

  • checkout:init:evaluation
  • checkout:init:loader
  • checkout:init:main
  • checkout:init:message
  • checkout:init:navigation
  • checkout:init:order
  • checkout:init:payment
  • checkout:init:shipping
  • checkout:init:validation
  • checkout:init:viewport

These events are used by the hyva-checkout module to initialize event subscribers specific to the given domain.
They can also be used by custom components for the same purpose.

All these events should only be observed (not dispatched), since they are automatically dispatched by the hyva-checkout module.

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}`);
}, {once: true})
If you observe the event in a shipping method template, be sure to add the {once: true} option to avoid multiple event observers to be registered with the browser, every time the shipping method is selected.

The checkout:shipping:method-activate event should only be observed (not dispatched), since it is automatically dispatched by the hyva-checkout module.

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}`);
}, {once: true})
If you observe the event in a payment method template, be sure to add the {once: true} option to avoid multiple event observers to be registered with the browser, every time the payment method is selected.

The checkout:payment:method-activate event should only be observed (not dispatched), since it is automatically dispatched by the hyva-checkout 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.

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