CheckoutSummary [pattern] v1.0.0

A sidebar panel during checkout listing line items, subtotal, tax, shipping, discounts, and total. Sticky on desktop so the total is always visible while users fill the form; collapsible on mobile.

Facts

Label

Checkout Order Summary

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Without a persistent summary, users lose track of what they are buying and why the total is the total. Surprise totals at the end cause cart abandonment.

Solution

A right-aligned sticky panel listing each line item with thumbnail + qty + price, followed by a math breakdown (subtotal, tax, shipping, discount, total). On mobile, collapse to a sticky bottom bar that expands on tap.

Structure

    <aside aria-labelledby="cs-title" class="checkout-summary">
      <h2 id="cs-title">Order summary</h2>

      <ul role="list" class="line-items">
        <li>
          <img src="/img/desk-pad.jpg" alt="" />
          <div>
            <p class="name">Walnut desk pad</p>
            <p class="meta">Quantity 2</p>
          </div>
          <p class="price"><span class="sr-only">Subtotal </span>$78.00</p>
        </li>
        <li>
          <img src="/img/usb-cable.jpg" alt="" />
          <div>
            <p class="name">USB-C 2m cable</p>
            <p class="meta">Quantity 1</p>
          </div>
          <p class="price">$12.00</p>
        </li>
      </ul>

      <form class="discount" aria-labelledby="discount-h">
        <h3 id="discount-h" class="sr-only">Discount</h3>
        <label for="promo">Promo code</label>
        <input id="promo" name="promo" />
        <button type="submit">Apply</button>
      </form>

      <dl class="totals">
        <dt>Subtotal</dt><dd>$90.00</dd>
        <dt>Shipping</dt><dd>$5.00</dd>
        <dt>Estimated tax</dt><dd>$8.55</dd>
        <dt>Discount (SPRING10)</dt><dd>-$9.00</dd>
        <dt class="grand">Total</dt><dd class="grand" aria-live="polite">$94.55 USD</dd>
      </dl>

      <p class="reassurance">
        <svg aria-hidden="true"></svg>
        Free returns within 30 days
      </p>
    </aside>
  

Uses

• @community/method-heuristic-review

Behavior

• Sticky on desktop (position: sticky; top: 24px) inside a 2-column checkout layout.
• On mobile, summary collapses to a bottom bar showing item count + total + 'Show details' chevron; tap expands a sheet.
• Recompute totals reactively as user changes quantity, applies promo, or selects shipping option.
• Show shipping as 'Calculated at next step' until address is entered, not a fake value.
• Promo input shows inline success ('Saved $9.00') or error ('Code expired') below the field.
• Reassurance trust elements (returns, security) appear directly under the total, not above the page.

A11y

• Wrap in <aside> with aria-labelledby pointing to a heading.
• Use <dl> for the totals breakdown so screen readers pair labels with amounts.
• Total amount uses aria-live='polite' so it re-announces when promo or shipping changes.
• Line item images that duplicate the visible product name use alt='' (decorative).
• Promo input must have a real <label> (visible, not just placeholder).

CheckoutSummary [pattern] v1.0.0

A sidebar panel during checkout listing line items, subtotal, tax, shipping, discounts, and total. Sticky on desktop so the total is always visible while users fill the form; collapsible on mobile.

Facts

Label

Checkout Order Summary

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Without a persistent summary, users lose track of what they are buying and why the total is the total. Surprise totals at the end cause cart abandonment.

Solution

A right-aligned sticky panel listing each line item with thumbnail + qty + price, followed by a math breakdown (subtotal, tax, shipping, discount, total). On mobile, collapse to a sticky bottom bar that expands on tap.

Structure

    <aside aria-labelledby="cs-title" class="checkout-summary">
      <h2 id="cs-title">Order summary</h2>

      <ul role="list" class="line-items">
        <li>
          <img src="/img/desk-pad.jpg" alt="" />
          <div>
            <p class="name">Walnut desk pad</p>
            <p class="meta">Quantity 2</p>
          </div>
          <p class="price"><span class="sr-only">Subtotal </span>$78.00</p>
        </li>
        <li>
          <img src="/img/usb-cable.jpg" alt="" />
          <div>
            <p class="name">USB-C 2m cable</p>
            <p class="meta">Quantity 1</p>
          </div>
          <p class="price">$12.00</p>
        </li>
      </ul>

      <form class="discount" aria-labelledby="discount-h">
        <h3 id="discount-h" class="sr-only">Discount</h3>
        <label for="promo">Promo code</label>
        <input id="promo" name="promo" />
        <button type="submit">Apply</button>
      </form>

      <dl class="totals">
        <dt>Subtotal</dt><dd>$90.00</dd>
        <dt>Shipping</dt><dd>$5.00</dd>
        <dt>Estimated tax</dt><dd>$8.55</dd>
        <dt>Discount (SPRING10)</dt><dd>-$9.00</dd>
        <dt class="grand">Total</dt><dd class="grand" aria-live="polite">$94.55 USD</dd>
      </dl>

      <p class="reassurance">
        <svg aria-hidden="true"></svg>
        Free returns within 30 days
      </p>
    </aside>
  

Uses

• @community/method-heuristic-review

Behavior

• Sticky on desktop (position: sticky; top: 24px) inside a 2-column checkout layout.
• On mobile, summary collapses to a bottom bar showing item count + total + 'Show details' chevron; tap expands a sheet.
• Recompute totals reactively as user changes quantity, applies promo, or selects shipping option.
• Show shipping as 'Calculated at next step' until address is entered, not a fake value.
• Promo input shows inline success ('Saved $9.00') or error ('Code expired') below the field.
• Reassurance trust elements (returns, security) appear directly under the total, not above the page.

A11y

• Wrap in <aside> with aria-labelledby pointing to a heading.
• Use <dl> for the totals breakdown so screen readers pair labels with amounts.
• Total amount uses aria-live='polite' so it re-announces when promo or shipping changes.
• Line item images that duplicate the visible product name use alt='' (decorative).
• Promo input must have a real <label> (visible, not just placeholder).

Examples

• @community/example-stripe-checkout-summary
• @community/example-shopify-checkout
• @community/example-amazon-cart-review

Relations

related: [@community/pattern-pricing-tiers-toggle, @community/pattern-inline-validation, @community/check-form-label-associated, @community/check-error-message-associated, @community/check-form-validation-inline, @community/rule-aria-native-first, @community/rule-keyboard-tab-order, @community/check-focus-visible, @community/anti-pattern-color-only-meaning] compatible: [@community/pattern-pricing-tiers-toggle, @community/pattern-multi-step-wizard]

Label

Checkout Order Summary

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Without a persistent summary, users lose track of what they are buying and why the total is the total. Surprise totals at the end cause cart abandonment.

Solution

A right-aligned sticky panel listing each line item with thumbnail + qty + price, followed by a math breakdown (subtotal, tax, shipping, discount, total). On mobile, collapse to a sticky bottom bar that expands on tap.

Structure

    <aside aria-labelledby="cs-title" class="checkout-summary">
      <h2 id="cs-title">Order summary</h2>

      <ul role="list" class="line-items">
        <li>
          <img src="/img/desk-pad.jpg" alt="" />
          <div>
            <p class="name">Walnut desk pad</p>
            <p class="meta">Quantity 2</p>
          </div>
          <p class="price"><span class="sr-only">Subtotal </span>$78.00</p>
        </li>
        <li>
          <img src="/img/usb-cable.jpg" alt="" />
          <div>
            <p class="name">USB-C 2m cable</p>
            <p class="meta">Quantity 1</p>
          </div>
          <p class="price">$12.00</p>
        </li>
      </ul>

      <form class="discount" aria-labelledby="discount-h">
        <h3 id="discount-h" class="sr-only">Discount</h3>
        <label for="promo">Promo code</label>
        <input id="promo" name="promo" />
        <button type="submit">Apply</button>
      </form>

      <dl class="totals">
        <dt>Subtotal</dt><dd>$90.00</dd>
        <dt>Shipping</dt><dd>$5.00</dd>
        <dt>Estimated tax</dt><dd>$8.55</dd>
        <dt>Discount (SPRING10)</dt><dd>-$9.00</dd>
        <dt class="grand">Total</dt><dd class="grand" aria-live="polite">$94.55 USD</dd>
      </dl>

      <p class="reassurance">
        <svg aria-hidden="true"></svg>
        Free returns within 30 days
      </p>
    </aside>
  

Uses

• @community/method-heuristic-review

Behavior

• Sticky on desktop (position: sticky; top: 24px) inside a 2-column checkout layout.
• On mobile, summary collapses to a bottom bar showing item count + total + 'Show details' chevron; tap expands a sheet.
• Recompute totals reactively as user changes quantity, applies promo, or selects shipping option.
• Show shipping as 'Calculated at next step' until address is entered, not a fake value.
• Promo input shows inline success ('Saved $9.00') or error ('Code expired') below the field.
• Reassurance trust elements (returns, security) appear directly under the total, not above the page.

A11y

• Wrap in <aside> with aria-labelledby pointing to a heading.
• Use <dl> for the totals breakdown so screen readers pair labels with amounts.
• Total amount uses aria-live='polite' so it re-announces when promo or shipping changes.
• Line item images that duplicate the visible product name use alt='' (decorative).
• Promo input must have a real <label> (visible, not just placeholder).

Compatible

• @community/pattern-pricing-tiers-toggle
• @community/pattern-multi-step-wizard