Lomi UIComponents
Payment Status Card
Show success, failed, and pending checkout outcomes.
Payment Status Card
Use this after checkout, in a receipt view, or inside a merchant dashboard.
Preview
Payment succeeded
The payment is confirmed and ready to reconcile.
- Amount
- 11 750 F CFA
- Provider
- Wave
- Transaction
- txn_7n4Pq3b9
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/payment-status-card.jsonUsage
import { PaymentStatusCard } from '@/components/lomi-ui/payment-status-card';
<PaymentStatusCard
status="success"
amount={11750}
currency="XOF"
provider="wave"
transactionId="txn_7n4Pq3b9"
primaryAction={{ label: 'View transaction', href: '/transactions/txn_7n4Pq3b9' }}
/>;Props
| Prop | Type | Description |
|---|---|---|
status | 'success' | 'failed' | 'pending' | Payment outcome to render. |
amount | number | Payment amount. |
currency | string | ISO currency code. |
provider | ProviderId | Provider used for the payment. |
transactionId | string | Optional Lomi transaction id. |
primaryAction | { label: string; href?: string; onClick?: () => void } | Optional primary action. |