lomi.
lomi. UI

Carte checkout mobile money

Sélection du fournisseur, formulaire client et bouton payer du checkout hébergé.

Carte checkout mobile money

Combine le carrousel de fournisseurs, le formulaire client et le bouton payer du checkout hébergé.

Aperçu

Wave
Wave
MTN
MTN
Card
Card
π—SPI
π—SPI
*
*
*
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.json

Utilisation

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

PropTypeDescription
selectedProviderProviderIdFournisseur sélectionné.
fullNamestringNom complet du client.
emailstringE-mail du client.
phoneNumberstringNuméro de téléphone du client.
onProviderChange(provider: ProviderId) => voidHandler changement de fournisseur.
onSubmit() => voidHandler clic sur Payer.
paymentStatus'idle' | 'processing' | 'success' | 'error'État du bouton Payer.
payButtonBgColorstringFond du bouton Payer. Par défaut #121317.

Sur cette page