Démarrage rapide

lomi. UI est une petite collection de composants de paiement pour les équipes qui construisent des tunnels de checkout sur lomi. Elle suit le même modèle copy-paste que shadcn/ui : installez le composant dans votre application, conservez le code source et adaptez-le à votre produit.

Le premier kit se concentre sur le checkout :

• Sélecteur de fournisseur: Wave, MTN, cartes et SPI
• Section informations client: nom, e-mail, téléphone, WhatsApp
• Carte checkout mobile money: fournisseur, formulaire et bouton payer
• Carte récapitulatif checkout: panneau produit sombre
• Sélecteur de prix: cycle de facturation
• Compteur d'utilisation: limites et consommation

Installer un composant

lomi ui add payment-provider-selector

Équivalent avec shadcn directement :

npx shadcn@latest add https://docs.lomi.africa/r/payment-provider-selector.json

Lister tous les composants : lomi ui list. Mettre à jour les copies installées : lomi ui update. Voir Commandes CLI UI.

Exemple

import { MobileMoneyCheckoutCard } from '@/components/lomi-ui/mobile-money-checkout-card';

export function Checkout() {
  return (
    <MobileMoneyCheckoutCard
      selectedProvider="WAVE"
      fullName="Aya Konan"
      email="aya@example.com"
      phoneNumber="+2250700000000"
      payButtonBgColor="#121317"
      onSubmit={() => console.log('Créer une session checkout Lomi')}
    />
  );
}

Les composants n'appellent pas l'API lomi. directement. Utilisez votre backend ou l'intégration SDK pour créer des sessions de checkout, des demandes de paiement et la gestion des webhooks.

Chemins des assets

Copiez les assets du checkout hébergé dans le dossier public de votre application :

• /payment_channels/wave.webp
• /payment_channels/mtn.webp
• /payment_channels/pi_spi.webp
• /placeholder/card.webp

Dépendances

Les composants de formulaire client nécessitent :

npm install react-phone-number-input lucide-react

Mise à jour depuis d'anciennes copies lomi. UI

Si vous avez installé des composants avant la synchronisation checkout hébergé, relancez lomi ui update et ajustez les identifiants fournisseur :

Plusieurs composants checkout attendent désormais des props checkout hébergé comme organizationName, fullName et payButtonBgColor plutôt que les anciens exemples simplifiés.

Langage de design

Les composants s'inspirent du checkout hébergé lomi. : cartes à petit rayon, surfaces neutres, bordures subtiles et #56A5F9 pour les états de paiement sélectionnés.

Jetons checkout hébergé

Personnalisation

Comme chaque composant est copié dans votre application, personnalisez les classes directement :

<PaymentProviderSelector
  selectedProvider="WAVE"
  onProviderChange={setProvider}
/>

Gardez l'état sélectionné #56A5F9 évident sur les cartes fournisseur pour que le client confirme le rail exact avant de payer.

Chaque composant a sa propre page dans la barre latérale avec aperçu, commande d'installation et props.