Lomi UIComponents
Payment Failure Card
Help customers retry or recover from a failed payment.
Payment Failure Card
Use this after a failed payment attempt or provider timeout.
Preview
Payment failed
The provider could not confirm this payment. Ask the customer to retry or choose another rail.
- Amount
- 12 500 F CFA
- Provider
- MTN Mobile Money
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/payment-failure-card.jsonUsage
import { PaymentFailureCard } from '@/components/lomi-ui/payment-failure-card';
<PaymentFailureCard
amount={12500}
currency="XOF"
provider="MTN Mobile Money"
supportHref="/support"
/>;Props
| Prop | Type | Description |
|---|---|---|
title | string | Optional heading. |
message | string | Recovery copy. |
amount | number | Optional failed amount. |
currency | string | ISO currency code. |
provider | string | Provider label. |
onRetry | () => void | Retry action. |
supportHref | string | Optional support link. |