lomi. UI
Checkout summary card
Dark hosted-checkout product summary panel from the left checkout column.
Checkout summary card
Matches the dark left panel in hosted checkout (product-display-section.tsx and line-items-display.tsx).
Preview
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/checkout-summary-card.jsonUsage
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 | Product or payment link title. |
items | CheckoutSummaryItem[] | Optional line items. More than one switches to cart layout. |
subtotal | number | Amount before fees and discounts. |
fees | number | CheckoutSummaryFee[] | Optional fees as a total or named rows. |
discount | number | Optional discount amount. |
total | number | Final amount due today. |
currency | string | ISO currency code displayed beside amounts. |
description | string | Optional product description under the price. |