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 it with npx shadcn@latest add @cruiseui/cruise-checkout-summary.

Install

Terminal

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

First time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.

Example

Corners

Order summary

Ankara tote bag × 1₦18,500
Adire scarf × 2₦15,000

Subtotal: ₦33,500
Delivery: ₦2,500
VAT (7.5%): ₦2,513
Total: ₦38,513

Payment methodCardBank transferPay on delivery

Secure payment. Your card details never touch our servers.

"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)}
    />
  );
}

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).

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`	—	—

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".