Ипотечный калькулятор для сайта

В этом кейсе рассказываем, как разработали ипотечный калькулятор для сайта на Tilda жилого комплекса DNS Сити. Интегрировали его с платформой «Движ» через их собственное API, чтобы на сайте отображались актуальные банковские предложения, подходящие под параметры, введённые пользователем. Разберём особенности дизайна, архитектуру интеграции и технические решения.

2.

3.

4.

1.

5.

6.

7.

DNS Сити — жилой комплекс в пригороде Владивостока. Ранее нами был разработан сайт проекта на платформе Tilda, который является основным инструментом продаж квартир: здесь потенциальный покупатель смотрит планировки, узнаёт об инфраструктуре и принимает решение о покупке. Подробнее о разработке сайта проекта можно почитать в кейсе «Создание сайта для города-спутника DNS».

У клиента была активная подписка на платформу «Движ», которая предоставляет различные цифровые сервисы для застройщика, в том числе готовый ипотечный калькулятор, интегрированный с банками-партнёрами. Так как калькулятор должен был вписаться в дизайн сайта и иметь некоторые функциональные особенности, которые хотел реализовать клиент, мы не могли взять готовый виджет, который предлагает платформа. Было принято решение «подружить» клиентскую часть реализованную на Tilda и API платформы «Движ» для получения актуальной информации об ипотечных программах.

Чтобы сделать калькулятор на сайте ДНС Сити максимально удобным для пользователей, изучили визуальные особенности подобных калькуляторов на сайтах жилых комплексов по всей России. Собрали пул лучших интерфейсных решений — что работает удобно, что раздражает, какие параметры стоит вынести на передний план.
На основе этого анализа и брендбука DNS Сити нарисовали дизайн-макет в Figma. Учитывали не только цвета и шрифты, но и общее оформление сайта: стиль карточек, принципы сетки, логику расположения элементов.

Особенности интерфейса калькулятора

В интерфейсе пользователь вводит базовые параметры:

• стоимость объекта
• размер первоначального взноса
• желаемый срок кредита

А также может указать дополнительные условия, которые напрямую влияют на результат подбора:

• наличие жилищного сертификата
• материнский капитал
• предпочтительную программу ипотеки

Все эти параметры передаются в API Движ и влияют на то, какие банковские предложения отобразятся в результатах.

Чтобы пользователю были понятны особенности разных типов ипотечных программ, добавили их условия и ограничения в интерфейс калькулятора. Покупатель сразу понимает, подходит ли ему та или иная программа, не уходя с сайта для поиска информации.

Сборка в Tilda

После согласования дизайна перешли к вёрстке. Калькулятор собрали в Zero-блоке Tilda с использованием стандартного элемента «форма». С помощью дополнительных CSS стилей на странице скорректировали верстку некоторых стандартных элементов формы, чтобы привести их к общему стилю сайта.

Полная цепочка от действия пользователя до отображения результата:

Скрипт на странице автоматически отправляет запрос с параметрами на сервер, которые установлены по умолчанию. Пользователь сразу видит банковские предложения — не пустую форму.

Пользователь задаёт стоимость объекта, размер первоначального взноса, срок кредита и дополнительные условия — материнский капитал, жилищный сертификат, ипотечную программу.

JavaScript отправляет параметры на Node. js-сервер по HTTPS. Прямого обращения к API «Движ» с фронтенда не происходит.

Сервер авторизуется в «Движ» через GraphQL API и получает JWT-токен.

Сервер отправляет параметры в API «Движ» с JWT-токеном. «Движ» подбирает подходящие ипотечные программы из актуальной базы.

Параллельно «Движ» ежедневно запрашивает актуальные ставки у банков-партнёров — поэтому данные на сайте всегда свежие.

Сервер получает данные от «Движ» и возвращает их на сайт. Скрипт сортирует предложения, формирует карточки банков с указанием ставки и ежемесячного платежа, отображает результат.