Lomi UIComponents
Checkout Summary Card
A dark checkout summary inspired by Lomi hosted checkout.
Checkout Summary Card
Use this beside a payment form or above it on mobile to show what the customer is paying for.
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
merchantName="Keur Studio"
currency="XOF"
items={[{ name: 'Design workshop', quantity: 1, amount: 10000 }]}
subtotal={10000}
total={10000}
/>;Props
| Prop | Type | Description |
|---|---|---|
merchantName | string | Merchant name displayed in the summary. |
items | { name: string; quantity?: number; amount: number }[] | Checkout line items. |
subtotal | number | Amount before fees and discounts. |
fees | number | Optional fees. |
discount | number | Optional discount amount. |
total | number | Final amount due. |
currency | string | ISO currency code. |