Lomi UIComponents
Mobile Money Checkout Card
A focused checkout card for Wave, MTN, Orange Money, and SPI.
Mobile Money Checkout Card
Use this as the main payment panel for a lightweight checkout flow.
Preview
Pay Keur Studio
12 500 F CFA
Secured by lomi. Your customer confirms the payment with their provider.
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/mobile-money-checkout-card.jsonUsage
import { MobileMoneyCheckoutCard } from '@/components/lomi-ui/mobile-money-checkout-card';
<MobileMoneyCheckoutCard
amount={12500}
currency="XOF"
merchantName="Keur Studio"
selectedProvider="wave"
phoneNumber="+225 07 00 00 00 00"
onSubmit={() => createCheckoutSession()}
/>;Props
| Prop | Type | Description |
|---|---|---|
amount | number | Amount to display. |
currency | string | ISO currency code, for example XOF. |
merchantName | string | Merchant or product name shown at the top. |
selectedProvider | ProviderId | Current provider selection. |
phoneNumber | string | Controlled phone input value. |
onProviderChange | (provider: ProviderId) => void | Fired when the customer changes provider. |
onPhoneNumberChange | (phoneNumber: string) => void | Fired when the phone field changes. |
onSubmit | () => void | Fired when the customer taps pay. |
loading | boolean | Shows the loading state on the pay button. |