Discount & promo code UX
A frictionless promo flow that rewards users without breaking purchase momentum. Built for Meridian's checkout surface.
The problem
Most promo fields are hidden behind a “Have a code?” toggle. Users who miss it feel cheated when they see a discount field on the next page. Users who find it abandon cart to hunt for codes.
The pattern
- Always visible. The promo field lives inline in the order summary, never behind a toggle.
- Instant validation.On blur, the field calls a lightweight endpoint. A violet checkmark or pink error inline — no toasts.
- Applied pill. Once valid, the code renders as a removable pill above the total: “SUMMER20 (−$12.00)” with a small × to remove.
- Strikethrough total.Original price struck through, discounted total in violet. The delta is explicit.
Edge cases
- Stacking. Only one code per order. If a second is entered, replace the first with a brief “Swapped” flash.
- Expired codes.Show “This code expired on [date]” in pink below the field. Do not clear the input.
- Minimum not met.“Add $X.XX more to use this code.” The field stays populated so the user can return after adding items.
- Already claimed.Per-account limits enforced server-side. Message: “You've already used this code.”
States
| State | Indicator | Color |
|---|---|---|
| Idle | Placeholder text | Gray |
| Valid | Checkmark + pill | Violet |
| Invalid | Inline error | Pink |
| Loading | Spinner in field | Violet |
Implementation note: Debounce validation at 300ms. Never block checkout while validating — resolve optimistically and roll back on failure. Store applied code in session so it survives page navigation.