Customize a Checkout Component for a B2B or B2C Store (LWR)

You can customize checkout components to extend the default checkout processing for a B2B or B2C store created with an LWR template.

Custom components can be added anywhere in the checkout workflow, which is designed with a nested hierarchy. This hierarchy is structured into three primary levels: a layout component, section components, and child components. Additionally, certain components like the Place Order Button and Checkout Notification components are directly placed on the Checkout Page. For more information, see Checkout Component Hierarchy.

Before implementing a custom checkout component, understand how the component will integrate and communicate within the established checkout hierarchy.

• On the checkout page for a B2B or B2C store created with an LWR template, child checkout components implement the useCheckoutComponent mixin interface to integrate with the checkout process of form validation and the synchronization of external API validations. See UseCheckoutComponent Interface.
• The checkout component communication framework supports the interaction between components, enabling data sharing and event handling that are crucial for a dynamic and responsive checkout experience. Two checkout layout options and corresponding processing flows are supported: one-page and accordion. For details, See Checkout Component Communication.

The sample Terms and Conditions Component demonstrates how to implement a custom checkout component, including the four necessary files. To get started, see Sample Custom Checkout Component.