Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Платёжное приложение для чат-бота в Тelegram

О проекте

Webnauts Academy Pay — это удобный инструмент для нашего внутреннего образовательного проекта Webnauts Academy. Он представляет собой интерактивное веб-приложение внутри Telegram-бота, позволяющее студентам быстро оплатить нужный IT-курс, не покидая привычную среду мессенджера Тelegram.

Новая технология Тelegram — веб-приложение для ботов

С тех пор, как весной 2022 года Тelegram презентовал революционную технологию Web Apps for Bots, мы успели дважды её испытать и горячо полюбить по нескольким причинам:

  1. функциональность, не уступающая полноценному сайту;
  2. возможность создавать интерфейсы на любой вкус с помощью популярного языка программирования JavaScript;
  3. адаптивность приложения с учётом мобильного устройства и даже цветовой темы пользователя;
  4. интеграция со сторонними веб-сервисами, в том числе с платёжными системами Google Pay и Apple Pay;
  5. автоматическая доставка индивидуальных сообщений Т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 всего в несколько кликов, а именно:

  1. Оплачиваем выбранный курс, нажав кнопку «За месяц» или «Полная стоимость».
  2. Кликаем «Оплатить».
  3. Ещё раз подтверждаем итоговую сумму с помощью кнопки «Оплатить».
  4. Вводим имя и номер телефона.
  5. Выбираем способ оплаты (данные банковской карты, PrivatPay, Google Pay либо Apple Pay).
  6. Ещё раз проверяем заполненную форму и выбираем «Оплатить».
  7. Подтверждаем платёж в приложении банка и при желании вводим email для получения квитанции об оплате.
  8. Тут же получаем уведомление об успешной оплате в чат-боте приложения.

Как видим, приложение помогает пользователю сделать сознательный выбор через дополнительные подтверждения платёжной информации. Такой подход не сокращает путь к покупке, зато позволяет избежать ошибок и негативного пользовательского опыта, а значит — сохранить репутацию компании в глазах клиента.

Результат

Не прошло и года после выхода новой Тelegram-технологии, как наши разработчики успели блестяще её освоить и даже войти во вкус. Наш очередной кейс показывает, насколько широки возможности разработки веб-приложений внутри чат-ботов для Телеграм. Такой продукт может стать не только полноценной заменой сайта, но и дополнительным каналом коммуникации с клиентами в мессенджере №1. Удобный в использовании, эффектный во взаимодействии и уникальный с точки зрения дизайна — с таким приложением ваш бизнес станет к клиентам ещё ближе.

Как насчёт расширить границы своего бизнеса с помощью приложения для бота в Тelegram?

Принимайте платежи, доставляйте посылки, рассылайте уведомления — взаимодействуйте с клиентами в Тelegram как угодно. Расскажите нам о своём проекте, и мы реализуем функциональное приложение для бота, заточенное под конкретные бизнес-задачи.

Над проектом работали

Похожие работы

Платёжное приложение для чат-бота в Тelegram
5/5 (45 людей)