Платёжный сервис для приёма оплат с конвертацией в криптовалюту
Рынок виртуальных активов является одним из наиболее перспективных секторов украинской экономики. В 2023 году по внедрению криптовалюты среди обычного населения Украина заняла 5 место в мире. Неудивительно, ведь цифровые активы стали не только привлекательным объектом инвестиций, но и удобным инструментом для оплаты товаров и услуг. Многие интернет-магазины и сервисы, в частности Фокстрот, Varus и WOG, подключают приём криптоплатежей через популярные приложения Binance Pay и WhitePay. Это даёт покупателям возможность оплачивать товары и услуги криптовалютой, а мерчантам — увеличить аудиторию и продажи.
Однако инфраструктура для оплаты покупок криптовалютой пока недостаточно развита. К примеру, что делать продавцам, которые хотят принимать платежи в криптовалюте даже от клиентов с гривневыми счетами? Наш ответ: обратить внимание на платёжную систему SharkPay, которая обеспечивает криптопроцессинг с конвертацией фиата в криптовалюту через банковские P2P переводы.
Мы разработали целую платёжную экосистему (страница для приёма платежей, админка и лендинг сервиса, личные кабинеты и Telegram-бот), в которую входят ряд участников: покупатели, трейдеры и мерчанты.
Как она работает и что было сделано для её реализации? Читайте в нашем кейсе.
Обычные криптоплатежи
Чтобы разобраться в механизме работы платёжной системы SharkPay, рассмотрим сначала традиционный способ онлайн-оплаты в криптовалюте. Он похож на обычную оплату в интернете, только вместо ввода реквизитов банковской карты для списания средств покупатель указывает адрес криптокошелька получателя для перевода необходимой суммы из собственного кошелька. С приложением Binance или WhiteBIT всё значительно проще: покупатель сканирует QR-код на сайте продавца и подтверждает оплату.
Существует ещё один способ расчёта цифровой валютой, не отличающийся от обычной безналичной оплаты — это криптокарта на базе Visa или Mastercard, привязанная к криптовалютному кошельку. Она автоматически конвертирует криптовалюту в фиат и доступна для бесконтактной оплаты с помощью Google Pay и Apple Pay.
С системой SharkPay покупателям, желающим приобрести товар или услугу в криптовалюте, не нужен никакой криптокошелёк. И даже криптовалюта. Покупатель может вообще не знать о том, что мерчант получает оплату в крипте, — для него это обычный перевод в гривне.
Криптоплатежи с SharkPay
SharkPay – это платёжная система для приёма оплат в фиате с конвертацией в криптовалюту. Интегрировав готовое решение на сайт интернет-магазина, продавец получает возможность принимать платежи в BTC и USDT, а покупатели — оплачивать товары и услуги в гривне путём p2p-перевода.
Конвертация средств для потребителя и продавца происходит почти незаметно, однако на самом деле за ним скрывается полноценный процесс криптотрейдинга. И кропотливая работа команды Webnauts по бизнес-аналитике, формированию ТЗ, построению UX-сценариев и визуальному оформлению прототипов по фирменному стилю клиента. А также фронтенд и бэкенд разработка, развёртывание, защита и тестирование всех элементов платёжной экосистемы SharkPay: сервиса с платёжной страницей, личными кабинетами и админ-панелью, лендинга для привлечения клиентов и Telegram-бота для автоматизации платежей.
Как работает платёжный сервис
Процесс оплаты и SharkPay глазами покупателя
1) Оплата товара или услуги происходит на платёжной странице SharkPay, интегрированной с интернет-магазином. Покупатель выбирает удобный способ оплаты среди популярных украинских банков:
2) Далее осуществляет и подтверждает денежный перевод по банковским реквизитам трейдера, готового принять платёж.
Сервис замораживает эквивалентную сумму на криптовалютном кошельке трейдера, пока покупатель не совершит перевод.
3) Для ускорения оплаты покупатель подтверждает успешность перевода с помощью чека или скриншота:
4) Как только трейдер подтверждает перевод, покупка на сайте фактически оплачена: платёж покупателя списывается с замороженных средств трейдера на криптовалютный баланс магазина:
Конвертация осуществляется в момент платежа и обычно занимает 2-3 минуты. Для перевода фиатных средств покупателю даётся не более 20 минут, поскольку из-за высокой волатильности рынка курс криптовалюты может прыгать. Если в течение этого времени покупатель не совершает оплату, трейдер может закрыть сделку, и тогда его криптоактивы разморозятся:
Если трейдер не видит пополнения счета, сделка попадает в арбитраж. В этом случае к спору привлекается модератор и проверяет выписку банковского счёта трейдера:
SharkPay глазами мерчанта
1) Прежде чем интегрировать платёжную систему с интернет-магазином, продавец регистрируется на сайте SharkPay:
2) Впоследствии администратор принимает заявку, консультирует продавца насчёт условий сотрудничества и после заключения договора предоставляет доступ к личному кабинету. Интерфейс личного кабинета мерчанта содержит лаконичную шапку с актуальным курсом валют, а также пиктограммами уведомлений, языка и аватара пользователя. На боковой панели легко найти такие разделы, как Кассы, Сделки, Профиль, Вопрос-ответ и Написать в поддержку.
3) Процесс подключения платёжного сервиса к сайту достаточно прост и начинается с создания касс для приёма оплат в BTC и USDT в соответствующем разделе:
4) Чтобы касса заработала и могла принимать криптовалюту, остаётся последний шаг — подключить её к сайту с помощью API:
5) Готово! Теперь мерчант может просматривать общий баланс на всех кассах, а также историю и статус всех транзакций каждой кассы в частности:
Для вывода криптовалюты из кассы мерчант формирует заявку, указав реквизиты и сумму:
Все сделки сохраняются в соответствующем разделе с указанием общей статистики:
В разделе Профиля мерчант может редактировать персональную информацию и управлять настройками безопасности аккаунта:
Ответы на популярные вопросы по настройке личного кабинета находятся в разделе Вопрос-ответ, при отсутствии которых можно обратиться в службу поддержки разделом ниже:
SharkPay глазами трейдера
Если трейдер хочет выступать посредником между покупателем и мерчантом с целью получения комиссионной прибыли на платформе SharkPay, он должен:
1) Зарегистрироваться на сайте:
2) Пройти верификацию:
После ручного одобрения заявки и заключения договора с SharkPay, трейдер получает право на торговые операции и доступ к полному функционалу личного кабинета. Он имеет лаконичный дизайн и структуру, в частности шапку с актуальным курсом валют, элементы для изменения статуса торговли и языка интерфейса, значок звоночка со всплывающими уведомлениями и аватар профиля.
Слева расположен сайдбар, в котором размещены все разделы кабинета: Кошельки, Сделки, Объявления, Профиль, Вопрос-ответ и Написать в поддержку:
Рассмотрим раздел Кошельки, где трейдер может легко и удобно:
1) создавать кошельки для разных типов валют и фильтровать сделки по дате, статусу, типу операции и кошелька:
2) пополнять кошельки криптовалютой BTC и USDT без комиссии:
3) выводить криптоактивы посредством создания заявки:
Детальная статистика, отчёт о прибыли и полный список транзакций содержится в разделе Сделки:
В разделе Объявления трейдер создаёт и активирует объявления о продаже криптовалюты, указав направление (банк) и реквизиты карты для получения фиатных денег. Чем больше гривневых счетов имеет трейдер, тем больше заявок на покупку он может принять:
Раздел Профиля содержит фото и персональную информацию, а также позволяет сменить пароль и управлять двухфакторной аутентификацией.
Привычный всем раздел Вопрос-ответ содержит самые распространенные вопросы о работе сервиса:
Админка сервиса
SharkPay глазами администратора
Административная панель платёжной системы имеет удобную навигацию, подобную интерфейсу всех других личных кабинетов SharkPay. Она содержит лаконичную шапку с актуальными курсами валют, значком уведомлений и поктограммой для быстрого выхода из системы. Сайдбар слева охватывает такие разделы, как Заявки, Сделки, Статистику, Кошельки и Настройки.
С таким простым интерфейсом администратору легко контролировать нормальную работу всего платёжного сервиса. В отличие от всех других участников, он имеет полный доступ к функционалу платформы, среди которых:
1) Приём заявок от мерчантов и трейдеров. Через администратора проходят заявки на сотрудничество и верификацию, после одобрения которых мерчанты смогут создавать кассы и принимать платежи, а трейдеры — получать заявки и участвовать в торговле:
При одобрении заявки мерчанта и верификации трейдера администратор имеет возможность назначать ставку комиссии, а также настраивать количество трафика:
Вывод средств со стороны мерчантов и трейдеров тоже происходит через формирование заявки и требует одобрения администратора:
2) Управление сделками. Администратор имеет перед собой легкий для восприятия главный раздел панели, позволяющий мониторить активные и просматривать оплаченные сделки, фильтровать их по статусу и экспортировать по периоду. А также оперативно разрешать споры путём отмены (если покупатель не перечислил средства трейдеру) или завершения сделки (если трейдер получил деньги от покупателя):
3) Просмотр статистики. Раздел Статистики включает в себя 2 подраздела с полной базой мерчантов и трейдеров, которым предшествует общая картина по величине прибыли, количеству сделок, запросов и споров за конкретный период. Раздел оснащен удобным фильтром и полем поиска:
Кроме того, администратор может просматривать статистику по каждому мерчанту и трейдеру. Помимо контактов, страница содержит 2 подраздела со Статистикой и Транзакциями. Последний имеет поле поиска и фильтр, который сортирует транзакции по типу операции, дате и кошельку (или кассе, если это мерчант):
4) Просмотр балансов мерчантов, трейдеров и сервиса с прибылью от сделок. За этот функционал отвечает раздел Кошельки. Он содержит 3 подраздела, каждый из которых имеет свои характеристики и встроенное поисковое поле:
5) Настройка сервиса. Как ни странно, это самый объёмный раздел админ-панели, который позволяет:
- создавать, редактировать и блокировать банки, клиентами которых являются трейдеры:
- добавлять, редактировать и удалять модераторов:
- управлять значением комиссии мерчантов и трейдеров в общем (базовая ставка) и индивидуальном порядке (исключение), а также распределять трафик сделок между трейдерами в зависимости от их рейтинга на основе отзывов пользователей:
- управлять контентом раздела Вопрос-ответ для мерчантов и трейдеров на трёх языках:
- менять пароль и курсы валют:
SharkPay глазами модератора
Модераторы — это помощники администратора, деятельность которых сужается к мониторингу и управлению сделками, в частности разрешению споров. Для этого мы разработали максимально минималистичную систему управления контентом, содержащую всего 2 раздела: Сделки и Трейдеры.
Подобно интерфейсу администратора, раздел Сделок содержит подраздел с Активными сделками и Историей. Активные сделки позволяют следить за текущими и разрешать проблемные операции. К примеру, если покупатель не осуществил перевод средств на гривневый счет трейдера в течение 20 минут, забыл нажать кнопку «Подтвердить перевод» или не прикрепил чек успешной транзакции, сделка переходит в арбитраж на рассмотрение модератора. Если проверка чека от покупателя или истории транзакций трейдера оказалась успешной, модератор завершает сделку, если нет — отменяет её.
Сделку трейдера, попавшую в арбитраж, легко найти благодаря встроенному фильтру по дате, кошельку, типу и статусу операции, а также через поисковое поле по эмейлу, никнейму или другим данным.
Раздел Трейдеры предоставляет модератору доступ к полному списку посредников с возможностью быстрого поиска или сортировки по статусу верификации:
Клик на карточку трейдера открывает модератору статистику по ключевым показателям, баланс кошельков и полную историю транзакций:
Лендинг
Более простого лендинга, чем SharkPay, не стоит и желать. Первый экран вместе с тремя блоками закрывают главные вопросы любой посадочной страницы:
- Что это?
- Как это работает?
- Какие преимущества имеет?
Цель лендинга — привлекать новых клиентов, а именно:
- представителей бизнеса и ритейла, желающих принимать платежи в криптовалюте удобным для покупателей способом, не требующим наличия криптокошелька и специальных знаний;
- трейдеров, желающих быть посредниками платформы и зарабатывать на торговле криптовалютой по выгодному курсу.
Дизайн лендинга, подобно всему сервису, должен был быть максимально понятен и соответствовать существующему фирменному стилю:
Telegram-бот
Telegram-бот в основном разрабатывался для автоматизации трейдинга, чтобы облегчить и ускорить работу посредников в обычном мессенджере в любом месте.
Авторизовавшись, трейдер может «включить» свой рабочий день и отслеживать новые соглашения: проверять чеки, подтверждать и отрицать оплаты, получать уведомления о пополнении и выводе средств, оперативно разрешать споры со службой поддержки.
Для мерчанта Telegram-бот полезен в плане уведомлений об успешных платежах и возможности быстро связаться с администрацией SharkPay.
Настроить связь с Telegram-ботом можно в личном кабинете трейдера и мерчанта в разделе Профиля:
Техническая реализация сервиса
Вёрстка
Фронтенд платёжного сервиса стоит на трёх столпах веб-разработки: языка программирования Javascript, языка разметки HTML и языка стиля страниц CSS (плюс её синтаксис SCSS). А также мощные JavaScript-фреймворки Vue 3 и Nuxt 3.
Быстрое написание и проверку кода при компиляции обеспечил TypeScript — идеальный язык программирования для поддержания и масштабирования больших проектов. К тому же мы обеспечили чистый, согласованный и автоматизированный процесс кодинга с помощью форматировщика Prettier и аналитического инструмента ESLint.
Платёжная система SharkPay имеет сложную логику с множеством связей и зависимостей, которая может влиять на скорость обработки запросов. Некоторые компоненты часто переиспользовались и потому влияли на логику программы. Тем не менее нам удалось обеспечить оптимальную производительность сервиса благодаря дополнительным инструментам. Так, при построении архитектуры мы применили лучшие практики сообщества Nuxt 3, а все запросы на бэкенд написали с помощью хука useFetch.
Кроме того, в разработке пользовательской части сервиса мы использовали:
- набор API для создания Vue-компонентов Composition API;
- библиотека для хранилища данных и управления состоянием программы Pinia;
- протокол для обмена информацией между браузером и сервером в реальном времени Websocket;
- плагин для реализации мультиязычности сайта и личного кабинета трейдера и мерчанта i18n;
- библиотеку для оптимизации изображений Nuxt Image;
- компонент для выбора даты Datepicker;
- плагин для лёгкого копирования реквизитов в буфер обмена clickboard-copy;
- библиотеку для перетаскивания файлов Vue3 DropZone;
- компонент для разбивки на страницы vuejs-paginate-next;
- директиву для реагирования на клики вне элемента click-outside-vue3;
- плагин для определения положения элементов в пределах области просмотра Vue In Viewport Mixin;
- плагин для автоматического отслеживания размеров экрана и состояния медиа-запросов VueScreen;
- библиотеку для тестирования программы Vuelidate.
Программинг
Серверная часть программы создана с помощью языка TypeScrypt и фреймворка Nest.js на прогрессивной платформе Node.js. Она позволяет запускать такие высокопроизводительные веб-приложения на JavaScript, как платёжная система SharkPay.
Полный функционал сервиса был реализован благодаря таким дополнительным технологиям, как:
- PostgreSQL і Redis — база для хранения данных;
- ORM Sequelize — фреймворк для взаимодействия с базой данных PostgreSQL;
- библиотеки io-redis и node-redis для взаимодействия с базой данных Redis;
- JSON Web Token — стандарт токена доступа для передачи данных для аутентификации пользователей;
- библиотека Socket IO — для настройки всплывающих уведомлений в реальном времени (в частности в Telegram-боте);
- библиотека telegraf.js — для автоматической обработки сообщений в Telegram-боте;
- библиотека TronWeb i bitcoinjs-lib — для интеграции сканирования блоков и переводов криптовалют USDT и BTC;
- библиотека nestjs/bull на основе Redis — для обработки сообщений и транзакций в очереди.
Безопасность
Кроме того, что сервер OS Linux, на котором размещён SharkPay, обеспечен высокими стандартами безопасности (в частности, из-за настройки сетевого трафика firewall, закрытия лишних портов, отключения входа по паролю и т. д.), после деплоя платёжного сервиса мы планируем реализовать cloud backup. Это полная резервная копия базы данных в закрытое облачное хранилище, доступ к которому осуществляется с помощью защищённого протокола. В настоящее время все чеки надёжно хранятся в закрытом хранилище и доступны только администратору платёжного сервиса и пользователям, совершившим транзакцию.
Результат
Результатом работы команды Webnauts стала не просто платёжная система, а целая платёжная экосистема, которая охватывает:
- платёжную страницу,
- личный кабинет мерчанта и трейдера,
- панель администратора,
- лендинг,
- Telegram-бот.
Онлайн-сервис SharkPay, работающий по принципу P2P торговли криптовалютой, позволяет покупателям производить оплату в традиционной валюте и принимать платежи продавцам в криптовалюте. Проводить и проверять расчётные операции можно как в личном кабинете на сайте, так и с помощью чат-бота в Telegram.
Участие населения Украины на рынке виртуальных активов в 2023 году составляет один из самых высоких в мире показателей (15,7%).
Учитывая быструю интеграцию криптовалюты в повседневную жизнь украинцев интернет-магазинам есть смысл задуматься об альтернативных методах оплаты. Это не только позволит онлайн-бизнесу принимать платежи в криптовалюте, но и упростит жизнь покупателям, привыкшим оплачивать товары и услуги обычными фиатными деньгами.
Например, команда Webnauts готова реализовать полноценный криптоплатёжный сервис, который позволит клиентам совершать покупки криптовалютой без необходимости выводить денежные средства с биржи. А вашему бизнесу — расширить целевую аудиторию, увеличить продажи и принимать платежи со всего мира.
Комментарии