lomi. UI
Payment provider selector
Hosted-checkout payment method carousel for Wave, MTN, cards, and SPI.
Payment provider selector
Matches the hosted checkout payment method carousel in payment-provider-selection.tsx.
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[] | Methods to show. Defaults to WAVE, MTN, cards, and spi. |
selectedProvider | ProviderId | null | Controlled selected method. |
onProviderChange | (provider: ProviderId) => void | Fired when the customer chooses a method. |
disabledProviders | ProviderId[] | Methods that render disabled. |
spiOperational | boolean | When false, SPI cannot be selected. Defaults to true. |
cardLabel | string | Card method label. Defaults to Card. |
Use the same method ids as hosted checkout: WAVE, MTN, cards, and spi.