CheckoutSummary

Implemented

Checkout summary panel — buyer identity, selected payment method (brand + last4, Nuvei processing note), itemized line items, 4-row totals (subtotal / fees / TPS + TVQ / total), and an overridable FR-CA refund-policy footnote. Static review panel — no interactive controls.

Categoryorganisms

Sourcecomponents/organisms/checkoutsummary/CheckoutSummary.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

Vue finale avant paiement : acheteur, mode de paiement (Visa, Mastercard, Amex, Nuvei), lignes, totaux et politique de remboursement. FR-CA : « Dernière vérification avant paiement · Remboursement disponible jusqu'à 24 h avant l'événement, conformément à la politique ePassLive du Québec ».

CheckoutSummary

Organism — Commerce family (Family 7)

Récapitulatif final statique affichant l'acheteur, le mode de paiement sélectionné (brand - last4, traitement sécurisé via Nuvei), les billets achetés, les totaux et une note FR-CA sur la politique de remboursement.

Dernière vérification avant paiement

Vérifiez les informations ci-dessous, puis confirmez votre achat.

Acheteur: Marie Tremblay; [email protected]
Mode de paiement: Visa - 4242; Traitement sécurisé via Nuvei

Festival Jazz MTL — Quartet
2 × 48,00 $ · Admission générale
96,00 $
OSM — Symphonie n° 5
1 × 88,00 $ · Première balcon
88,00 $

Sous-total: 184,00 $
Frais de service: 9,20 $
TPS + TVQ: 29,32 $
Total: 222,52 $

Remboursement disponible jusqu'à 24 h avant l'événement, conformément à la politique ePassLive du Québec.

This component supports light and dark mode.

Props

Prop

Type

Default

Description

buyer*

{ fullName; email }

—

Acheteur.

paymentMethod*

{ brand; last4 }

—

Marque + 4 derniers chiffres.

items*

CheckoutItem[]

—

Lignes de la commande.

totals*

{ subtotal; fees; taxes; total }

—

Totaux formatés.

refundPolicy

string

—

Texte personnalisé de la politique de remboursement (remplace la phrase FR-CA par défaut).

className

string

—

Classes additionnelles fusionnées sur la <section> racine.

Props

Preview

CheckoutSummary

Prop

Type

Required

Default

Description

items

CheckoutItem[]

Required

—

One row per purchased line ({ id; label; meta?; amount } — id is the React key, amount pre-formatted).

buyer

{ fullName: string; email: string }

Required

—

Buyer identity — name as primary line, email as muted secondary.

paymentMethod

{ brand: "Visa" | "Mastercard" | "Amex" | "Nuvei"; last4: string }

Required

—

Already-selected payment method rendered as brand - last4 with the Nuvei processing note.

totals

{ subtotal: string; fees: string; taxes: string; total: string }

Required

—

Four pre-formatted strings rendered as the totals dl (Sous-total / Frais de service / TPS + TVQ / Total).

refundPolicy

string

Optional

Built-in FR-CA refund-policy sentence

Overrides the built-in FR-CA default (24 h, ePassLive du Québec).

locale

"fr" | "en"

Optional

"fr"

Localizes built-in labels (heading, identity, totals rows, refund-policy footnote). Matches the VenueMap convention; fr keeps back-compat.

className

string

Optional

—

Extra classes merged onto the root section.

Quick use:<CheckoutSummary />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

import { CheckoutSummary } from "@epasslive/design-system"

Example 1

tsxSnippet

<CheckoutSummary buyer={buyer} paymentMethod={paymentMethod} items={items} totals={totals} />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources