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.
$ prime install @community/pattern-checkout-summary Projection
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>witharia-labelledbypointing 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
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>witharia-labelledbypointing 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
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>witharia-labelledbypointing 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
prime-system/examples/frontend-design/primes/compiled/@community/pattern-checkout-summary/atom.yaml