lomi. UI
Mobile money checkout card
Provider selection, customer form, and pay button aligned with hosted checkout.
Mobile money checkout card
Combines the hosted checkout provider carousel, personal information form, and pay button.
Preview
*
*
My WhatsApp number is different
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
selectedProvider="WAVE"
fullName="Aya Konan"
email="aya@example.com"
phoneNumber="+2250700000000"
payButtonBgColor="#121317"
onSubmit={() => createCheckoutSession()}
/>;Props
| Prop | Type | Description |
|---|---|---|
selectedProvider | ProviderId | Current provider selection. |
fullName | string | Customer full name. |
email | string | Customer email. |
phoneNumber | string | Customer phone number. |
onProviderChange | (provider: ProviderId) => void | Provider change handler. |
onSubmit | () => void | Pay button click handler. |
paymentStatus | 'idle' | 'processing' | 'success' | 'error' | Pay button state. |
payButtonBgColor | string | Pay button background. Defaults to #121317. |