---
schema_version: "1"
id: ea2676a757d7c8a6cf2354546cf576e68529fe9b3e291d977b4fb7418c45b770
title: Customize a Checkout Component for a B2B or B2C Store (LWR)
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-b2c-comm-create-checkout-component.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-create-checkout-component.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 03042a76318418b101a7af0c8d405971c69eededaedf780ffe78a3b772bedb05
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# 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 Component Placement

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](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-component-hierarchy.htm).

## Integration and Communication

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](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-checkoutsavable.htm).
- 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](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-component-communication.htm).

## Considerations

**note:** Requests that modify cart or checkout resources must be executed sequentially. Concurrent requests that modify WebCart or related records cause Version Mismatch Exceptions or Checkout Conflict errors. Ensure each request completes before sending the next.

## Example

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](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-sample-checkout-component.htm).