Discounts
Preview Available in release assets
Submit discount codes to the server and render authoritative eligibility, errors, applied discounts, and recalculated totals.
Server contract
The application owns the route for this supporting commerce state renders the complete server-owned discounts view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.
Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.
Discounts primary example
<section class="thin-discounts" aria-labelledby="discount-title">
<h2 id="discount-title">Discounts</h2>
<form action="/checkout/discounts" method="post">
<div class="thin-field">
<label for="discount-code">Discount code</label>
<input class="thin-input" id="discount-code" name="code" autocomplete="off" aria-invalid="true" aria-describedby="discount-error" value="SUMMER" />
<p id="discount-error">This code is not valid for the items in your cart.</p>
</div>
<button class="thin-button">Apply code</button>
</form>
<ul aria-label="Applied discounts">
<li>
<span>WELCOME10 — 10% off</span>
<form action="/checkout/discounts/WELCOME10/remove" method="post">
<button class="thin-button" data-variant="quiet">Remove <span class="thin-visually-hidden">WELCOME10 discount</span>
</button>
</form>
</li>
</ul>
<p role="status">Discounts are verified and totals recalculated by the server.</p>
</section>Show code
<section class="thin-discounts" aria-labelledby="discount-title">
<h2 id="discount-title">Discounts</h2>
<form action="/checkout/discounts" method="post">
<div class="thin-field">
<label for="discount-code">Discount code</label>
<input class="thin-input" id="discount-code" name="code" autocomplete="off" aria-invalid="true" aria-describedby="discount-error" value="SUMMER" />
<p id="discount-error">This code is not valid for the items in your cart.</p>
</div>
<button class="thin-button">Apply code</button>
</form>
<ul aria-label="Applied discounts">
<li>
<span>WELCOME10 — 10% off</span>
<form action="/checkout/discounts/WELCOME10/remove" method="post">
<button class="thin-button" data-variant="quiet">Remove <span class="thin-visually-hidden">WELCOME10 discount</span>
</button>
</form>
</li>
</ul>
<p role="status">Discounts are verified and totals recalculated by the server.</p>
</section>Anatomy
- Code form
- Visible field error
- Applied discount list
- Remove form
- Server status
Variants and sizes
- Neutral theme
- Thin-Sky theme
- Intrinsic narrow and wide containers
Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
- No code
- Applied
- Invalid
- Ineligible
- Expired
- Pending
- Server error
Structured state fixtures are not published for this item yet.
Interaction and keyboard behavior
Normal links and forms navigate and submit to server routes. Returned HTML owns prices, inventory, discounts, validation, totals, and order state.
Accessibility
Use landmarks, headings, labelled native controls, linked error summaries, visible status text, logical reading order, and non-color state cues. Move focus on server navigation, not speculative client updates.
- Contract
COMPOSE- Basis
- Native forms, tables/lists, headings, links, and status content; no APG widget
- Evidence
tests/unit/library/cart-checkout.test.ts
API
The application owns the route for this supporting commerce state renders the complete server-owned discounts view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.
Behavior tier: dependency-free
Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.
Fallback
Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.
Assets and dependencies
/foundation.css/layouts.css/components.css/patterns/ecommerce.css
Dependencies: field, quantity-input, alert, status, steps
Source: packages/ui/src/style/ecommerce.ts
Composition
Derived from the examples and style specs, not authored.