Checkout Summary

Order summary at checkout. Pro · Shop and payments › Cart and orders

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add checkout-summary

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CheckoutSummary } from 'valyro-ui-pro';

Props

Prop	Type	Default
`items` *	`CartLineItem[]`		Order lines (read-only here) that make up the subtotal; with none the checkout button is disabled.
`currency`	`string`	`'USD'`	ISO 4217 code for every amount; also shown before the total.
`shipping`	`number`		Minor units; 0 shows "Free", undefined shows "Calculated at next step".
`taxRate`	`number`	`0`	Fraction applied to the discounted subtotal, e.g. 0.0825.
`promo`	`PromoCode \| null`		Controlled `promo`; use with `onPromoChange`.
`defaultPromo`	`PromoCode \| null`	`null`	Initial `promo` when uncontrolled.
`onPromoChange`	`(promo: PromoCode \| null) => void`		Called with the new `promo` when it changes.
`onApplyPromo`	`(code: string) => PromoCode \| Promise<PromoCode>`		Validates a code and resolves to the promo to apply. Throw (or reject) with an Error to reject the code — its message is shown under the field. Omit to hide the field.
`onCheckout`	`(totals: OrderTotals) => void`		Called by the checkout button with the computed subtotal, discount, shipping, tax and total.
`ctaLabel`	`ReactNode`	`'Place order'`	Text of the checkout button.
`title`	`ReactNode`	`'Order summary'`	Summary heading; also its accessible name.
`sticky`	`boolean`	`false`	Keeps the summary in view while the page scrolls (viewports ≥1024px), for a sidebar next to a long checkout form. Its container must not contain content below it.
`locale`	`string`		Locale for prices (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<CheckoutSummaryLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Shopping Cart Drawer — Slide-out cart
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless

Previous: Shopping Cart Drawer · Next: Checkout Form · All Shop and payments