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

Buyer Portal Checkout Extensibility lets you extend the default checkout journey with capabilities aligned to your business model, such as external integrations and custom UI. Using extension points across all Checkout stages (Cart, Delivery, Review, Payment, and Order Placed), you can render your own components without changing checkout's core behavior.

The technical aspects of Checkout extensions are covered in the following articles:

• Setting up Buyer Portal Checkout: Install the Buyer Portal Checkout modules in your FastStore monorepo, create a Checkout project, and preview your extensions in development.
• Getting started with Checkout extensions: Understand the structure of a Buyer Portal Checkout extensions project and build your first extension.
• Deploying Checkout extensions: Deploy your extensions to production, generate preview deploys, and troubleshoot build failures.
• Using CSS in Checkout extensions: Style your extensions using CSS Modules, global imports, and CSS variables.
• Data-layer and data-fetching in Checkout extensions: Access the Checkout data layer with hooks and fetch data from VTEX or external APIs.
• Checkout extension points: Explore the available extension points across all Checkout stages, learn how to deal with layout shift, and display extension points in dev mode.
• • Punchout cart integration: Customize the Punchout cart screen using Checkout extension points, allowing buyers to transfer their cart back to the eprocurement system.

Consult the hooks available to access the data layer and perform actions from your extensions:

• useCart hook: Access cart data and perform mutations that are reflected across the checkout data layer.
• useCartItem hook: Access detailed information about the current cart item.
• useCartPunchout hook: Access cart data and perform mutations on the Punchout cart screen.
• useRedirect hook: Redirect the user to another page.
• useSettings hook: Access checkout settings, such as branding data like logos and colors.
• useExtension hook: Access information about the current account and the extension point where your extension is running.