Как создать Telegram Mini App для бизнеса в 2026 году
Telegram Mini App (TMA) - это веб-приложение, которое открывается прямо внутри Telegram. Пользователь нажимает кнопку в боте - и видит полноценный интерфейс: каталог, корзину, форму записи, личный кабинет. Никаких переходов в браузер, никаких установок дополнительных приложений.
Для бизнеса в Кыргызстане, Казахстане и России это особенно актуально: Telegram здесь используют 70-90% смартфонов.
Для каких задач подходит Mini App
Интернет-магазин внутри Telegram. Каталог, корзина, оплата через Telegram Payments - всё без выхода из мессенджера. Конверсия выше, чем у обычного сайта, потому что клиент уже доверяет Telegram.
Запись на услуги. Салоны красоты, медицинские клиники, автосервисы - клиент видит доступные слоты и записывается за 30 секунд.
Меню и заказы для ресторана. QR-код на столике → Telegram → Mini App с меню → оплата. Без официанта, без ожидания.
Программа лояльности. Баланс баллов, история покупок, доступные награды - всё в привычном интерфейсе.
Поддержка клиентов. Создание тикетов, статус обращений, история переписки - интегрируется с вашей CRM.
Как это работает технически
Mini App - это обычный React/Vue/Next.js сайт, который Telegram загружает во встроенном браузере. Telegram добавляет объект window.Telegram.WebApp, через который Mini App получает:
- Данные пользователя (имя, username, язык)
- Тему оформления Telegram
- Нативные кнопки (MainButton, BackButton)
- Возможность принимать платежи
Пользователь
↓
Telegram Bot (кнопка)
↓
Mini App (ваш сайт, HTTPS)
↓
Ваш Backend API
↓
База данных / CRM / Платёжная система
Создание бота и регистрация Mini App
Всё через @BotFather:
/newbot → создайте бота, получите BOT_TOKEN
/newapp → привяжите Mini App к боту
# Укажите URL вашего Mini App (обязательно HTTPS)
Для разработки используйте ngrok для временного HTTPS:
npx ngrok http 3000
# Получите URL вида https://xxxx.ngrok.io
Минимальный пример Mini App на React
npm create vite@latest telegram-mini-app -- --template react-ts
cd telegram-mini-app
npm install @twa-dev/sdk
// src/App.tsx
import { useEffect, useState } from 'react';
import WebApp from '@twa-dev/sdk';
export default function App() {
const [user, setUser] = useState<any>(null);
useEffect(() => {
WebApp.ready(); // Скрывает индикатор загрузки Telegram
WebApp.expand(); // Разворачивает на весь экран
setUser(WebApp.initDataUnsafe.user);
// Применяем тему Telegram к нашему приложению
document.body.style.backgroundColor = WebApp.themeParams.bg_color ?? '#ffffff';
}, []);
return (
<div style={{ padding: 16, color: WebApp.themeParams.text_color }}>
<h1>Привет, {user?.first_name}!</h1>
</div>
);
}
Проверка подлинности пользователя
Это критически важно. Любой может подделать initData. Всегда проверяйте на сервере:
// backend/src/middleware/telegram-auth.ts
import crypto from 'crypto';
export function verifyTelegramInitData(initData: string, botToken: string): boolean {
const params = new URLSearchParams(initData);
const hash = params.get('hash');
if (!hash) return false;
params.delete('hash');
const checkString = [...params.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([k, v]) => `${k}=${v}`)
.join('\n');
const secretKey = crypto
.createHmac('sha256', 'WebAppData')
.update(botToken)
.digest();
const expectedHash = crypto
.createHmac('sha256', secretKey)
.update(checkString)
.digest('hex');
return hash === expectedHash;
}
На фронтенде передаём initData в каждом запросе:
// src/api.ts
import WebApp from '@twa-dev/sdk';
export async function apiGet(path: string) {
const res = await fetch(`${import.meta.env.VITE_API_URL}${path}`, {
headers: { 'X-Telegram-Init-Data': WebApp.initData },
});
if (!res.ok) throw new Error('API Error');
return res.json();
}
Нативные элементы интерфейса
Mini App имеет доступ к нативным элементам Telegram, которые выглядят органично в любой теме:
import WebApp from '@twa-dev/sdk';
// Главная кнопка (снизу, как кнопка Telegram)
WebApp.MainButton.setText('Оформить заказ - 2 500 ₽');
WebApp.MainButton.show();
WebApp.MainButton.onClick(() => checkout());
// Скрываем если корзина пуста
function updateCart(total: number) {
if (total > 0) {
WebApp.MainButton.setText(`Оформить - ${total.toLocaleString('ru')} ₽`);
WebApp.MainButton.show();
} else {
WebApp.MainButton.hide();
}
}
// Кнопка назад
WebApp.BackButton.show();
WebApp.BackButton.onClick(() => navigate(-1));
// Нативный диалог подтверждения
WebApp.showConfirm('Удалить товар из корзины?', (confirmed) => {
if (confirmed) removeItem(id);
});
// Всплывающее уведомление
WebApp.showAlert('Заказ успешно оформлен!');
// Вибрация при нажатии кнопки
WebApp.HapticFeedback.impactOccurred('light');
// При успешном действии
WebApp.HapticFeedback.notificationOccurred('success');
Приём оплаты через Telegram Payments
Telegram Payments не берёт комиссию с разработчика (только стандартные комиссии платёжного провайдера). Для CIS рынка поддерживаются YooKassa, Payme, CloudPayments и другие.
Настройка через BotFather:
/mybots → выберите бота → Payments → подключите провайдера
Создание счёта на оплату (backend):
import TelegramBot from 'node-telegram-bot-api';
const bot = new TelegramBot(process.env.BOT_TOKEN!);
async function createPayment(userId: number, order: { id: string; total: number; title: string }) {
// Создаём ссылку на оплату
const invoiceLink = await bot.createInvoiceLink(
order.title,
`Заказ #${order.id}`,
JSON.stringify({ orderId: order.id }), // вернётся при успешной оплате
'RUB',
[{ label: 'Итого', amount: order.total * 100 }], // в копейках
);
return invoiceLink;
}
// Обработка успешной оплаты
bot.on('pre_checkout_query', (query) => {
bot.answerPreCheckoutQuery(query.id, true);
});
bot.on('successful_payment', async (msg) => {
const { orderId } = JSON.parse(msg.successful_payment!.invoice_payload);
await markOrderPaid(orderId);
bot.sendMessage(msg.chat.id, `✅ Оплата получена! Заказ #${orderId} подтверждён.`);
});
На фронтенде открываем форму оплаты:
// Получаем ссылку от сервера и открываем оплату
const invoiceUrl = await apiPost('/api/create-invoice', { orderId });
WebApp.openInvoice(invoiceUrl, (status) => {
if (status === 'paid') {
WebApp.showAlert('Оплата прошла успешно!');
navigate('/order-success');
}
});
Уведомления после закрытия Mini App
Когда пользователь закрыл Mini App, вы всё равно можете отправлять ему сообщения через бота:
async function notifyOrderStatus(telegramUserId: number, order: any) {
await bot.sendMessage(telegramUserId,
`📦 Заказ #${order.id}\n\n` +
`Статус: ${order.statusText}\n` +
`Ожидаемая доставка: ${order.deliveryDate}`,
{
reply_markup: {
inline_keyboard: [[
{
text: '🔍 Отследить заказ',
web_app: { url: `https://yourapp.com/orders/${order.id}` }
}
]]
}
}
);
}
Сколько стоит разработать Mini App
Ориентировочные сроки и стоимость:
| Тип Mini App | Срок | Стоимость |
|---|---|---|
| Простой каталог с формой заказа | 2-3 недели | от $1 500 |
| Интернет-магазин с оплатой | 4-6 недель | от $3 000 |
| Система бронирования | 3-5 недель | от $2 500 |
| Полноценный маркетплейс | 8-14 недель | от $8 000 |
Для каких бизнесов это особенно выгодно
Mini App особенно хорошо работает для:
- Ресторанов и кафе - меню, заказ, оплата без кассира
- Салонов красоты - онлайн-запись, напоминания
- Интернет-магазинов - альтернативный канал продаж с высокой конверсией
- Доставки - статус заказа в реальном времени
- B2B - внутренние инструменты для сотрудников
Aunimeda разрабатывает Telegram Mini Apps и Telegram ботов для бизнеса в Кыргызстане, Казахстане и России - под ключ с оплатой и интеграцией с вашими системами.
Обсудить проект. Смотрите также: Telegram боты, Автоматизация бизнеса, Разработка приложений