lomi. UI
Sélecteur de prix
Sélecteur de cycle de facturation du panneau produit sombre du checkout hébergé.
Sélecteur de prix
Reprend price-selector.tsx sur le panneau produit sombre du checkout hébergé.
Aperçu
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/price-selector.jsonUtilisation
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. |