Платіжний додаток для чат-бота в Telegram
Про проєкт
Webnauts Academy Pay — це зручний інструмент для нашого внутрішнього освітнього проєкту Webnauts Academy. Він являє собою інтерактивний вебдодаток всередині Telegram-бота, що дозволяє студентам швидко оплатити потрібний IT-курс, не залишаючи звичне середовище месенджера Тelegram.
Нова технологія Тelegram — вебдодаток для ботів
З того часу, як навесні 2022 року Тelegram презентував революційну технологію Web Apps for Bots, ми встигли двічі її випробувати та гаряче полюбити з кількох причин:
- функціональність, що не поступається повноцінному сайту;
- можливість створювати інтерфейси на будь-який смак за допомогою популярної мови програмування JavaScript;
- адаптивність додатка з урахуванням мобільного пристрою та навіть колірної теми користувача;
- інтеграція зі сторонніми вебсервісами, зокрема з платіжними системами Google Pay та Apple Pay;
- автоматична доставка індивідуальних повідомлень Тelegram-користувачам і багато іншого.
Читайте також:
Додаток у чат-боті Тelegram для доставки посилокСуть платіжного додатка
Робота з додатком Webnauts Academy Pay починається з мінідовідки «Що вміє цей бот?» і УТП, що міститься в ній: «При оплаті повної вартості — знижка 10%».
Далі давайте розберемося за порядком.
1) Відкриваємо додаток й обираємо курс
Натиснувши «Почати», нам не залишається нічого іншого, як оплатити курс, натиснувши на відповідну кнопку. У вікні з каталогом курсів обираємо потрібний і знайомимося з інформацією.
Картка товару (в нашому випадку – курсу) виглядає цікаво та лаконічно завдяки анімованому стікеру та чітко структурованої інформації:
- 3 головні умови навчання: тривалість, помісячна та повна вартість;
- 3 кнопки: оплата «За місяць», оплата «Повної вартості» та «Подробиці на сайті».
2) Обираємо тип оплати та підтверджуємо замовлення
При натисканні на одну з кнопок із варіантом оплати («За місяць» або «Повна вартість») у нижній частині екрана з’являється зелена плашка з підсумковою сумою, потім вікно з підтвердженням замовлення та коротка форма для внесення даних покупця.
3) Обираємо спосіб оплати та оплачуємо курс
Купівля завершується вибором способу оплати: PrivatPay, Google Pay / Apple Pay чи банківська картка. Обираємо чи вносимо платіжні дані, ще раз перевіряємо інформацію та тиснемо зелену кнопку «Оплатити». Далі все, як в інтернет-магазині: підтвердження платежу від банку та відправка електронної квитанції на пошту.
Повідомлення про успішну оплату курсу миттєво надходить у чат з ботом. Адміністратор так само отримує повідомлення з інформацією про транзакцію: ім’я та мобільний номер, нікнейм і фото Telegram-юзера, назва та вартість курсу, а також ID покупки.
А ось як процес оплати виглядає наживо (40 секунд):
Індивідуальний дизайн
Від нової Telegram-технології затріпотіли не лише розробники. Адже сам факт, що писати додатки для ботів можна на JavaScript, означає, що найсміливіші задуми дизайнерів неодмінно втіляться в життя.
Стікери та анімація
Коли за справу беруться дизайнери, інтерфейс додатка виходить унікальним і яскравим. Особливо цікавим, динамічним і легким вийшов процес вибору курсу, адже над оформленням каталогу працювали і ілюстратор, і моушн-дизайнер. Кожен напрямок супроводжується фірмовим стікером у вигляді космонавта, який «оживає» за кліком.
Адаптивність інтерфейсу до колірної теми користувача
Боти в Telegram збирають інформацію про налаштування теми інтерфейсу в реальному часі. Це означає, що як тільки користувач перемикається між денним і нічним режимом, додаток автоматично адаптується до змін.
Дизайнери подбали про індивідуальні вподобання юзерів і спроєктували інтерфейс платіжного сервісу в світлих і чорних тонах:
Технічна реалізація
Користувальницький інтерфейс (фронтенд) спроєктований за допомогою прогресивного JavaScript-фреймворку Vue.js, а його серверна частина (бекенд) — за допомогою програмної платформи Node.js і JavaScript-бібліотеки Telegraf.
Фронтенд і бекенд додатка з’єднаний із сайтом, розробленим на WordPress, по Bot API — HTTP-інтерфейсу для роботи з Telegram-ботами. Отже, список курсів і вся необхідна інформація автоматично «підтягується» з сайту до каталогу та товарних карток.
Для реалізації анімованих стікерів ми застосували js-бібліотеку Lottie. Вона чудово відображає анімацію в інтернеті та легко інтегрується з графічною програмою Adobe After Effects — головним інструментом нашого моушн-дизайнера.
Підключення платежів
Це найголовніше і каверзне завдання проєкту через недостатньо детальну документацію Telegram. Але ми впоралися: створивши додаток усередині чат-бота, ми під’єднати його до платіжного провайдера LiqPay та налаштували за допомогою Telegram Bot Payments — платформи, що дозволяє приймати оплату від Telegram-користувачів.
У результаті ми отримали додаток, здатний замінити повноцінний інтернет-магазин і робити покупки в Telegram всього в кілька кліків, а саме:
- Оплачуємо вибраний курс, натиснувши кнопку «За місяць» або «Повна вартість».
- Клікаємо «Оплатити».
- Ще раз підтверджуємо підсумкову суму за допомогою кнопки «Оплатити».
- Вводимо ім’я та номер телефону.
- Вибираємо спосіб оплати (дані банківської картки, PrivatPay, Google Pay чи Apple Pay).
- Ще раз перевіряємо заповнену форму та вибираємо «Оплатити».
- Підтверджуємо платіж у додатку банку та за бажанням вводимо email для отримання квитанції про оплату.
- Одразу ж отримуємо повідомлення про успішну оплату в чат-боті додатка.
Як бачимо, додаток допомагає користувачу зробити свідомий вибір через додаткові підтвердження платіжної інформації. Такий підхід не скорочує шлях до покупки, зате дозволяє уникнути помилок і негативного досвіду користувача, а значить зберегти репутацію компанії в очах клієнта.
Результат
Не минуло й року після виходу нової Тelegram-технології, як наші розробники встигли блискуче її опанувати та навіть набралися смаку. Наш черговий кейс показує, наскільки широкими є можливості розробки вебдодатків усередині чат-ботів для Телеграм. Такий продукт може стати не лише повноцінною заміною сайту, а й додатковим каналом комунікації з клієнтами у месенджері №1. Зручний у використанні, ефектний у взаємодії та унікальний з погляду дизайну — з таким додатком ваш бізнес стане до клієнтів ще ближчим.
