# Carte récapitulatif checkout
Source: https://docs.lomi.africa/build/lomi-ui/checkout-summary-card

Panneau sombre de récapitulatif produit du checkout hébergé (colonne gauche).

***

title: Carte récapitulatif checkout
description: Panneau sombre de récapitulatif produit du checkout hébergé (colonne gauche).
------------------------------------------------------------------------------------------

import { CheckoutSummaryCardDemo } from '@/components/lomi-ui/demo';

# Carte récapitulatif checkout

Reprend le panneau gauche sombre du checkout hébergé (`product-display-section.tsx` et `line-items-display.tsx`).

## Aperçu

<CheckoutSummaryCardDemo />

## Installation

<Installation name="checkout-summary-card" />

## Utilisation

```tsx
import { CheckoutSummaryCard } from '@/components/lomi-ui/checkout-summary-card';

<CheckoutSummaryCard
  title="Pay for Design workshop"
  currency="XOF"
  description="A full-day workshop covering product design fundamentals."
  subtotal={10000}
  total={10000}
/>;
```

## Props

| Prop          | Type                             | Description                                                 |
| ------------- | -------------------------------- | ----------------------------------------------------------- |
| `title`       | `string`                         | Titre produit ou lien de paiement.                          |
| `items`       | `CheckoutSummaryItem[]`          | Lignes optionnelles. Plus d’une ligne active la vue panier. |
| `subtotal`    | `number`                         | Montant avant frais et remises.                             |
| `fees`        | `number \| CheckoutSummaryFee[]` | Frais en total ou lignes nommées.                           |
| `discount`    | `number`                         | Montant de remise optionnel.                                |
| `total`       | `number`                         | Montant final dû aujourd’hui.                               |
| `currency`    | `string`                         | Code devise ISO affiché à côté des montants.                |
| `description` | `string`                         | Description produit optionnelle sous le prix.               |