Платіжний сервіс для прийому оплат з конвертацією в криптовалюту
Ринок віртуальних активів є одним з найперспективніших секторів української економіки. У 2023 році за впровадженням криптовалюти серед звичайного населення Україна посіла 5 місце у світі. Не дивно, адже цифрові активи стали не лише привабливим об’єктом інвестицій, а й зручним інструментом для оплати товарів і послуг. Багато інтернет-магазинів і сервісів, зокрема Фокстрот, Varus і WOG, підключають прийом криптоплатежів через популярні додатки Binance Pay та WhitePay. Це надає покупцям можливість оплачувати товари та послуги криптовалютою, а мерчантам — збільшити аудиторію та продажі.
Проте інфраструктура для оплати покупок криптовалютою поки недостатньо розвинена. Наприклад, що робити продавцям, які хочуть приймати платежі в криптовалюті навіть від клієнтів з гривневими рахунками? Наша відповідь: звернути увагу на платіжну систему SharkPay, яка забезпечує криптопроцесинг з конвертацією фіата в криптовалюту USDT/BTC через банківські 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 готова реалізувати повноцінний криптоплатіжний сервіс, який дозволить клієнтам здійснювати покупки криптовалютою без необхідності виводити кошти з біржі. А вашому бізнесу — розширити цільову аудиторію, збільшити продажі й приймати платежі з усього світу.
Комментарии