Lomi UIComponents
Payment Provider Selector
Select Wave, MTN, Orange Money, SPI, or card payment rails.
Payment Provider Selector
Use this when a customer needs to choose how they want to pay.
Preview
Selected provider: wave
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/payment-provider-selector.jsonUsage
import {
PaymentProviderSelector,
type ProviderId,
} from '@/components/lomi-ui/payment-provider-selector';
function Example() {
const [provider, setProvider] = React.useState<ProviderId>('wave');
return (
<PaymentProviderSelector
selectedProvider={provider}
onProviderChange={setProvider}
/>
);
}Props
| Prop | Type | Description |
|---|---|---|
providers | ProviderId[] | Provider ids to show. Defaults to Wave, MTN, Orange, SPI, and card. |
selectedProvider | ProviderId | Controlled selected provider. |
onProviderChange | (provider: ProviderId) => void | Fired when the customer chooses a provider. |
disabledProviders | ProviderId[] | Providers that should render disabled. |
variant | 'grid' | 'rail' | Layout style. Defaults to rail. |