← Web Components

Web Components · Cart & Checkout

<mmm-checkout-price-summary>

Order-total breakdown — subtotal, shipping, tax, discount, and grand total. Pure read view of CheckoutStore.priceSummary; updates automatically when shipping method, delivery type, or coupon changes.

Overview

Renders a stacked list of price lines (item subtotal, shipping fee, tax, discount, total). Strike-through compare-at and savings-amount lines appear when relevant. The total row is visually emphasised; the tax line is clickable and opens the <mmm-checkout-tax-details> drawer if present.

When to use

  • In the checkout right column, below cart-info and coupon.
  • As a sticky panel on mobile so the running total stays visible.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-checkout-price-summary></mmm-checkout-price-summary>

Attributes

Every value falls through to the theme; set inline to override.

AttributeTypeDefaultDescription
border-colorstringtheme border / #d9d9d9Card border and the total-row separator.
text-primary-colorstringtheme primary text / #111Grand-total text colour.
text-secondary-colorstringtheme secondary text / #666Line-item text colour.
heading-font-weightstringtheme heading weight / 600Grand-total font weight.
button-font-weightstringtheme button weight / 500Price-value font weight.

Live preview

store sample-store tag <mmm-checkout-price-summary>

Examples

1. Default in the right column

<section class="checkout-right">
  <mmm-checkout-cart-info></mmm-checkout-cart-info>
  <mmm-checkout-coupon></mmm-checkout-coupon>
  <mmm-checkout-price-summary></mmm-checkout-price-summary>
  <mmm-checkout-tax-details></mmm-checkout-tax-details>
</section>

2. Sticky on mobile

<style>
  @media (max-width: 768px) {
    mmm-checkout-price-summary {
      position: sticky;
      bottom: 0;
      z-index: 10;
      background: #fff;
      box-shadow: 0 -0.25rem 0.5rem rgba(0,0,0,0.08);
    }
  }
</style>
<mmm-checkout-price-summary></mmm-checkout-price-summary>