Custom checkout component in an LWR store
Key Takeaway
A custom checkout component joins checkout through useCheckoutComponent(LightningElement), and its stageAction() hook can block processing by resolving to false.
A custom checkout component is a Lightning Web Component that you add to the checkout page of a B2B or B2C store built with an LWR template. You use it to extend the default checkout processing. The component joins checkout by extending useCheckoutComponent, so it can validate its own data, save changes, report errors, and take part in placing the order.
How the checkout page is built
The LWR checkout page uses a three-level hierarchy.
- A layout component sits at the top and sets the workflow.
- Section components sit inside the layout component and group related child components. For example, a Shipping section can hold a Shipping Address component and a Shipping Instructions component.
- Child components sit inside the section components.
All three levels rely on the checkout data provider.
The Place Order Button and Checkout Notification components sit directly on the checkout page, so they are not part of the layout, section and child hierarchy.