Телеграм мини-апп: магазин прямо внутри мессенджера

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

Слой первый: что открывается по кнопке

Кнопка живёт в боте или в меню чата. По нажатию мессенджер открывает встроенное окно и загружает в него вашу страницу.

Вместе со страницей передаётся набор данных о пользователе и подпись, сделанная ключом вашего бота. Сервер проверяет подпись и на этом основании понимает: это тот самый человек, и он вошёл.

Отсюда следует главное свойство мини-приложения. Регистрации нет вообще: ни формы, ни пароля, ни подтверждения почты. Корзина привязывается к пользователю с первой секунды, а не после того, как он согласился завести аккаунт.

Проверять подпись обязательно на сервере. Данные, пришедшие в браузер, — это просто текст, и доверять им без проверки нельзя.

Слой второй: откуда берутся товары

Каталог мини-приложение не хранит. Оно запрашивает те же данные, что и сайт: категории, позиции, цены, остатки, изображения.

Это принципиальный момент. Владелец заводит товар один раз в админке, и позиция появляется везде: на сайте, в мини-приложении, в ответах бота. В магазине «Жук и Плут» админка выросла примерно до двадцати вкладок именно потому, что она единственное место ввода — включая импорт с Wildberries, который вынесен отдельной вкладкой.

Второй источник каталога — не менее важный. Остатки. Мини-приложение показывает наличие из того же учёта, откуда его берёт сайт, иначе человек закажет то, чего нет.

Слой третий: экран и его ограничения

Мини-приложение рисует свой интерфейс, но живёт в чужом окне, и это накладывает рамки.

Ширина — телефонная, почти всегда. Верстать нужно под один столбец, а не под сетку с четырьмя колонками.

Кнопка действия — системная. Мессенджер даёт главную кнопку внизу экрана, и правильно использовать её, а не рисовать свою: она всегда на месте и не уезжает при прокрутке.

Навигация назад — тоже системная. Своя стрелка в углу рядом с системной сбивает.

Тема оформления приходит из мессенджера. Если пользователь сидит в тёмной теме, а вы нарисовали белый фон, переход из чата в приложение выглядит вспышкой.

Слой четвёртый: заказ и оплата

Корзина складывается на сервере, а не в памяти окна. Человек закрыл мини-приложение, вернулся через час — корзина на месте, потому что она привязана к его идентификатору.

При оформлении собирается тот же заказ, что и на сайте: состав, сумма, доставка, контакты. Никакой отдельной сущности «заказ из мессенджера» нет — иначе появятся два списка заказов и две правды.

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

Онлайн-чек формируется по тем же правилам, что и в обычном магазине. Мессенджер тут ничего не меняет: продажа есть продажа, состав чека собирается из состава заказа.

Слой пятый: что происходит после оплаты

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

Уведомления при этом уходят через бота — тот же самый, из которого открылось мини-приложение. Клиент получает статус заказа сообщением в чат, где он и заказывал. Это редкий случай, когда уведомление приходит в естественное место, а не в отдельный канал, куда никто не смотрит.

Чем это отличается от сайта и от бота

От бота — интерфейсом. Бот ведёт диалог по шагам: вопрос, ответ, кнопка. Каталог на пятьсот позиций через диалог не листается. Мини-приложение показывает сетку, фильтры и карточку целиком.

От сайта — входом и охватом. На сайт человек попадает из поиска, там ему нужно оформиться. В мини-приложение он попадает из чата, там он уже вошёл. Зато мини-приложение не индексируется поиском: его нельзя найти в Яндексе, на него нужно привести.

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

Что ломается чаще всего

Данные пользователя приняли без проверки подписи. Тогда идентификатор можно подделать и оформить заказ от чужого имени. Проверка делается на сервере при каждом запросе, а не один раз при открытии.

Корзину держали в памяти окна. Мессенджер сворачивает встроенное окно свободно, и при возврате человек видит пустую корзину. Складывать её нужно на сервере.

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

Игнорировали тему оформления. Белый экран поверх тёмного чата читается как чужая страница, а не как часть мессенджера.

Когда мини-приложение не нужно

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

Если товар сложный и требует обсуждения — замеры, проект, подбор по параметрам, — телефонный экран поверх чата плохое место для такого выбора. Здесь лучше работает конфигуратор на сайте.

И если системы за ним нет. Мини-приложение — это интерфейс. Без каталога, остатков, заказов и админки собирать его не из чего, и начинать надо с них. Состав работ по магазину описан в отдельном разборе.

Коротко

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