# Sélecteur de fournisseur de paiement
Source: https://docs.lomi.africa/build/lomi-ui/payment-provider-selector

Carrousel de méthodes de paiement du checkout hébergé pour Wave, MTN, cartes et SPI.

***

title: Sélecteur de fournisseur de paiement
description: Carrousel de méthodes de paiement du checkout hébergé pour Wave, MTN, cartes et SPI.
-------------------------------------------------------------------------------------------------

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

# Sélecteur de fournisseur de paiement

Reprend le carrousel de méthodes de paiement du checkout hébergé (`payment-provider-selection.tsx`).

## Aperçu

<PaymentProviderSelectorDemo />

## Installation

<Installation name="payment-provider-selector" />

## Utilisation

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