CheckoutSummary

organisms

Checkout summary panel — line items (tier × qty), fees, taxes, total, promo code input, payment methods, Place Order button. Sticky on desktop.

ARIA Role: region

Demo

I agree to the terms of serviceSubscribe to marketing emailsAlready selected

Disabled

Props

Prop	Type	Required	Default	Description
`items`	`LineItem[]`	Yes	`—`	1+ items
`total`	`number`	Yes	`—`	>=0
`paymentMethods`	`PaymentMethodConfig[]`	Yes	`—`	1-5 methods

TypeScript Interface

interface CheckoutSummaryProps {
  items: { tierId: string; tierName: string; quantity: number; unitPrice: number; lineTotal: number }[];
  fees: number;
  taxes: number;
  total: number;
  currency: string;
  promo?: { code: string; discount: number; onRemove: () => void };
  onPromoApply: (code: string) => Promise<{ success: boolean; error?: string }>;
  paymentMethods: { id: string; label: string; icon: React.ReactNode; selected: boolean; onSelect: () => void }[];
  onPlaceOrder: () => Promise<void>;
  isPlacingOrder?: boolean;
  error?: string;
}

Assertions (NASA Rule 5)

[type]items, total, paymentMethods, onPlaceOrder all required (NASA Rule 5)(NASA Rule 5)
[aria]Live region announces promo apply result and place-order status; error has role='alert'(WCAG 3.3.1, 4.1.3)

Usage

Import

import { Checkoutsummary } from '@epasslive/design-system'

Basic

<Checkoutsummary />

With Variants

<Checkoutsummary variant="primary" size="md" />