Lomi UIComponents
Pricing Table
A Lomi-styled plan selector for checkout, subscription, and pricing pages.
Pricing Table
Use this for plan selection before creating a checkout session or subscription.
Preview
Choose your plan
Simple pricing for payment teams building with Lomi.
Starter
For teams launching their first checkout flow.
0 F CFA/mo
- Hosted checkout
- Payment links
- Basic webhooks
Growth
For teams scaling payment operations.
25 000 F CFA/mo
- Mobile money + cards
- Subscriptions
- Advanced reconciliation
Scale
For platforms with custom payment needs.
75 000 F CFA/mo
- Dedicated support
- Custom limits
- Payout routing
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/pricing-table.jsonUsage
import { PricingTable } from '@/components/lomi-ui/pricing-table';
<PricingTable
plans={[
{
id: 'growth',
name: 'Growth',
description: 'For teams scaling payment operations.',
monthlyPrice: 25000,
yearlyPrice: 250000,
currency: 'XOF',
highlighted: true,
features: ['Mobile money + cards', 'Subscriptions', 'Webhooks'],
},
]}
/>;Props
| Prop | Type | Description |
|---|---|---|
plans | PricingPlan[] | Plans to render. |
title | string | Optional heading. |
description | string | Optional supporting text. |
onPlanSelect | (planId, interval) => void | Fired when a plan is selected. |