Платёжное приложение для чат-бота в Тelegram
О проекте
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, означает, что самые смелые задумки дизайнеров непременно воплотятся в жизнь.
Стикеры и анимация
Когда за дело берутся дизайнеры, интерфейс приложения получается уникальным и ярким. Особенно интересным, динамичным и лёгким вышел процесс выбора курса, ведь над оформлением каталога трудились и иллюстратор, и моушн-дизайнер. Каждое направление сопровождается фирменным стикером в виде космонавта, который «оживает» по клику.
Адаптивность интерфейса к цветовой теме пользователя
Боты в Тelegram собирают информацию о настройках темы интерфейса в реальном времени. Это значит, что как только пользователь переключается между дневным и ночным режимом, приложение автоматически адаптируется к изменениям.
Дизайнеры позаботились об индивидуальных предпочтениях юзеров и спроектировали интерфейс платёжного сервиса в светлых и темных тонах:
Техническая реализация
Пользовательский интерфейс приложения (фронтенд) спроектирован с помощью прогрессивного 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. Удобный в использовании, эффектный во взаимодействии и уникальный с точки зрения дизайна — с таким приложением ваш бизнес станет к клиентам ещё ближе.
Comments are closed.
Комментарии