pattern @community/pattern-checkout-summary

Checkout Summary

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.

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 4.0
Edges: 11 out · 2 in
Tokens: 64/790/1571

$ prime install @community/pattern-checkout-summary

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

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.

Loaded when retrieval picks the atom as adjacent / supporting.

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

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).

Loaded when retrieval picks the atom as a focal / direct hit.

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

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

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

Label

Checkout Order Summary

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

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

Source

where the compiled artifact came from

prime-system/examples/frontend-design/primes/compiled/@community/pattern-checkout-summary/atom.yaml

Compiled at 2026-05-07