Checkout containers overview

In this section, we describe the common properties of Checkout components that can be applied and used in the same way.

Title and heading customization

Each container provides a title and a heading by default. If you want to hide the title or provide customized title, you can use the following interface.

TitleProps interface

The TitleProps interface provides the following configuration options:

The container receives an object that implements the TitleProps interface with the following properties:

export interface TitleProps {
  displayTitle?: boolean;
  slots?: {
    Title?: SlotProps;
  };
}

• The displayTitle property set to true displays the title of the container; otherwise, the title will be hidden.
• The slots property is an object containing the following properties:
  • The Title property is a handler used to render a customized title content.

Active property

The active property indicates whether the container is active. When set to false, the container becomes non-reactive, meaning it will not respond to system events, will not subscribe to them, and will not be displayed in the user interface.

active prop declaration

active?: boolean;

Behavior:

• When active is true:
  • The container subscribes to system events
  • It renders in the user interface and it is visible (shows a skeleton or renders the component in the UI)
  • It executes its normal operations
• When active is false:
  • The container does not subscribe to system events
  • It does not render in the user interface and its visibility is set to false
  • Side effects and state updates are not executed

Example of active prop definition

In the following example, the ShippingMethods container will be deactivated; this means it will not be rendered to the UI and will not listen to system events.

CheckoutProvider.render(ShippingMethods, {
  UIComponentType: 'ToggleButton',
  displayTitle: false,
  active: false,
})($deliveryMethods),

AutoSync property

The autoSync property determines whether the container automatically synchronizes its state changes with the backend via API calls. When set to false, the container does not automatically synchronize its state, but still maintains local updates.

autoSync prop declaration

autoSync?: boolean;

Behavior:

• When autoSync is true:
  • Local changes are synchronized with the backend
  • GraphQL mutations are executed when selection or local state changes
  • The remote cart is automatically updated
• When autoSync is false:
  • Changes are only maintained locally
  • No automatic GraphQL mutations are performed on the backend
  • Control of mutations is passed to parent or external components

Use cases:

• In multi-step checkout flows where you want to control when data is sent to the backend
• For nested containers where a parent container handles synchronization
• In implementations that need additional validation before sending data

Example of autoSync prop definition

In the following example, the ShippingMethods container will not automatically synchronize its state changes with the backend; this means it will not automatically set the shipping method selected on the cart.

CheckoutProvider.render(ShippingMethods, {
  UIComponentType: 'ToggleButton',
  displayTitle: false,
  autoSync: false,
})($deliveryMethods),