E-commerce бот: каталог, кошик, оплата через Telegram Mini App

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.

Архітектура 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));

Що входить в роботу?

Типові помилки при інтеграції

• Використання 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 з каталогом, кошиком та кастомним платіжним flow. Вартість розраховується індивідуально після аналізу вимог. Економія бюджету порівняно з розробкою нативного додатку може сягати 40%.

Понад 5 років ми спеціалізуємось на Telegram-ботах і реалізували більше 30 e-commerce проєктів. Наш досвід підтверджений успішними кейсами та сертифікатами. Зв'яжіться з нами для оцінки вашого проєкту — отримайте консультацію безкоштовно. Оцінимо проєкт і запропонуємо оптимальне рішення під ключ.

Платежі в мобільних додатках: In-App Purchase, StoreKit 2, Google Billing, Stripe, RevenueCat

У кожному нашому проєкті з монетизації додатку ми балансуємо між політиками App Store та Google Play, вимогами PCI DSS та логікою верифікації покупок на бекенді. Неправильно зроблена система платежів — це не просто баг, це фінансові втрати та можливий бан додатку. За 7 років ми розібрали понад 50 кейсів інтеграції платіжних SDK — від простої Stripe-форми до розподіленого біллінгу з власними серверними вебхуками.

Як вибрати між In-App Purchase та зовнішнім платіжним шлюзом?

Якщо додаток продає цифровий контент або підписки — Apple та Google вимагають використовувати їхні платіжні системи. Обійти це неможливо: порушення правил 3.1.1 App Store або Google Play Developer Policy призводить до видалення додатку. Фізичні товари та послуги, що надаються офлайн, — інша історія.

In-App Purchase: дві платформи, два різних API

StoreKit 2 (iOS 15+)

StoreKit 2 — повна переробка оригінального StoreKit з async/await API. Product.products(for:), product.purchase(), Transaction.currentEntitlements — читабельно та передбачувано порівняно з чергою транзакцій через SKPaymentTransactionObserver.

Найважливіша зміна: транзакції в StoreKit 2 підписані JWS (JSON Web Signature) і верифікуються локально без серверного roundtrip. Transaction.verificationResult повертає .verified(Transaction) або .unverified(Transaction, VerificationError). Це не означає, що сервер не потрібен — він потрібен для зберігання статусу підписки, але локальна верифікація прибирає затримку при старті.

StoreKit.AppTransaction — верифікація самого факту завантаження додатку з App Store. Потрібна для додатків з платним завантаженням або безстроковими покупками, не підписками.

Складне місце в StoreKit 2 — обробка renewalState для підписок: .subscribed, .expired, .inBillingRetryPeriod, .inGracePeriod, .revoked. Стан inGracePeriod означає, що Apple намагається відновити оплату (до 16 днів) — у цей час потрібно продовжувати надавати доступ. Не обробиш — втратиш лояльних користувачів, у яких тимчасово не пройшла картка. За досвідом, близько 5% підписок потрапляють у billing retry, і автоматичне відновлення доступу повертає до 80% з них.

Google Play Billing Library (v6+)

Google Billing — складніший за StoreKit за кількістю сценаріїв. BillingClient з PurchasesUpdatedListener, queryProductDetailsAsync, launchBillingFlow, queryPurchasesAsync — обов'язково викликати при кожному старті додатку, не покладатися на PurchasesUpdatedListener як єдине джерело правди.

Підтвердження покупки: acknowledgePurchase() для non-consumables та підписок, consumePurchase() для consumables. Якщо не викликати acknowledge протягом 3 днів — Google автоматично зробить повернення. Це гарантована втрата грошей, якщо забути про acknowledge на бекенді після верифікації.

ProductDetails з SubscriptionOfferDetails — в Billing v5+ структура оферт ускладнилася: один продукт може мати кілька basePlanId та offerId (пробний період, знижка для нових користувачів, retention-офер). BillingFlowParams.SubscriptionUpdateParams для апгрейду/даунгрейду підписки з prorationMode.

Чому серверна верифікація обов'язкова?

Ніколи не довіряйте лише клієнтському коду при розблокуванні платного контенту. Клієнтська верифікація обходиться модифікацією додатку.

Для IAP мінімальна схема: додаток отримує receiptData (iOS) або purchaseToken (Android), відправляє на бекенд, бекенд верифікує через Apple App Store Server API / Google Play Developer API, зберігає статус у БД, віддає відповідь клієнту. RevenueCat робить це за вас — але якщо у вас кастомний бекенд, потрібно реалізувати самостійно.

Webhook-и важливіші, ніж здається. Користувач може скасувати підписку через налаштування телефону, не через додаток — додаток не отримає про цю подію в реальному часі. Тільки webhook від Apple/Google (або RevenueCat) дозволяє своєчасно оновити статус. Ми використовуємо перевірку підпису вхідних запитів через Apple's signedPayload та Google's DeveloperNotification.

Як RevenueCat спрощує інтеграцію?

Підтримувати StoreKit 2 та Google Billing одночасно, з урахуванням промо-кодів, оферт, відновлення покупок та серверної верифікації — це кілька місяців розробки. RevenueCat закриває більшу частину цього шару.

RevenueCat — не просто SDK для платежів. Це:

• Єдиний API для iOS та Android (і Stripe для вебу)
• Серверна верифікація та зберігання статусів підписок
• Webhooks на події (покупка, відновлення, скасування, billing issue)
• Аналітика по когортам, MRR, churn
• A/B тестування оферт через Experiments

Purchases.configure(withAPIKey:) при старті, Purchases.shared.getCustomerInfo() для отримання поточних entitlements — мінімальний інтегрований шар. Purchases.shared.purchase(package:) замість прямого виклику StoreKit/Billing.

У документації RevenueCat сказано: «RevenueCat handles receipt validation on the server side, reducing client-side complexity and preventing fraudulent purchases.»

Обмеження RevenueCat: платний (безкоштовно до певного рівня MRR, далі відсоток від доходу), не підходить для дуже складних flow з кількома storefront-ами або кастомними bundle-ами. Однак для типового SaaS-додатку економія на власній розробці є значною — інтеграція окупається швидко.

Stripe в мобільних додатках

Stripe — для оплати фізичних товарів, послуг, B2B-платежів де IAP не вимагається політикою платформи.

Stripe iOS SDK та Android SDK — PaymentSheet для готового UI оплати, PaymentSheetFlowController для кастомного UI зі збереженими картками. Payment Intent створюється на сервері, client secret передається в додаток — карткові дані ніколи не проходять через ваш сервер, лише через Stripe.

Apple Pay та Google Pay через Stripe: PKPaymentRequest (iOS) та GooglePayLauncher (Android) вже інтегровані в Stripe SDK. Конверсія у Apple Pay дає в 1.3–2 рази вищий результат, ніж форми з ручним введенням картки — це цифри, які ми підтвердили на десятці проєктів.

Збережені картки через SetupIntent + Customer API — користувач платить в один тап при повторному візиті. Compliance: PCI DSS SAQ A — найлегший рівень compliance, оскільки Stripe Tokenization прибирає потребу зберігати карткові дані на своїй стороні. Згідно з PCI DSS, передача токенів звільняє від необхідності сертифікації рівня 1.

3DS2 (Strong Customer Authentication) — обов'язковий для платежів у ЄС за PSD2. Stripe обробляє автоматично через PaymentIntent.confirmPayment, але потрібно коректно обробити .requiresAction статус та повернути користувача на потрібний екран після аутентифікації.

Що входить в роботу (deliverables)

Процес та терміни

Починаємо з з'ясування бізнес-моделі: підписки, разові покупки, consumables, freemium. Від цього залежить архітектура. Тестування IAP вимагає Sandbox-акаунтів (Apple) та License Testers (Google) — це окреме налаштування середовища.

Sandbox Apple поводиться не так, як production: підписки відновлюються кожні 5 хвилин замість місяця, inGracePeriod працює по-іншому. Обов'язково тестувати сценарії: закінчення тріалу, скасування, billing retry, refund.

Як налаштувати тестове середовище для платежів?

Вартість розраховується індивідуально виходячи з набору інструментів та складності серверної логіки. У середньому ми вкладаємося в бюджет, який обговорюється окремо, але економія від запобігання помилок та churn окупає ці вкладення за 2–3 місяці.

Отримайте консультацію по вашому проєкту — зв'яжіться з нами. Ми допоможемо обрати оптимальну архітектуру платежів, яка пройде рев'ю сторів та не зламається при пікових навантаженнях.