Розробка калькулятора іпотеки/кредиту на сайті

Розробка калькулятора іпотеки/кредиту на сайті

Кредитний калькулятор — математично строгий інструмент. Тут неможливо помилитися в формулах: користувачі порівнюють результат з банківськими розрахунками, і розбіжність підриває довіру до сайту.

Математика аннуїтетного платежу

Більшість іпотек та споживчих кредитів використовують аннуїтетну схему — рівні щомісячні платежі:

M = P × [r(1+r)^n] / [(1+r)^n - 1]

Де:

• P — сума кредиту
• r — місячна процентна ставка = річна / 12 / 100
• n — кількість місяців
• M — щомісячний платіж

function calcAnnuity(principal, annualRate, months) {
  if (annualRate === 0) {
    return { monthly: principal / months, total: principal, overpayment: 0 };
  }

  const r = annualRate / 12 / 100;
  const factor = Math.pow(1 + r, months);
  const monthly = principal * (r * factor) / (factor - 1);
  const total = monthly * months;
  const overpayment = total - principal;

  return {
    monthly: Math.round(monthly * 100) / 100,
    total: Math.round(total),
    overpayment: Math.round(overpayment),
  };
}

Диференційований платіж

Перші платежі більші, останні — менші. Деякі банки (особливо по іпотеці) пропонують цей варіант:

function calcDifferentiated(principal, annualRate, months) {
  const r = annualRate / 12 / 100;
  const principalPart = principal / months;
  const schedule = [];

  let balance = principal;
  let totalInterest = 0;

  for (let i = 1; i <= months; i++) {
    const interestPart = balance * r;
    const payment = principalPart + interestPart;
    totalInterest += interestPart;
    balance -= principalPart;

    schedule.push({
      month: i,
      payment: Math.round(payment * 100) / 100,
      principal: Math.round(principalPart * 100) / 100,
      interest: Math.round(interestPart * 100) / 100,
      balance: Math.max(0, Math.round(balance * 100) / 100),
    });
  }

  return {
    schedule,
    total: Math.round((principal + totalInterest) * 100) / 100,
    overpayment: Math.round(totalInterest * 100) / 100,
    firstPayment: schedule[0].payment,
    lastPayment: schedule[months - 1].payment,
  };
}

Графік платежів

Таблиця амортизації — обов'язковий елемент іпотечного калькулятора:

function PaymentSchedule({ schedule }) {
  const [expanded, setExpanded] = useState(false);
  const visible = expanded ? schedule : schedule.slice(0, 12);

  const fmt = (n) => new Intl.NumberFormat('uk-UA', {
    minimumFractionDigits: 2, maximumFractionDigits: 2,
  }).format(n);

  return (
    <div className="schedule">
      <table>
        <thead>
          <tr>
            <th>Місяць</th>
            <th>Платіж</th>
            <th>Основний борг</th>
            <th>Відсотки</th>
            <th>Залишок боргу</th>
          </tr>
        </thead>
        <tbody>
          {visible.map(row => (
            <tr key={row.month}>
              <td>{row.month}</td>
              <td>{fmt(row.payment)} ₴</td>
              <td>{fmt(row.principal)} ₴</td>
              <td>{fmt(row.interest)} ₴</td>
              <td>{fmt(row.balance)} ₴</td>
            </tr>
          ))}
        </tbody>
      </table>
      {schedule.length > 12 && (
        <button onClick={() => setExpanded(e => !e)}>
          {expanded ? 'Згорнути' : `Показати всі ${schedule.length} місяців`}
        </button>
      )}
    </div>
  );
}

Дострокове погашення

Реальна іпотека — це серія перерахунків при частковому дострокому погашенні:

function applyEarlyRepayment(schedule, month, amount, mode = 'reduce_term') {
  // mode: 'reduce_term' — скорочуємо срок, 'reduce_payment' — зменшуємо платіж
  let balance = schedule[month - 1].balance - amount;
  if (balance <= 0) return { paidOff: true };

  const remainingMonths = schedule.length - month;

  if (mode === 'reduce_term') {
    // Перерахуємо, скільки місяців потрібно при тій же ставці
    // (зворотна задача — ітеративно)
    return recalculateWithNewBalance(balance, currentRate, 'minimize_term');
  }

  if (mode === 'reduce_payment') {
    return recalculateWithNewBalance(balance, currentRate, remainingMonths);
  }
}

Візуалізація

Кругова або стовпчаста діаграма «основний борг / переплата» — обов'язкова. Реалізація через Chart.js (легкий) або Recharts (якщо вже використовується в проекті):

import { Doughnut } from 'react-chartjs-2';

function OverpaymentChart({ principal, overpayment }) {
  return (
    <Doughnut
      data={{
        labels: ['Основний борг', 'Переплата'],
        datasets: [{
          data: [principal, overpayment],
          backgroundColor: ['#3b82f6', '#f87171'],
          borderWidth: 0,
        }],
      }}
      options={{ plugins: { legend: { position: 'bottom' } } }}
    />
  );
}

Параметри іпотечного калькулятора

Страховку додаємо до щомісячного платежу: insurance = balance * insuranceRate / 100 / 12.

Обмін даними з формою заявки

function prefillApplicationForm(calcResult) {
  const data = {
    loan_amount: calcResult.principal,
    monthly_payment: calcResult.monthly,
    loan_term_months: calcResult.months,
    estimated_rate: calcResult.annualRate,
  };

  // Можна передати через URL на сторінку заявки
  const qs = new URLSearchParams(data).toString();
  window.open(`/mortgage-application?${qs}`, '_blank');
}

Терміни

Аннуїтетний калькулятор з графіком платежів та діаграмою — 3–4 робочі дні. Повний варіант з диференційованим розрахунком, дострокичним погашенням, страховкою, експортом у PDF та інтеграцією з формою заявки — 7–10 днів.