# Démarrage rapide
Source: https://docs.lomi.africa/build/lomi-ui

Composants checkout prêts à copier-coller pour des expériences de paiement construites avec lomi. Installez et personnalisez votre premier composant.

***

title: Démarrage rapide
description: Composants checkout prêts à copier-coller pour des expériences de paiement construites avec lomi. Installez et personnalisez votre premier composant.
------------------------------------------------------------------------------------------------------------------------------------------------------------------

# 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.

<DocsScreenshot name="build/lomi-ui" alt="Aperçu des composants de paiement lomi. UI sur le site de documentation" />

Le premier kit se concentre sur le checkout :

* [Sélecteur de fournisseur](/build/lomi-ui/payment-provider-selector): Wave, MTN, cartes et SPI
* [Section informations client](/build/lomi-ui/customer-information-section): nom, e-mail, téléphone, WhatsApp
* [Carte checkout mobile money](/build/lomi-ui/mobile-money-checkout-card): fournisseur, formulaire et bouton payer
* [Carte récapitulatif checkout](/build/lomi-ui/checkout-summary-card): panneau produit sombre
* [Sélecteur de prix](/build/lomi-ui/price-selector): cycle de facturation
* [Compteur d'utilisation](/build/lomi-ui/usage-meter): limites et consommation

## Installer un composant

```bash
lomi ui add payment-provider-selector
```

Équivalent avec shadcn directement :

```bash
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](/build/cli/ui).

## Exemple

```tsx
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.

## Quand utiliser lomi-ui plutôt qu'une extension boutique

| Situation                                                    | Utilisez                                                         |
| ------------------------------------------------------------ | ---------------------------------------------------------------- |
| Boutique WooCommerce, Magento, PrestaShop, Shopify ou Bubble | [Extensions e-commerce](/build/ecommerce-extensions) officielles |
| Site personnalisé avec peu de travail UI                     | [Widget d'intégration](/build/accept/embed-widget)               |
| Contrôle total de l'UI checkout dans votre app React         | **lomi-ui** (cette page)                                         |
| Intégration backend uniquement                               | [API publique](/start/first-payment) ou [SDKs](/build/sdks)      |

## 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 :

```bash
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 :

| Avant  | Après            |
| ------ | ---------------- |
| `wave` | `WAVE`           |
| `mtn`  | `MTN`            |
| `card` | `cards`          |
| `spi`  | `spi` (inchangé) |

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é

| Jeton                                  | Valeur production                                                                     |
| -------------------------------------- | ------------------------------------------------------------------------------------- |
| Bordure / badge sélectionné            | `#56A5F9`                                                                             |
| Fond sélectionné (rendu)               | Blanc ; en production `checkout.css` remplace `bg-slate-100/50` sur `.border.bg-card` |
| Fond sélectionné (classe source)       | `bg-slate-100/50` (inclure `checkout-ui.css` ou équivalent pour la parité)            |
| Bordure non sélectionnée               | `border-border/40`                                                                    |
| Bordure hover non sélectionnée         | `border-border/60`                                                                    |
| Fond hover non sélectionné             | `bg-gray-50/50`                                                                       |
| Couleur libellé sur cartes fournisseur | `#000`                                                                                |
| Fond bouton payer par défaut           | `#121317`                                                                             |
| Bordure input                          | `#d1d5db` (`clamp(1px, 0.12vw, 1.3px)`)                                               |
| Rayon des cartes                       | `rounded-sm`                                                                          |
| Taille carte fournisseur               | `103.25px` mobile / `142px` md, hauteur `70px`                                        |

### Personnalisation

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

```tsx
<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.