Реализация бота для e-commerce (каталог, заказ, оплата) в мобильном приложении
Telegram-бот для магазина работает как отдельный канал продаж, но «вшить» в него полноценный каталог с фильтрацией, корзину и оплату — задача, которая быстро упирается в ограничения Bot API. Встроенная клавиатура не тянет динамические каталоги с сотнями SKU, а платёжный flow через sendInvoice работает только с определёнными провайдерами. Правильное решение — Telegram Mini App, который запускается внутри бота и использует нативный WebApp API вместо кнопок-сообщений.
Где ломается стандартный подход с inline-кнопками
Классический бот с InlineKeyboardMarkup и callback_data имеет жёсткое ограничение: callback_data — максимум 64 байта. При каталоге с вариантами (размер, цвет, количество) это поле заканчивается быстро. Разработчики начинают хранить состояние в Redis по chat_id — получается конечный автомат: /start → catalog → category → product → cart → checkout. Это работает, но плохо масштабируется и сломается, если пользователь откроет бота в двух окнах одновременно.
Telegram Mini App решает это радикально: состояние живёт в React/Vue-компоненте внутри WebView. Бот только запускает Mini App через web_app кнопку в KeyboardButton.
Архитектура 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 Payments или внешний провайдер
Telegram Payments 2.0 поддерживает ЮKassa, Stripe, PayMaster и ещё ~10 провайдеров. Бот вызывает sendInvoice с provider_token, пользователь платит нативным UI Telegram — просто и быстро.
Но есть ограничение: комиссия провайдера + отсутствие криптовалют. Если нужны крипто-платежи или своя эквайринговая схема — платёж инициируется внутри Mini App, открывается страница провайдера (или Deep Link в кошелёк), после успеха возвращаемся через tg.close() с нотификацией через webhook.
Каталог и фильтрация
Для каталога с фото и фильтрами Mini App подходит значительно лучше бота. Используем React с react-query для запросов к API, изображения — через CDN с lazy loading. tg.MainButton используем как кнопку «Оформить заказ» — она прилипает к нижнему краю экрана нативно.
tg.MainButton.setText(`Оформить заказ — ${total} ₽`);
tg.MainButton.show();
tg.MainButton.onClick(() => submitOrder(cart, total));
Этапы работы
Определяем нужен ли чистый бот или Mini App → настройка бота через BotFather → разработка API каталога → реализация Mini App (React/Vue) → интеграция оплаты → webhook обработчики → тестирование в реальном Telegram-клиенте.
1–2 недели для простого бота с inline-кнопками и sendInvoice. 3–4 недели для полноценного Mini App с каталогом, корзиной и кастомным платёжным флоу. Стоимость рассчитывается индивидуально после анализа требований.