# Order summary

Order summary: a free component, built on your design tokens, to use at checkout, beside the payment step. A checkout summary: two line items with quantity steppers, a promo code with the applied code shown as a chip, the totals and a Pay button that shows the amount.

Prompt: Add the OpenDesigner component order-summary to this project: https://opendesigner.dev/library/r/order-summary.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: code applied, code removed, invalid code, quantity at minimum, hover, pressed, focus.

Accessibility: Steppers are labelled groups of real buttons with an output that announces the new quantity; the code field has a name, a wrong code is announced as an alert, and the chip's remove button names the code.

File: https://opendesigner.dev/library/r/order-summary.html