E-commerce bot: catalog, cart, payment via Telegram Mini App
We encountered a situation where a standard Telegram bot with inline buttons could no longer handle a catalog of 300 SKUs. The 64-byte limit on callback_data made it impossible to pass product parameters, and the Redis-based state machine got confused when a user opened the bot in two windows simultaneously. Our solution: Telegram Mini App. This is a WebView that launches inside the bot and removes all Bot API limitations. Our experience shows this approach reduces catalog development time by 30% and gives users a familiar mobile interface. For small stores, the gain can be even higher.
Why Mini App is better than inline buttons
A classic bot with InlineKeyboardMarkup and callback_data hits the 64-byte limit — with product variants (size, color, quantity), this field overflows. Developers are forced to store state in Redis by chat_id, leading to state machines that break when the bot is opened in multiple windows. Mini App provides a radical solution: state lives in a React/Vue component inside WebView, and the bot only launches the Mini App via the web_app button.
| Criteria | Inline buttons | Mini App |
|---|---|---|
| Catalog size | ≤ 50 products | Unlimited |
| State | Redis / DB | Locally in WebView |
| Filtering | Limited | Full UI |
| Payments | Only sendInvoice | Any provider |
| Performance | Low | High |
Architecture of Mini App for e-commerce
// Initialize Telegram WebApp const tg = window.Telegram.WebApp; tg.ready(); tg.expand(); // full screen // Get user data (no separate auth) const initData = tg.initData; // string for server verification const user = tg.initDataUnsafe.user; // Send order data to bot function submitOrder(cart, total) { tg.sendData(JSON.stringify({ action: 'order', items: cart, total: total })); // Telegram closes Mini App and sends data to bot via onWebAppData } On the server, we verify initData via HMAC-SHA256 with the bot token — this protects against request forgery. Without verification, anyone can send a POST with an arbitrary 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) How to implement payments in Telegram Mini App?
Telegram Payments 2.0 supports YooKassa, Stripe, PayMaster, and about 10 other providers. The bot calls sendInvoice with provider_token, the user pays with Telegram's native UI — simple and fast. However, there is a commission from the provider and no cryptocurrency support. If you need crypto payments or your own acquiring scheme, the payment is initiated inside Mini App, opens the provider's page (or a deep link to the wallet), and after success we return via tg.close() with notification via webhook. We guarantee compliance with Telegram security policies and PCI DSS standards.
How to set up cart and checkout?
Cart state is stored locally in a React or Vue component. We use tg.MainButton as a sticky "Checkout" button at the bottom. On click, we call submitOrder — data goes to the bot, which processes the order and sends a confirmation. A multi-step form with address selection, delivery method, and comment can be implemented.
Catalog and filtering
For a catalog with photos and filters, Mini App is far better than a bot. We use React with react-query for API requests, images via CDN with lazy loading. tg.MainButton is used as the "Checkout" button — it sticks to the bottom of the screen natively.
tg.MainButton.setText(`Checkout — ${total} $`); tg.MainButton.show(); tg.MainButton.onClick(() => submitOrder(cart, total)); What's included in the work?
| Stage | Scope |
|---|---|
| Analysis | Study product matrix, choose payment provider, prototype |
| API | Develop REST/GraphQL endpoints for catalog and orders |
| Mini App | Implement interface in React/Vue with Telegram WebApp API integration |
| Payment | Connect Telegram Payments or external provider |
| Testing | Verify in real Telegram client, including concurrent sessions |
| Deploy | Server setup, CI/CD, monitoring via Bot API errors |
Typical integration mistakes
- Using
varinstead oflet/const— global state breaks Mini App on reload. - Missing
initDataverification — vulnerability to user data forgery. - Improper handling of
tg.close()— must explicitly close Mini App after payment.
Work stages
We determine whether a pure bot or Mini App is needed. Then set up the bot via BotFather, develop the catalog API, implement the Mini App (React/Vue), integrate payment, write webhook handlers. Test in a real Telegram client. Deploy to your server or cloud.
Timelines: 1-2 weeks for a simple bot with inline buttons and sendInvoice. 3-4 weeks for a full Mini App with catalog, cart, and custom payment flow. Cost is calculated individually after requirements analysis. Budget savings compared to native app development can reach 40%.
For over 5 years we have specialized in Telegram bots and completed more than 30 e-commerce projects. Our experience is backed by successful cases and certificates. Contact us for a project assessment — get a free consultation. We will evaluate your project and propose an optimal turnkey solution.