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[schedule.length - 1].payment, }; }

</details> #### Графік платежів і візуалізація Таблиця амортизації — обов’язковий елемент іпотечного калькулятора. Користувач має бачити, як змінюються борг і відсотки щомісяця. Ми реалізуємо як повний графік, так і згорнутий вигляд з опцією «Показати всі». Кругова діаграма «основний борг / переплата» — через Chart.js або Recharts. ```jsx 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> ); } 

Реалізація дострокового погашення з перерахунком графіка

Реальна іпотека — це серія перерахунків при частковому достроковому погашенні. Алгоритм залежить від режиму: скорочення строку або зменшення платежу. При ануїтеті доводиться розв’язувати обернену задачу — ітераційно підбирати новий строк або платіж. Наш досвід показує, що для кредитів до 30 років достатньо 10-15 ітерацій для точності до дня.

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); } } 

Порівняння схем платежів

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

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

Інтеграція калькулятора з CRM і формою заявки

1. Передача даних через URL: після розрахунку зберіть параметри в query string і відкрийте сторінку заявки з ними. Приклад коду нижче.
2. API-відправка: відправте JSON-об’єкт з результатами на ваш REST-ендпоінт. Використовуйте fetch або axios з методом POST.
3. Вебхуки: при натисканні кнопки «Залишити заявку» відправте дані на webhook у вашу CRM (наприклад, Bitrix24 або AmoCRM).
4. A/B-тестування: розмістіть дві версії калькулятора та порівняйте конверсію. Ми допоможемо налаштувати експеримент.

function prefillApplicationForm(calcResult) { const data = { loan_amount: calcResult.principal, monthly_payment: calcResult.monthly, loan_term_months: calcResult.months, estimated_rate: calcResult.annualRate, }; // Дані передаються на сторінку заявки через URL або API } 

Що входить у роботу

• Документація з формулами та алгоритмами
• Вихідний код на React / TypeScript / Node.js (або вашому стеку)
• Інтеграція з формою заявки та CRM
• Адаптивна верстка під мобільні пристрої
• Навчання менеджерів роботі з калькулятором
• Гарантія підтримки протягом 3 місяців

Строки

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

Кейс: як ми врятували конверсію банку

Один із наших клієнтів — регіональний банк — втрачав до 15% заявок через те, що їхній старий калькулятор округлював платежі до цілих гривень. Ми переписали модуль, впровадили ануїтетну формулу з подвійною точністю та додали графік амортизації. Конверсія зросла на 20% за місяць, а кількість відмов упала вдвічі. Весь проект зайняв 5 робочих днів.