Lomi UI
Quick Start
Add the first Lomi UI checkout component to your app.
Quick Start
Install a component with the shadcn CLI:
npx shadcn@latest add https://docs.lomi.africa/r/mobile-money-checkout-card.jsonThen render it with plain props:
import { MobileMoneyCheckoutCard } from '@/components/lomi-ui/mobile-money-checkout-card';
export function Checkout() {
return (
<MobileMoneyCheckoutCard
amount={12500}
currency="XOF"
merchantName="Keur Studio"
selectedProvider="wave"
phoneNumber="+225 07 00 00 00 00"
onSubmit={() => console.log('Create a Lomi checkout session')}
/>
);
}The components do not call the Lomi API directly. Use your backend or SDK integration to create checkout sessions, charge requests, and webhook handling.
Asset paths
Provider icons are installed into public/payment_channels, so the components can reference them as /payment_channels/wave.webp, /payment_channels/mtn.webp, and similar public URLs.