Installment Calculator (React)

The "as low as NT$XXX per month" line you see on every Taiwanese e-commerce product page. Pass in the product price and a list of plans (months, annual rate, fee) and the component computes the monthly payment with the standard amortization formula and shows it as a digit-by-digit rolling number. Switching the term slides the selected pill across, the total / interest + fees / effective annual rate update in step, and zero-interest plans automatically get a "0 利率" (0% interest) badge. Expand the schedule if you want to see principal, interest and remaining balance for every period. The computeInstallment helper is exported separately, so a product listing can call it directly to print "as low as … per month".

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<InstallmentCalculator />

Installation

npx shadcn@latest add https://webberui.com/r/installment-calculator.json

Usage

import {
  InstallmentCalculator,
  computeInstallment,
} from "@/components/ui/installment-calculator";

<InstallmentCalculator
  price={36900}
  plans={[
    { months: 3, annualRate: 0 },
    { months: 6, annualRate: 0, badge: "熱門" },
    { months: 12, annualRate: 4.99 },
    { months: 24, annualRate: 7.99, fee: 300 },
  ]}
  defaultMonths={6}
  minAmount={3000}
  onChange={(plan, result) =>
    console.log(`${plan.months} months, NT$${result.monthly} per month`)
  }
/>

// The helper can be used on its own (e.g. "as low as … per month" in a product listing)
const { monthly, effectiveAnnualRate } = computeInstallment(36900, 12, 4.99);

Props

InstallmentPlan

InstallmentResult

InstallmentScheduleRow

computeInstallment(price, months, annualRate, fee?) is also a named export returning an InstallmentResult, so the same math can be reused in listings, the cart or checkout.

How it works

• Formula: monthly rate r = annualRate / 12 / 100; when r is 0 the monthly payment is price / n, otherwise the standard amortized payment price × r × (1 + r)^n / ((1 + r)^n − 1). Amounts are rounded to the dollar.
• Schedule: interest for each period = remaining principal × r, principal = monthly payment − interest; the last period clears whatever principal is left and absorbs the rounding remainder, so the principal parts add up exactly to the product price.
• Effective annual rate: the fee is treated as a cost paid at the moment of borrowing (net financed amount = price − fee), the monthly internal rate of return is solved by bisection and multiplied by 12 — with no fee it equals the nominal annual rate; a zero-interest plan with a fee shows an effective rate above 0, so the "0 利率" badge cannot mislead.
• Rolling digits: each digit is a vertical 0–9 wheel that translateYs to its target; keys are assigned from the right, so the ones digit keeps its wheel when the digit count changes and new digits fade in from the left. The first render outputs the final position directly, so hydration does not roll up from 0.
• Threshold: when price is below minAmount, the result card is replaced by a "below the installment threshold" notice and the plan switch is disabled.

Accessibility

• The term switch uses role="radiogroup" with role="radio" / aria-checked; Tab lands only on the selected item, arrow keys and Home / End move between plans and select them, and focus is shown with a focus-visible ring
• The rolling-digit layer of the monthly amount is aria-hidden and the wrapper carries the full amount as aria-label; a hidden aria-live="polite" one-line summary (term, monthly payment, total) is read out on switch, instead of turning the whole result card into a noisy live region
• The schedule toggle carries aria-expanded / aria-controls; the schedule is a native table with a caption and scope-marked column and row headers
• When the user has "reduce motion" enabled at the system level, the wheels become static digits and the pill slide, badge pop, schedule expansion and value transitions all snap into place, leaving only the color and text feedback