Клієнт приходить розрахувати іпотеку — і отримує відмову калькулятора. Або форма заявки втрачає дані. Причина — типові рішення без урахування банківської специфіки. Ми будуємо сайти, які конвертують: з калькуляторами, онлайн-заявками та відповідністю вимогам ЦБ. Наше теговане кешування знижує навантаження в 3 рази ефективніше за стандартне, економлячи бюджет до 40%.
Каталог банківських продуктів
Структуру каталогу будуємо на інфоблоках з чітким розділенням за типами: вклади, кредити, дебетові та кредитні картки, розрахунково-касове обслуговування. Кожен тип — окремий інфоблок або розділ з набором властивостей, специфічних для продукту. Наприклад, для вкладів: мінімальна сума (від 10 000 до 30 000 000 рублів), термін (від 1 до 60 місяців), процентна ставка (з градацією за сумою та терміном — властивість «таблиця» або пов'язаний Highload-блок), поповнення, часткове зняття, капіталізація. Для кредитів: діапазон сум (від 50 000 до 10 000 000 рублів), термін (від 6 до 120 місяців), ставка, вимоги до позичальника, забезпечення. Для карток: платіжна система, кешбек, вартість обслуговування, грейс-період. Фільтрація — компонент catalog.smart.filter з доопрацюванням шаблону під банківську специфіку: повзунки для сум та термінів, чекбокси для опцій. При кількості продуктів понад 200 використовуємо теговане кешування, що знижує навантаження на сервер в 3 рази порівняно зі стандартним кешем.
Як реалізувати калькулятор вкладів з підтримкою капіталізації?
Калькулятор — ключовий конверсійний елемент. Реалізація на фронтенді через JavaScript з серверною валідацією.
Калькулятор вкладів. На вході: сума, термін, щомісячне поповнення. На виході: підсумкова сума з відсотками, графік нарахувань по місяцях. Формула залежить від типу капіталізації — прості відсотки або складні з щомісячним/щоквартальним нарахуванням. Ставки підтягуємо з властивостей інфоблоку через AJAX-запит до кастомного контролера. Це забезпечує автоматичний перерахунок при зміні умов продукту.
Калькулятор кредитів. Ануїтетний та диференційований платіж — два режими розрахунку. Формула ануїтету:
P = S × (r × (1 + r)^n) / ((1 + r)^n − 1)
Результат: щомісячний платіж, переплата, графік платежів з розбивкою на тіло та відсотки. Графік виводимо таблицею з можливістю завантажити PDF — серверна генерація через TCPDF, що викликається AJAX-запитом.
Калькулятор іпотеки — врахування першого внеску, страховки та дострокового погашення. Додаємо поле «материнський капітал» з фіксованою сумою. Всі калькулятори закінчуються кнопкою «Залишити заявку» — дані розрахунку передаються у форму попередньо заповненими.
Онлайн-заявка на кредит та картку
Багатокрокова форма (4 кроки) дозволяє заповнити заявку в середньому за 4 хвилини. Кроки:
- Параметри продукту — сума, термін (попередньо заповнені з калькулятора)
- Персональні дані — ПІБ, дата народження, паспорт, ІПН
- Фінансова інформація — місце роботи, стаж, дохід
- Контакти та згоди — телефон, email, згода на обробку ПД (обов'язковий чекбокс)
Валідація на кожному кроці — клієнтська та серверна. Після відправки дані записуються в CRM Бітрікс24 через REST API (метод crm.lead.add) або безпосередньо в АБС банку через проміжний API-шлюз. Статус заявки доступний клієнту в особистому кабінеті. Конверсія форми сягає 35% при правильному налаштуванні.
Курси валют
Парсинг щоденної XML-вигрузки ЦБ РФ (ЦБ РФ) через агент Бітрікс, що виконується кожні 30 хвилин. Результат записується в Highload-блок з полями: код валюти, номінал, курс, дата. Використовуємо теговане кешування — навантаження на сервер знижується в 3 рази порівняно зі стандартним кешем. Компонент виводу: CACHE_TIME 1800 секунд, CACHE_TYPE «А» (автоматичний). На фронтенді — таблиця з основними валютами (USD, EUR, CNY) та динаміка за тиждень/місяць через графік на Chart.js. Окрема сторінка з архівом курсів за 3 роки та конвертером валют. Швидкість завантаження сторінки збільшена на 55% за рахунок агресивного кешування.
Відділення та банкомати на карті
Highload-блок з полями: назва, тип (відділення/банкомат/термінал), адреса, координати, години роботи, доступні послуги. При кількості точок понад 500 обов'язкова кластеризація маркерів на Яндекс.Картах через ymaps.Clusterer — інакше сторінка гальмує на мобільних, втрачаючи до 40% відвідувачів. Динамічна кластеризація прискорює завантаження карти в 5 разів порівняно зі звичайним виведенням. Фільтрація за типом точки та за послугами (видача готівки, прийом платежів, обмін валют). Геолокація користувача через navigator.geolocation для автоматичного центрування карти та сортування списку за відстанню. Час завантаження карти скорочується з 3 секунд до 0.6 секунд.
Чому важливо налаштувати CSP для банківського сайту?
Банківський сайт — мішень для атак. Підхід до безпеки багаторівневий.
Content Security Policy (CSP). Налаштовуємо заголовки через .htaccess або nginx-конфіг. Політика default-src 'self' з явними винятками для CDN, API карт, платіжних віджетів. Inline-скрипти заборонені — використовуємо nonce для Бітрікс-компонентів, які генерують вбудований JS. Це ламає частину стандартних шаблонів — перезбираємо їх з винесенням скриптів у зовнішні файли.
Повний склад робіт з безпеки
Розгорнути
-
HTTP Strict Transport Security (HSTS). Заголовок
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload. Перед увімкненням перевіряємо, що всі піддомени (CDN, API, пошта) працюють по HTTPS. - Проактивний захист Бітрікс: веб-антивірус, контроль активності, захист від DDoS, двофакторна аутентифікація для адміністраторів, журнал вторгнень. Налаштовуємо стоп-лист по IP для brute-force спроб.
- WAF (Web Application Firewall). Стандартний модуль «Проактивного захисту» закриває базові SQL-ін'єкції та XSS. Для банківського рівня додаємо зовнішній WAF — ModSecurity з OWASP CRS або Cloudflare WAF.
-
Шифрування даних: персональні дані в БД шифруємо на рівні додатку через
CryptoProvider. Бекапи — тільки в зашифрованому вигляді. - Аудит та моніторинг: модуль «Журнал подій» фіксує всі дії адміністраторів. Додатково алерти при: зміні файлів ядра, невдалих спробах входу понад 5 за хвилину, зміні налаштувань модулів безпеки.
Відповідність ФЗ-395 та вимогам ЦБ
Федеральний закон «Про банки та банківську діяльність» та вказівки Центробанку зобов'язують розміщувати на сайті:
- Ліцензію та установчі документи
- Фінансову звітність (щоквартальну та річну)
- Тарифи за всіма продуктами в актуальній редакції
- Інформацію про систему страхування вкладів
- Реквізити та контактні дані
Під це створюємо розділ «Розкриття інформації» з інфоблоком документів. Властивості: тип документа, дата публікації, файл (PDF). Документи мають бути доступні без авторизації та індексуватися пошуковиками. Налаштовуємо права доступу на рівні інфоблоку: читання — для всіх, редагування — тільки для групи «Compliance».
Таблиця: Типові банківські продукти та властивості інфоблоків
| Тип продукту | Ключові властивості | Форма розрахунку |
|---|---|---|
| Вклад | Сума, термін, ставка, капіталізація, поповнення | Калькулятор з графіком нарахувань |
| Кредит | Сума, термін, ставка, ануїтет/диференціал | Графік платежів з переплатою |
| Картка | Платіжна система, кешбек, вартість, грейс | Порівняння умов |
Етапи розробки банківського сайту
| Етап | Зміст | Термін |
|---|---|---|
| Аналітика | Аудит поточного сайту, збір вимог ЦБ, прототипи калькуляторів | 3–4 тижні |
| Дизайн | UI-кіт, адаптивні макети ключових сторінок, UX калькуляторів | 3–4 тижні |
| Верстка та фронтенд | Шаблони компонентів, калькулятори на JS, адаптив | 4–5 тижнів |
| Backend-розробка | Інфоблоки, інтеграції (ЦБ API, CRM/АБС, карти), форми заявок | 5–6 тижнів |
| Безпека | CSP, HSTS, WAF, шифрування, аудит вразливостей | 2–3 тижні |
| Тестування | Функціональне, навантажувальне, пентест | 2–3 тижні |
| Запуск та супровід | Міграція, моніторинг, навчання редакторів | 1–2 тижні |
Загальний термін — від 20 тижнів при паралельній роботі дизайну та аналітики. Банківський проект не терпить поспіху: кожен компонент проходить рев'ю безпеки перед продакшеном.
Що входить в роботу
- Проектна документація: технічне завдання, опис архітектури, схема інтеграцій.
- Інтеграції: з ЦБ РФ, банківською АБС, платіжними сервісами (ЮKassa, Сбер), службами доставки (Нова Пошта).
- Навчання: триденний воркшоп для редакторів та адміністраторів сайту.
- Гарантійна підтримка: 3 місяці після запуску з фіксацією багів та консультаціями.
Отримайте індивідуальний розрахунок термінів та вартості — зв'яжіться з нами для консультації. Розрахуємо терміни та вартість під ваш проект вже на етапі первинного обговорення.