Разработка лендинга под ключ за 48 часов: как мы сделали страницу донатов со счётчиком из трёх источников

Дедлайн — утро субботы, доступа к финансам клиента нет

Заказчик — независимый академический хаб в Ереване. Нужна была страница сбора средств на офлайн-лабораторию с целью 5000 евро и дедлайном к утру субботы — меньше 48 часов от брифа в мессенджере до боевого домена с сертификатом. Собрать полноценный сайт в такой срок — уже вызов сам по себе, но здесь добавились платёжные ограничения: Stripe Армению не обслуживает, PayPal работает только на отправку денег, российские карты за рубежом не проходят. Сумму нужно было показывать и на странице, и в прямом эфире донат-стрима, но клиент принципиально не хотел давать доступ к своим платёжным аккаунтам — это её личный Telegram и вся финансовая история. Задача свелась не к вёрстке страницы, а к архитектуре: как считать чужие деньги, не имея права их видеть.

Счётчик сбора из трёх источников без доступа к деньгам клиента

Сумма сбора складывается из трёх независимых каналов, и ни один не требует пароля от финансового аккаунта клиента. Донаты через Tribute прилетают вебхуками с проверкой подписи — клиент сама создаёт ключ у себя в кабинете и может отозвать его одной кнопкой, без нашего участия. Три криптокошелька (USDT в сетях Tron и Ethereum, Bitcoin) сайт опрашивает сам раз в пять минут по открытым данным блокчейна и пересчитывает в евро по текущему курсу — доступ к самим кошелькам не нужен, публичный адрес виден всем. Остальные способы поддержки клиент вводит сама в закрытой панели с телефона: кнопки быстрого плюса на +10, +50 и +100 евро удобны прямо во время эфира, когда листать сложную форму некогда.

• Донаты Tribute — вебхуки с проверкой подписи, ключ клиент создаёт и отзывает сама
• Криптокошельки опрашиваются раз в 5 минут по открытым данным блокчейна — без доступа к самим кошелькам
• Ручной ввод остальных каналов — через закрытую панель с кнопками быстрого плюса
• Три источника пишут в один файл, каждый в своё поле — тестами проверено, что не затирают друг друга

Виджет для OBS: цифра, которая растёт в прямом эфире

Для донат-стрима сделан отдельный виджет-оверлей под OBS: прозрачная подложка поверх картинки стрима, цифра обновляется раз в 15 секунд и плавно докручивается вместо резкого скачка, а при новом донате карточка на 2,4 секунды подсвечивается золотом — зрителю в эфире сразу видно, что донат прошёл. Прямой эфир диктует свою деталь: цифра должна не просто быть верной, а визуально сообщать о событии в моменте, а не спустя минуту после обновления страницы.

Чек-лист SEO-гигиены: 20 пунктов перед запуском сайта

Функциональность — не последний шаг перед запуском: страница проходит один и тот же чек-лист из 20 пунктов, независимо от того, донатная это страница, лендинг мероприятия или сайт услуги. Технический seo аудит сайта здесь применяется не постфактум, а прямо в процессе сборки: политика конфиденциальности и условия использования, понятная кнопка действия, FAQ, корректные robots.txt и sitemap.xml, своя страница 404 вместо стандартной заглушки хостинга, alt-текст у картинок, подключённая аналитика, meta title и meta description под конкретную страницу, превью для соцсетей, favicon, canonical URL, согласие на cookies, мобильная версия, базовая доступность, проверка форм на ошибочный ввод, отсутствие битых ссылок и скорость загрузки.

Защита, которую никто не заказывал

Отдельно нашли и закрыли уязвимость, о которой никто не просил: обход лимита попыток входа в закрытую панель через подменяемый заголовок запроса. Добавили второй слой защиты с нарастающей задержкой между попытками и сравнение пароля за постоянное время — это защита от атак по времени ответа сервера, а не декоративная мера. Любой проект с приёмом реальных платежей обязан включать такую проверку, даже если в техническом задании её не было: панель, которая может собрать деньги, автоматически становится целью для перебора паролей.

Что из этого применимо к вашему бизнесу

Не обязательно собирать донаты, чтобы столкнуться с той же задачей. Любой сбор средств, предзаказ или сложная форма оплаты с несколькими способами платежа сталкивается с одной и той же дилеммой: показать клиенту прозрачную сумму, не давая доступа к его финансовым аккаунтам. Сайт с несколькими платёжными каналами требует именно такого архитектурного решения — не единой точки правды в чужом кабинете, а системы, которая складывает данные из независимых источников.

• Если дедлайн жёсткий — считайте платёжную интеграцию отдельным риском, а не деталью вёрстки
• Разделяйте источники данных — единая точка отказа опаснее, чем кажется на этапе разработки
• Проходите чек-лист SEO-гигиены до запуска, а не после — часть пунктов дешевле исправить в коде, чем патчить на проде
• Тестируйте форму с денежными полями на абсурдные значения — это самый дешёвый тест с самым дорогим потенциальным последствием ошибки

Денежный счётчик на сайте — это не вёрстка цифры на экране, а архитектурное решение: как показать сумму честно, не получая доступа к чужим финансам, и не потерять данные, если один из источников временно откажет.