lomi. UI
Sélecteur de fournisseur de paiement
Carrousel de méthodes de paiement du checkout hébergé pour Wave, MTN, cartes et SPI.
Sélecteur de fournisseur de paiement
Reprend le carrousel de méthodes de paiement du checkout hébergé (payment-provider-selection.tsx).
Aperçu
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.jsonUtilisation
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[] | Méthodes affichées. Par défaut WAVE, MTN, cards et spi. |
selectedProvider | ProviderId | null | Méthode sélectionnée (contrôlée). |
onProviderChange | (provider: ProviderId) => void | Déclenché quand le client choisit une méthode. |
disabledProviders | ProviderId[] | Méthodes affichées en désactivé. |
spiOperational | boolean | Si false, SPI n’est pas sélectionnable. Par défaut true. |
cardLabel | string | Libellé de la méthode carte. Par défaut Card. |
Utilisez les mêmes identifiants que le checkout hébergé : WAVE, MTN, cards et spi.
Démarrage rapide
Composants checkout prêts à copier-coller pour des expériences de paiement construites avec lomi. Installez et personnalisez votre premier composant.
Section informations client
Formulaire d'informations personnelles du checkout hébergé avec nom, e-mail, téléphone et WhatsApp optionnel.