E-commerce бот: каталог, корзина, оплата через Telegram Mini App
Мы столкнулись с ситуацией, когда стандартный Telegram-бот с inline-кнопками перестал справляться с каталогом на 300 SKU. callback_data в 64 байта не позволяла передать параметры товара, а конечный автомат в Redis путался при одновременной работе пользователя в двух окнах. Мы пришли к решению — Telegram Mini App. Это WebView, который запускается внутри бота и снимает все ограничения Bot API. Наш опыт показывает, что такой подход сокращает время разработки каталога на 30% и даёт пользователям привычный мобильный интерфейс. Для небольших магазинов выигрыш может быть ещё значительнее.
Почему Mini App лучше inline-кнопок?
Классический бот с InlineKeyboardMarkup и callback_data упирается в лимит 64 байта — при каталоге с вариантами (размер, цвет, количество) это поле переполняется. Разработчики вынуждены хранить состояние в Redis по chat_id, что приводит к конечным автоматам, ломающимся при открытии бота в нескольких окнах. Mini App решает радикально: состояние живёт в React/Vue-компоненте внутри WebView. Бот только запускает Mini App через кнопку web_app.
| Критерий | Inline-кнопки | Mini App |
|---|---|---|
| Размер каталога | ≤ 50 товаров | Неограниченно |
| Состояние | Redis / БД | Локально в WebView |
| Фильтрация | Ограничена | Полноценный UI |
| Платежи | Только sendInvoice | Любые провайдеры |
| Производительность | Низкая | Высокая |
Архитектура Mini App для e-commerce
// Инициализация Telegram WebApp const tg = window.Telegram.WebApp; tg.ready(); tg.expand(); // на весь экран // Получение данных пользователя (без отдельной авторизации) const initData = tg.initData; // строка для верификации на сервере const user = tg.initDataUnsafe.user; // Отправка данных заказа боту function submitOrder(cart, total) { tg.sendData(JSON.stringify({ action: 'order', items: cart, total: total })); // Telegram закроет Mini App и отправит данные боту через onWebAppData } На сервере верифицируем initData через HMAC-SHA256 с токеном бота — это защита от подделки запросов. Без верификации любой может отправить POST с произвольным user_id.
import hmac, hashlib def verify_init_data(init_data: str, bot_token: str) -> bool: parsed = dict(chunk.split('=', 1) for chunk in init_data.split('&')) hash_received = parsed.pop('hash', '') data_check = '\n'.join(f'{k}={v}' for k, v in sorted(parsed.items())) secret = hmac.new(b'WebAppData', bot_token.encode(), hashlib.sha256).digest() expected = hmac.new(secret, data_check.encode(), hashlib.sha256).hexdigest() return hmac.compare_digest(hash_received, expected) Как внедрить платежи в Telegram Mini App?
Telegram Payments 2.0 поддерживает ЮKassa, Stripe, PayMaster и ещё ~10 провайдеров. Бот вызывает sendInvoice с provider_token, пользователь платит нативным UI Telegram — просто и быстро. Но есть ограничение: комиссия провайдера + отсутствие криптовалют. Если нужны крипто-платежи или своя эквайринговая схема — платёж инициируется внутри Mini App, открывается страница провайдера (или Deep Link в кошелёк), после успеха возвращаемся через tg.close() с нотификацией через webhook. Мы гарантируем соблюдение политик безопасности Telegram и стандартов PCI DSS.
Как настроить корзину и оформление заказа?
Состояние корзины хранится локально в компоненте React или Vue. Используем tg.MainButton как прилипающую книзу кнопку «Оформить заказ». При нажатии вызываем submitOrder — данные уходят боту, который обрабатывает заказ и отправляет подтверждение. Можно реализовать многошаговую форму с выбором адреса, способа доставки и комментарием.
Каталог и фильтрация
Для каталога с фото и фильтрами Mini App подходит значительно лучше бота. Используем React с react-query для запросов к API, изображения — через CDN с lazy loading. tg.MainButton используем как кнопку «Оформить заказ» — она прилипает к нижнему краю экрана нативно.
tg.MainButton.setText(`Оформить заказ — ${total} ₽`); tg.MainButton.show(); tg.MainButton.onClick(() => submitOrder(cart, total)); Что входит в работу?
| Этап | Состав работ |
|---|---|
| Анализ | Изучение товарной матрицы, выбор провайдера оплаты, прототипирование |
| API | Разработка REST/GraphQL эндпоинтов для каталога и заказов |
| Mini App | Реализация интерфейса на React/Vue с интеграцией Telegram WebApp API |
| Оплата | Подключение Telegram Payments или внешнего провайдера |
| Тестирование | Проверка в реальном Telegram-клиенте, в том числе concurrent sessions |
| Деплой | Настройка сервера, CI/CD, мониторинг через Bot API errors |
Типичные ошибки при интеграции
- Использование
varвместоlet/const— глобальное состояние ломает Mini App при перезагрузке. - Отсутствие верификации initData — уязвимость для подделки данных пользователя.
- Неправильная обработка
tg.close()— после оплаты нужно явно закрывать Mini App.
Этапы работы
Определяем, нужен ли чистый бот или Mini App. Затем настраиваем бота через BotFather, разрабатываем API каталога, реализуем Mini App (React/Vue), интегрируем оплату, пишем webhook-обработчики. Тестируем в реальном Telegram-клиенте. Деплой на ваш сервер или облако.
Сроки: 1–2 недели для простого бота с inline-кнопками и sendInvoice. 3–4 недели для полноценного Mini App с каталогом, корзиной и кастомным платёжным флоу. Стоимость рассчитывается индивидуально после анализа требований. Экономия бюджета по сравнению с разработкой нативного приложения может достигать 40%.
Более 5 лет мы специализируемся на Telegram-ботах и реализовали свыше 30 e-commerce проектов. Наш опыт подтверждён успешными кейсами и сертификатами. Свяжитесь с нами для оценки вашего проекта — получите консультацию бесплатно. Оценим проект и предложим оптимальное решение под ключ.