Installment Plan Picker

Beta

A checkout total split into 3, 4 or 6 monthly payments: each plan a choice card with its monthly amount and cost, and under the chosen plan its schedule and total.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add installment-plan-picker
Also works with shadcn: npx shadcn@latest add @ritla/installment-plan-picker
Dependencies it brings
priceradio-card
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

installment-plan-picker.tsx

import { InstallmentPlanPicker } from "@/components/ui/installment-plan-picker";<InstallmentPlanPicker total={1200} currency="SAR" onValueChange={setPayments} shariaCompliant />

API reference

InstallmentPlanPicker

Prop	Type	Default	Description
`total`	`number`	None	The checkout total, in major units.
`currency / fractionDigits`	`string / number`	`"SAR" / 2`	As on Price.
`plans`	`{ payments, feeRate? }[]`	`3, 4, 6 (3% fee)`	Figma's Plan: the number of payments, and the plan's cost as a share of the total (0 reads “0% profit”).
`value / defaultValue / onValueChange`	`number`	None	The chosen plan, by its number of payments.
`start`	`Date`	`today`	The first payment's date; the rest a month apart.
`shariaCompliant`	`boolean`	`false`	The Sharia-compliance line. Show it only when the provider's plans are certified.
`name`	`string`	None	Form field name.

installmentSchedule

The same payments, to work out on the server: installmentSchedule(total, plan, start); the last payment takes the rounding, so the sum is always right.

Prop	Type	Default	Description

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowDownArrowUp`	Between plans.

ARIA

A radio group named “Pay in installments”; each plan's amount and cost are read as its description.
The schedule is an ordered list, announced politely when the plan changes.

Don't

Never say “no interest” when a plan has a fee: each plan states its cost.

Arabic and RTL notes

Mirrors

The whole card mirrors: the radios, the dots and the amounts move to the other side.

Does not mirror

Each amount stays one isolated unit: “400.00 ر.س”.

Numerals: Amounts and dates follow numerals; the calendar is Gregorian with month names in the reader's language.
Arabic typography: body-16 Semibold for the title, body-14 for the schedule, body-12 for the Sharia line.