Все заметки
20 апреля 2026 г. ·5 мин

Симуляция Т-Кассы на статичном сайте: как продать демо-оплату клиенту до подключения

Клиенту нужно показать, как будет работать онлайн-оплата, а ключи ещё не получены. Сделал визуальную имитацию Т-Кассы — и сделка закрылась.

Т-КассаUXПродажиЛендинги

Задача

Делал сайт для клуба с членскими взносами. Клиент хотел на презентации директору показать, как будут принимать платежи — карточкой, через СБП, с чеком на email. Но Т-Касса подключается только через юрлицо, и пока юрист клуба договорится с банком — пройдёт неделя.

Написать «позже подключим» в КП — убивает вау-эффект на презентации. Сделал рабочую имитацию.

Как это выглядит

  1. Клиент жмёт «Вступить в клуб» → открывается модалка с формой (ФИО, email, телефон).
  2. Заполняет → нажимает «Перейти к оплате» → открывается страница, точно воспроизводящая интерфейс Т-Кассы: логотип банка, плашка получателя, сумма, 4 способа оплаты (Карта / СБП / Tinkoff Pay / SberPay).
  3. Вводит любые данные → «обработка 1.8 сек» → экран «Добро пожаловать в клуб!» с чеком: тариф, сумма, номер операции ZT-XXXXXXXX.

Никаких реальных денег, никаких API-ключей. Чистый HTML + CSS + 50 строк JS.

Почему это работает

  • Клиент видит готовый продукт, а не «когда-то потом доделаем». Психологически это разные вселенные.
  • Проще продать догрузку. Когда администрация клуба получит ключи — я включаю реальную Т-Кассу одним изменением: action="https://securepay.tinkoff.ru/...". Весь UI остаётся таким же.
  • Обратная связь от реальных пользователей ещё до запуска. Если UX страницы оплаты плохой — видно сразу на демо.

Ключевые приёмы

Никаких наворотов в JS

Одна модалка, 4 экрана (форма → касса → спиннер → успех), переключаются через hidden. Никаких сторонних библиотек.

Визуальное воспроизведение 1:1

Жёлтая плашка Т-Кассы с лого банка, пульсирующий SSL-индикатор, плашка получателя с щитом клуба, таб-переключатель способов оплаты — всё копируется с securepay.tinkoff.ru.

Плашка «ДЕМО»

Маленькая красная наклейка в углу — чтобы у юриста не возникло вопросов «а где согласие на обработку ПД». Это прототип, а не прод.

Что я понял

На лендингах имитация — легитимный инструмент. Клиент покупает не код, а ощущение «всё работает». Когда потом включаете настоящий API — то же самое ощущение остаётся, просто уже с деньгами.

Не надо обманывать пользователя (в проде имитацию выключаем), но на этапе согласования макета это бесценно.