OrderCostSummary container

The OrderCostSummary container displays detailed order costs on the Order Details and Return Details pages. It includes the following sections:

• Subtotal: Displays the total cost of all items in the order before applying discounts, taxes, or additional charges.
• Shipping: Displays the shipping cost, which depends on the shipping method, location, and weight of the order.
• Discount: Displays any applicable discounts, such as promotional or volume-based offers, subtracted from the subtotal.
• Coupon: Displays the value of any applied coupons and their impact on the final cost.
• Tax: Displays the tax amount added to the order, calculated based on jurisdiction and item type.
• Total: Displays the final payable amount, including all adjustments such as discounts, shipping, and taxes.

If a value is not provided for any section (such as no discount or coupons are applied), the corresponding line is hidden. This ensures the container only displays relevant information.

The settings for displaying tax amounts can be configured at Stores > Configuration > Sales > Tax > Order, Invoices, Credit Memos Display Settings.

Configurations

The OrderCostSummary container provides the following configuration options:

Example

The following example demonstrates how to render the OrderCostSummary container:

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