Voog checkout v2 emits various events in the voog:checkout
namespace, documented below. Note that
the on-site modal uses the v1 API, documented here. The following only applies to the self-standing checkout
module.
Conceptually, the checkout flow is a directed (but not necessarily acyclic) graph through the following phases. Parenthesized entries are external to the checkout module, but included here for completeness.
The emitted events are CustomEvent
objects, containing an Object
payload in the detail
field. Every
event’s payload contains the following fields, not documented separately below:
cart
or order
— The relevant object. Before checkout, it is a
Cart, after checkout, an
Order. The commit
event fired after the
payment phase contains both.version
— 2
.Some events may be cancelled. Cancelling an event prevents its default action to take place. A
cancelable event receives the advance
callback in its payload which may be invoked to execute the
default action at a later time. To cancel an event, call its preventDefault
method. For example,
do delay the default action for 2000 ms:
document.addEventListener(`voog:checkout:close`, e => { e.preventDefault(); setTimeout(() => e.detail.advance(), 2000); });
voog:checkout:show
Emitted upon displaying a sub-view of the checkout flow.
Fields:
view
customer
— Customer information form.shipping
— Shipping options form.payment
— Payment options form.return
— The return view.cartcontent
— The cart content view, on narrow viewports only.result
— Only if view
is return
; the result returned from the payment gateway.
invoice
— The user chose the offline payment option and was not directed to an external
payment gateway.success
pending
failed
cancelled
voog:checkout:commit
Emitted upon successfully committing changes to the server.
Fields:
kind
— A field signalling what kind of payload was commited.
customer
— Customer information.shipping
— Shipping options.payment
— Payment options. Note that on return, the Cart object has been checked out into an
Order object and both are included in the event payload. By cancelling this event, redirection
to the payment gateway is prevented.discount
— A discount code.advance
— Callback for the default action, see above.This event may be cancelled to prevent advancing to the subsequent view (or payment gateway, if
kind
is payment
).
voog:checkout:changeshippingmethod
Emitted upon the user selecting a shipping method. The passed Cart object contains the updated shipping method information.
voog:checkout:changeshippingoption
Emitted upon the user selecting a shipping method option. The passed Cart object contains the updated shipping method information.
voog:checkout:changepaymentmethod
Emitted upon the user selecting a payment method.
Fields:
gateway_code
— The gateway code.payment_method
— The payment method code.voog:checkout:close
Emitted upon the user navigating away from the checkout module outside of the flow.
Fields:
view
— See voog:checkout:show
.reason
close
— The user interacted with an element on the page redirecting back to the store.history
— The user navigated back in the browser history.advance
— Callback for the default action, see above.This event may be cancelled to prevent navigating away from the checkout flow.
voog:checkout:error
Emitted upon an error event. Currently only events for errors pertaining to loading the cart object are emitted.
Fields:
action
— load
message
— A human-readable message describing the error condition.