# Sélecteur de prix
Source: https://docs.lomi.africa/build/lomi-ui/price-selector

Sélecteur de cycle de facturation du panneau produit sombre du checkout hébergé.

***

title: Sélecteur de prix
description: Sélecteur de cycle de facturation du panneau produit sombre du checkout hébergé.
---------------------------------------------------------------------------------------------

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

# Sélecteur de prix

Reprend `price-selector.tsx` sur le panneau produit sombre du checkout hébergé.

## Aperçu

<PriceSelectorDemo />

## Installation

<Installation name="price-selector" />

## Utilisation

```tsx
import { PriceSelector } from '@/components/lomi-ui/price-selector';

<PriceSelector
  currencyCode="XOF"
  selectedPriceId={selectedPriceId}
  onPriceSelect={setSelectedPriceId}
  prices={[
    {
      price_id: 'monthly',
      amount: 25000,
      billing_interval: 'monthly',
      is_default: true,
    },
    {
      price_id: 'yearly',
      amount: 250000,
      billing_interval: 'yearly',
    },
  ]}
/>;
```

Affichez-le dans un panneau `#121317` pour correspondre au checkout hébergé.

## Props

| Prop              | Type                        | Description                                                 |
| ----------------- | --------------------------- | ----------------------------------------------------------- |
| `prices`          | `PriceOption[]`             | Prix actifs à afficher. Masqué s’il y a un prix ou moins.   |
| `selectedPriceId` | `string \| null`            | Identifiant du prix sélectionné.                            |
| `onPriceSelect`   | `(priceId: string) => void` | Déclenché quand un prix est choisi.                         |
| `currencyCode`    | `string`                    | Code devise ISO. Par défaut `XOF`.                          |
| `label`           | `string`                    | Libellé de section. Par défaut `Choose your billing cycle`. |