# Carte checkout mobile money
Source: https://docs.lomi.africa/build/lomi-ui/mobile-money-checkout-card

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

***

title: Carte checkout mobile money
description: Sélection du fournisseur, formulaire client et bouton payer du checkout hébergé.
---------------------------------------------------------------------------------------------

import { MobileMoneyCheckoutCardDemo } from '@/components/lomi-ui/demo';

# Carte checkout mobile money

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

## Aperçu

<MobileMoneyCheckoutCardDemo />

## Installation

<Installation name="mobile-money-checkout-card" />

## Utilisation

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

| Prop               | Type                                             | Description                                 |
| ------------------ | ------------------------------------------------ | ------------------------------------------- |
| `selectedProvider` | `ProviderId`                                     | Fournisseur sélectionné.                    |
| `fullName`         | `string`                                         | Nom complet du client.                      |
| `email`            | `string`                                         | E-mail du client.                           |
| `phoneNumber`      | `string`                                         | Numéro de téléphone du client.              |
| `onProviderChange` | `(provider: ProviderId) => void`                 | Handler changement de fournisseur.          |
| `onSubmit`         | `() => void`                                     | Handler clic sur Payer.                     |
| `paymentStatus`    | `'idle' \| 'processing' \| 'success' \| 'error'` | État du bouton Payer.                       |
| `payButtonBgColor` | `string`                                         | Fond du bouton Payer. Par défaut `#121317`. |