Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos

CustomerDetails container

The CustomerDetails container organizes customer and order information into the following sections:

  • Contact details
  • Shipping address
  • Billing address
  • Shipping method
  • Payment method
  • Return details:

The return details section is available exclusively on return pages. It provides information about the return.

CustomerDetails container

CustomerDetails container

Configurations

The CustomerDetails container provides the following configuration options:

OptionsTypeReq?Description
paymentIconsMapRecordNoConfigures the icon list by specifying key-value pairs to set custom icons where value can be either the name of SDK icon or custom SVG icon.
orderDataOrderDataModelNoA structured object containing transformed order data. It can be used as an initial value if data is not fetched from the backend, serving as a fallback.
titlestringNoEnables setting a custom title to replace the default one during container interaction.
classNamestringNoAllows custom CSS classes to be applied to the form.
slots.OrderReturnInformationSlotPropsNoAllows adding or expanding information return details section by including additional data or attributes.

Example

The following example demonstrates how to integrate the CustomerDetails container:

export default async function decorate(block) {
  await orderRenderer.render(CustomerDetails, {})(block);
}