Order Summary

Beta

The totals for the cart and checkout: subtotal, delivery, VAT and total, a promo code, the checkout button and the accepted payment methods.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add order-summary
Also works with shadcn: npx shadcn@latest add @ritla/order-summary
Dependencies it brings
buttonfieldpayment-markprice
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

order-summary.tsx

import { OrderSummary } from "@/components/ui/order-summary";<OrderSummary  lines={[    { label: "Subtotal (2 items)", amount: 640 },    { label: "Delivery", amount: 0 },    { label: "VAT (16%)", amount: 102.4 },  ]}  total={742.4}  onApplyPromo={applyPromo}  onCheckout={checkout}  payments={["visa", "mastercard", "apple-pay", "mada"]}/>

API reference

OrderSummary

Prop	Type	Default	Description
`lines`	`{ label, amount?, value? }[]`	None	The lines, in order. `amount: 0` reads “Free”; `value` takes any other text.
`total`	`number`	None	The total, announced politely when it changes.
`currency / fractionDigits`	`string / number`	`"JOD" / 2`	As on Price.
`onApplyPromo`	`(code) => void`	None	The promo code field and its Apply button. Without it the field is hidden.
`onCheckout / checkoutLabel`	`() => void / ReactNode`	None	The main button (“Checkout”). Leave it out on the checkout page itself, where the form has its own Pay button.
`payments`	`PaymentMarkName[]`	None	The accepted payment marks under the button.
`note / title / headingLevel`	`…`	None	A last line, and the heading and its level (h2 by default).

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Enter`	In the promo field, applies the code.

ARIA

An aside named by its heading; the lines are a dl, each label with its amount.
The total is an aria-live="polite" region: changing a quantity in the cart is heard once.

Arabic and RTL notes

Mirrors

Labels on the right and amounts on the left; Apply comes after the field, on the left.

Does not mirror

The amounts are isolated, and the payment marks never mirror.

Numerals: The amounts follow numerals; the percent in “VAT (16%)” is your own text.
Arabic typography: body-18 Semibold for the title, numeric-16 Medium for amounts and numeric-20 Semibold for the total.