Кофемания: оплата и заказ за столом
Веб-приложение по QR-коду на столе: гость видит счёт, оплачивает его через СБП в приложении своего банка, списывает баллы и оставляет чаевые — а с 2024 года ещё и сам заказывает из меню прямо к столу.
Проект под NDA — детали архитектуры и код готов разобрать голосом.
Результат
- 28
- дней от первого коммита до продакшен-окружения в июле 2022
- 93
- задачи закрыты в трекере, большая часть — за месяц QA перед запуском заказа к столу
- 2,5
- года развития в продакшене — с июля 2022 по февраль 2025
Экраны продукта
Оплата счёта: стол по QR-коду, счёт из кассы со списанием баллов, выбор банка для СБП с запомненным банком наверху и подтверждение оплаты с предложением оставить чаевые.
Заказ к столу: меню с лентой категорий, карточка блюда в нижней шторке с вариантами приготовления и корзина с модификаторами и комментариями.
Программа лояльности: вход по номеру телефона и SMS-коду, а в корзине — ползунок списания баллов, недоступные блюда отдельным блоком и итог со скидкой.
Полный состав счёта в нижней шторке и экран ожидания оплаты: пока банк не подтвердил платёж, идёт таймер и можно выбрать другой банк.
Задача бизнеса
В ресторане гость ждёт официанта дважды: чтобы заказать и чтобы расплатиться. Нужен был сервис без установки приложения — открыл камеру, навёл на QR-код стола и сразу видишь свой счёт из кассы. Оплата — через Систему быстрых платежей в любом банке, с начислением или списанием баллов программы лояльности и чаевыми официанту. Всё это на телефоне гостя, в любом браузере, включая Safari со своими особенностями, и без ошибок в суммах: речь о деньгах.
Моя роль
Фронтенд-разработчик продукта от первого коммита до 2025 года: MVP собран за четыре недели — в июле 2022 года от инициализации до продакшен-окружения. Дальше развивал продукт два с половиной года: авторизация в программе лояльности, чаевые, запоминание банка, переезд с Preact CLI на Vite и в 2024 году — самостоятельный заказ к столу с меню, корзиной и модификаторами. Закрыл 93 задачи из трекера, большую часть — за месяц QA-прохода перед запуском заказа к столу.
Решение
React, TypeScript и Vite, состояние разложено по доменным моделям Effector — стол, счёт, корзина, меню, оплата, банки, пользователь, — а гейты привязывают загрузку данных к экранам. QR-код открывает ссылку с номером стола; идентификаторы стола и корзины синхронизируются с адресной строкой через effector-storage, поэтому перезагрузка или переданная ссылка не теряют состояние, а через 40 минут бездействия сессия стола сбрасывается. Для оплаты бэкенд выдаёт платёжную ссылку СБП, список банков берётся из справочника НСПК, а выбранный банк открывается диплинком сразу в своём приложении; последний банк запоминается и показывается первым. Экран статуса опрашивает бэкенд, пока банк не подтвердит платёж, показывает таймер на оплату и после успеха открывает виджет чаевых CloudTips. Вход в программу лояльности — по SMS-коду или звонку с последними цифрами номера; таймер повторной отправки переживает перезагрузку страницы, а повторная проверка авторизации подписывает телефон HMAC-SHA512 с солью, чтобы не передавать номер в открытом виде. Ползунок баллов сразу пересчитывает итог. В заказе к столу меню с лентой категорий, которая следит за прокруткой, карточки блюд в нижних шторках с фото, модификаторами, вариантами приготовления, КБЖУ, аллергенами и описанием в Markdown; корзина собирает одинаковые позиции в одну, выносит блюда из стоп-листа в отдельный блок и очищает его одним нажатием. Цели в Яндекс Метрике отмечают авторизацию, списание баллов и чаевые.