This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

Checkout offers a variety of extension points across all of its stages, including cart, delivery, cart review, and order placed. These extension points allow you to extend the UX/UI of Checkout to meet your store's specific needs.

Before implementing extensions, make sure you have set up Buyer Portal Checkout.

The following table lists all available extension points, the Checkout stage where they render, and whether they may cause layout shift.

Extension point	Stage	Description	Layout shift
layout.footer	Global	Render content in the Checkout footer, available across all Checkout pages.	No
cart.cart-list.before	Cart	Render content before the cart item list.	Yes ⚠️
cart.cart-list.after	Cart	Render content after the cart item list.	No
cart.cart-item.after	Cart	Render content below each cart item row.	Yes ⚠️
cart.assembly-options.button.after	Cart	Render content after the assembly options button of a cart item.	Yes ⚠️
cart.order-summary.after	Cart	Render content below the order summary on the cart page.	Yes ⚠️
cart.order-button.after	Cart	Render content after the main order button on the cart page.	Yes ⚠️
punchout.cart-item.after	Cart Punchout	Render content below each cart item row on the Punchout cart screen.	Yes ⚠️
punchout.order-summary.cta	Cart Punchout	Render a primary action (call to action) in the Punchout order summary.	No
delivery.cart-item.after	Delivery	Render content below each cart item row on the delivery stage.	Yes ⚠️
delivery.information-form.after	Delivery	Render content after the delivery information form.	Yes ⚠️
delivery.order-button.after	Delivery	Render content after the order button on the delivery stage.	Yes ⚠️
review.cart-item.after	Review	Render content below each cart item row on the review stage.	Yes ⚠️
payment.cart-item.after	Payment	Render content below each cart item row on the payment stage.	Yes ⚠️
payment.order-button.after	Payment	Render content after the order button on the payment stage.	Yes ⚠️
order-placed.cart-item.after	Order Placed	Render content below each cart item row on the order placed stage.	Yes ⚠️

Some extension points may cause layout shifts and are marked with Yes ⚠️ in the table above. If your extension relies on data fetching (for example, Fetch API calls), reserve space to handle dynamic content smoothly by using loading states and skeletons. Fully static extensions and extensions that rely solely on data-layer hooks (such as useCart) shouldn't cause layout shifts, because Checkout always renders extensions seamlessly within the existing layout. Even so, implementing skeletons or loading states is recommended to improve the overall UX/UI.

These extension points are global and available across all Checkout pages, from the cart to the order placed stage.

Use this extension point to render content in the Checkout footer. Since it's global, the content is displayed consistently across all Checkout pages.

Use the following extension points to customize different areas of the cart experience.

Render content before the cart item list, ideal for cart-level messaging that should appear above the items. Use the useCart hook to access and mutate cart data.

Render content after the cart item list and before the bottom of the cart page. Use the useCart hook to access and mutate cart data.

Render content immediately below each cart item row, allowing you to attach item-specific content such as warranties, services, or custom details for that product. Use the useCartItem hook to access data for the current item and the useCart hook to access and mutate cart data.

Render content after the assembly options button of a cart item. Use the useCart hook to access and mutate cart data.

Append components under the order summary on the cart page, such as financing simulators, loyalty messages, or upsell suggestions.

Render content after the main order button on the cart page.

Use the following extension points to customize the Punchout cart screen.

Render content below each cart item row on the Punchout cart screen, for example to add per-item options or attachments. Use the useCartPunchout and useCartItem hooks to read and update the cart.

Render a primary action button in the Punchout order summary sidebar, typically used to transfer the cart back to the eprocurement system. Use the useRedirect hook to redirect the user to a target URL.

Use the following extension points to customize the delivery stage.

Render content below each cart item row on the delivery stage. Use the useCartItem hook to access data for the current item.

Render content after the delivery information form.

Render content after the order button on the delivery stage.

Use the following extension point to customize the review stage.

Render content below each cart item row on the review stage. Use the useCartItem hook to access data for the current item.

Use the following extension points to customize the payment stage.

Render content below each cart item row on the payment stage. Use the useCartItem hook to access data for the current item.

Render content after the order button on the payment stage.

Use the following extension point to customize the order placed stage.

Render content below each cart item row on the order placed stage. Use the useCartItem hook to access data for the current item.

You can view all available extension points directly in the Checkout UI. To do this, run Checkout using the Checkout CLI with the --show-placeholders flag (see the Checkout CLI documentation for more information):

The --show-placeholders flag tells Checkout to display placeholders where extension points are located.