# Checkout summary

Checkout summary is a ready-made neobrutalist section (block) from Cruise UI, built from its components. A checkout summary block: line items, subtotal, delivery, VAT (7.5% by default), a discount code, the total, a payment method radio group (card, bank transfer, pay on delivery) and a "Pay ₦X" button. Totals are worked out from props in naira; no payment SDK.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-checkout-summary
```

Import: `import { CruiseCheckoutSummary, cruiseNaira } from "@/components/cruise/blocks/checkout-summary";`

## When to use

The last step of a shop or booking checkout.

## When not to

Showing a receipt after payment (use a Table or Card).

## Example (React)

```tsx
"use client";

import { CruiseCheckoutSummary } from "@/components/cruise/blocks/checkout-summary";

export default function CheckoutSummaryExample() {
  return (
    <CruiseCheckoutSummary
      items={[
        { name: "Ankara tote bag", qty: 1, price: 18500 },
        { name: "Adire scarf", qty: 2, price: 7500 },
      ]}
      delivery={2500}
      // Try "OYA10" for ₦1,000 off.
      onApplyDiscount={(code) => (code.toUpperCase() === "OYA10" ? 1000 : null)}
      onPay={(result) => console.log(result)}
    />
  );
}
```

## Props: CruiseCheckoutSummary

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title?` | `ReactNode` | `"Order summary"` | — |
| `items?` | `CruiseLineItem[]` | `DEFAULT_ITEMS` | — |
| `delivery?` | `number` | `2500` | Delivery fee in naira; 0 shows "Free". |
| `vatRate?` | `number` | `0.075` | VAT as a fraction (0.075 = 7.5%), charged on items after the discount; 0 hides the line. |
| `methods?` | `CruisePaymentMethod[]` | `["card", "transfer", "delivery"]` | Payment methods to offer, in order. |
| `methodLabels?` | `Partial<Record<CruisePaymentMethod, string>>` | — | — |
| `onApplyDiscount?` | `((code: string) => number \| Promise<number \| null> \| null)` | — | Checks a code and returns the naira off, or null if it isn't valid. Leave out to hide the field. |
| `onPay?` | `((result: CruiseCheckoutResult) => void)` | — | — |
| `pending?` | `boolean` | `false` | — |
| `trustNote?` | `ReactNode` | `"Secure payment. Your card details never touch our servers."` | The reassurance line under the button. |
| `headingLevel?` | `2 \| 3` | `2` | — |
| `className?` | `string` | — | — |

## Accessibility

- Totals are a description list (<dl>), so each amount is read with its label.
- Payment methods are native radios in a fieldset with a legend.
- The pay button says the amount: "Pay ₦36,738".