lomi. UI
Price selector
Hosted checkout billing cycle selector for the dark product panel.
Price selector
Matches price-selector.tsx on the hosted checkout dark product panel.
Preview
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/price-selector.jsonUsage
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',
},
]}
/>;Render it inside a #121317 panel to match hosted checkout.
Props
| Prop | Type | Description |
|---|---|---|
prices | PriceOption[] | Active prices to render. Hidden when one or fewer prices. |
selectedPriceId | string | null | Currently selected price id. |
onPriceSelect | (priceId: string) => void | Fired when a price is chosen. |
currencyCode | string | ISO currency code. Defaults to XOF. |
label | string | Section label. Defaults to Choose your billing cycle. |