«Код перемоги» від Hello, Ukraine: ІТ-технології для добра

💡 Усі статті, обговорення, новини про оборонні технології — в одному місці. Приєднуйтесь до Defence tech спільноти!

Команда благодійного фонду Hello, Ukraine, який є обʼєднанням спільноти айтівців, наприкінці 2024 року реалізувала запит щодо вдосконалення сайту від «Домівки врятованих тварин». Цей кейс став першою історією ІТ-допомоги в межах проєкту «Код перемоги». Сайт для організації реалізувала UI/UX дизайнерка Марія Коломійцева за підтримки засновника БФ Hello, Ukraine Олега Мелешка, який також є CEO ІТ-компанії Incode Group.

Розповідаємо про благодійну ініціативу «Код перемоги», вибір та імплементацію платіжної системи для сайту і справу, що може рятувати життя.

Ініціатива «Код перемоги»

«Код перемоги» — це проєкт БФ Hello, Ukraine із цифрової підтримки військових формувань та неприбуткових організацій, які сприяють розбудові громадянського суспільства, відновленню та розвитку України. НУО, військові формування та комунальні заклади потребують цифрових інструментів для оптимізації роботи, збору коштів, рекрутингу та поширення інформації.

Олег Мелешко, засновник БФ Hello, Ukraine та CEO Incode Group:

«Україна досягла значних успіхів у діджиталізації державного сектору та бізнесу. Проте багато організацій не мають достатніх ресурсів, щоб впровадити якісні діджитал-рішення та засоби для захисту від цифрових загроз. Тож мета проєкту „Код перемоги“ — забезпечити їх необхідними інструментами і надійним захистом від кібератак. Ініціатива допоможе організаціям ефективніше працювати, розвиватися і мати цифрову стійкість, а також надасть українцям доступ до нових сервісів».

Старт проєкту відбувся в серпні 2024-го, а вже в листопаді команді вдалося реалізувати перший запит ІТ-допомоги.

Із чого все почалося

БФ «Домівка врятованих тварин» із 2018 року рятує постраждалих тварин. До повномасштабного вторгнення робота команди зосереджувалася на реабілітації диких тварин, яких після відновлення відпускали в дику природу. Однак широкомасштабна війна змінила діяльність організації. Від лютого 2022-го «Домівка врятованих тварин» стала прихистком ще й для домашніх улюбленців, які втратили дім і сімʼю. Команда притулку евакуювала тварин із зони бойових дій та прифронтових районів. Так притулок став прихистком для врятованих собак, котів, гризунів та інших тварин.

Діяльність фонду масштабувалася, і в 2024-му «Домівка врятованих тварин» терміново потребувала створення нового сайту.

Марія Коломійцева, UI/UX дизайнерка:

«Як дизайнерка, я взялася допомогти. Під час обговорень ми дійшли висновку, що найкращим рішенням буде створити сайт на платформі Webflow, а не писати код „із нуля“. Оскільки в мене не було достатнього досвіду роботи з Webflow, ми вирішили звернутися до Hello, Ukraine за консультацією».

Так, у межах проєкту «Код перемоги» Олег Мелешко, засновник Hello, Ukraine і CEO ІТ-компанії Incode Group, провів команді фонду дві онлайн-консультації: першу — про створення сайту Webflow та основи роботи на цій платформі; другу — про платіжні системи, які можна інтегрувати на сайт організації.

Марія поділилася, що під час першої консультації Олег пояснив їй основи роботи з Webflow і розповів про ключові кроки створення сайту. Завдяки цьому вона змогла самостійно зверстати основну частину сайту. Згодом виникла потреба підключити платіжну систему, і дизайнерка знову звернулася за допомогою. Тож, організували другу зустріч, під час якої Олег розповів про різні платіжні системи, їхню роботу та переваги.

Як обрати платіжну систему для сайту

Обирали з-поміж трьох платіжних систем Liqpay, Monobank Acquiring API та WayForPay. Порівнювали їх за ключовими критеріями: простота інтеграції, комісія, функціональність, підтримка користувачів, додаткові можливості.

📌 Простота інтеграції

LiqPay:

• Надає API з гарною документацією.
• Є SDK для різних мов програмування.
• Має готовий віджет для швидкого впровадження.
• Підтримує інтеграцію з популярними CMS (WordPress, OpenCart, Magento тощо).

Monobank Acquiring API:

• API добре задокументоване, але вимагає додаткової технічної роботи для реалізації.
• Має менше готових рішень для CMS (порівняно з іншими системами).
• Орієнтована на розробників, які працюють з банківськими системами.

WayForPay:

• Є широкий вибір готових плагінів для популярних CMS.
• Віджет із дизайном можна налаштовувати і впроваджувати без глибоких технічних знань.
• Детальна документація для API.

🏆 LiqPay та WayForPay (зручніші для новачків).

📌 Комісія

LiqPay:

• Комісія за транзакцію: від 2,75 % (може змінюватися залежно від угоди та типу бізнесу).
• Є додаткові комісії за деякі функції, наприклад, виплати на банківські карти.

Monobank Acquiring API:

• Одна з найнижчих комісій на ринку: від 1,3 % до 1,8 % за транзакцію.
• Підходить для бізнесів з великим оборотом.

WayForPay:

• Комісія: від 2,5 % до 2,9 %.
• Існують пакети з фіксованими умовами для малого бізнесу.

🏆 Monobank Acquiring API (низька комісія).

📌 Функціональність

LiqPay:

• Підтримка різних валют і методів оплати (банківські карти, Apple Pay, Google Pay).
• Зручний кабінет для відстеження платежів.
• Можливість генерувати інвойси.
• Підтримка регулярних платежів (recurring payments).

Monobank Acquiring API:

• Орієнтована переважно на оплату банківськими картами.
• Немає підтримки інших способів оплати, як у LiqPay або WayForPay.
• API дозволяє інтегрувати функції повернення коштів та відстеження транзакцій.

WayForPay:

• Підтримка банківських карт, Google Pay, Apple Pay, а також QR-кодів для платежів.
• Є інструменти для автоматизації, зокрема регулярні платежі та виставлення рахунків.
• Інтеграція з POS-терміналами.

🏆 LiqPay та WayForPay (ширший функціонал).

📌 Підтримка користувачів

LiqPay:

• Онлайн-підтримка через email і чат.
• Підтримка — швидка, але залежить від складності питання.

Monobank Acquiring API:

• Оперативна підтримка через Monobank, але менш доступна технічна допомога для складних інтеграцій.

WayForPay:

• Швидка реакція підтримки через email, чат та телефон.
• Є окремий сервіс для супроводу великих клієнтів.

🏆 WayForPay (швидка та багатоканальна підтримка).

📌 Додаткові можливості

LiqPay:

• Віджет для оплати в один клік.
• Підтримка криптовалют.
• Багатомовний інтерфейс.

Monobank Acquiring API:

• Можливість інтеграції з Monobank Business.
• Підходить для локального бізнесу, але не має глобального охоплення.

WayForPay:

• Автоматичний випуск фіскальних чеків.
• Інтеграція з CRM-системами.
• Аналіз фінансових операцій у кабінеті.

🏆 WayForPay (більший спектр бізнес-інструментів).

📌 Висновки

• LiqPay краще підходить для малого та середнього бізнесу, який потребує швидко інтегрувати платіжну систему, що підтримує різні методи оплати.
• Monobank Acquiring API — вибір для компаній із великим оборотом і потребою в низьких комісіях.
• WayForPay — оптимальний варіант для комплексних рішень, особливо якщо потрібна глибока інтеграція та розширені інструменти для організації.

Загалом, вибір залежить від конкретних потреб: потрібна простота — обирайте LiqPay; для мінімальних витрат — Monobank Acquiring API; для гнучкості й додаткових функцій — WayForPay.

Для БФ «Домівка врятованих тварин» зупинились на WayForPay через легкість та швидкість підключення, а також можливість моніторити надходження і у вебраузері, і з мобільного пристрою (через застосунок).

Як інтегрувати платіжну систему WayForPay на сайт

Щоб інтегрувати платіжну систему WayForPay на сайт «Домівки врятованих тварин», рухалися за таким планом:

1. Реєстрація на WayForPay

Щоб зареєструватися на платформі WayForPay, перейдіть на сайт WayForPay, створіть акаунт і вкажіть дані вашої організації.

Переконайтеся, що ваш обліковий запис активовано після перевірки.

У Merchant Dashboard знайдіть ваші дані: Merchant ID; Secret Key. Вони знадобляться для підписання запитів та авторизації.

2. Вибір способу інтеграції

WayForPay підтримує кілька варіантів інтеграції:

• Віджет-оплати (для швидкої інтеграції).
• API (для кастомних рішень).
• Плагіни (для популярних CMS, як-от WordPress, OpenCart тощо).

3. Інтеграція через віджет-оплати

Найпростіший спосіб інтегрувати WayForPay — використати готовий віджет. Для цього:

1) Додайте скрипт WayForPay на сторінку сайту:
<script src="https://secure.wayforpay.com/server/pay-widget.js"></script>

2) Додайте кнопку оплати з викликом функції:
<button onclick="pay()">Оплатити</button>

<script>
    function pay() {
        var wayforpay = new Wayforpay();
        var paymentData = {
            merchantAccount: "your_merchant_account",
            merchantDomainName: "your_domain.com",
            orderReference: "ORDER_12345",
            orderDate: Math.floor(new Date().getTime() / 1000),
            amount: 100,
            currency: "UAH",
            productName: ["Product 1"],
            productCount: [1],
            productPrice: [100],
            serviceUrl: "https://yourdomain.com/callback", // URL для callback
            returnUrl: "https://yourdomain.com/thank-you" // URL після оплати
        };
        wayforpay.invoice(paymentData);
    }
</script>

3) Замініть такі параметри:

• your_merchant_account — ваш Merchant ID із кабінету WayForPay;
• your_domain.com — ваш домен.
• yourdomain.com/callback — ваш endpoint для зворотних викликів (callback URL).
• yourdomain.com/thank-you — сторінка, на яку буде переадресовано користувача після успішної оплати.

4) Налаштуйте callback URL у Merchant Dashboard, щоб отримувати статуси транзакцій.

4. Інтеграція через API

Для більшої кастомізації можна використовувати API WayForPay.

1) Використовуйте запит до API для створення транзакції. Відправте POST-запит на URL WayForPay API: api.wayforpay.com/api

Структура запиту:

{
    "transactionType": "CREATE_INVOICE",
    "merchantAccount": "your_merchant_account",
    "merchantDomainName": "your_domain.com",
    "orderReference": "ORDER_12345",
    "orderDate": 1672531200,
    "amount": 100.00,
    "currency": "UAH",
    "productName": ["Product 1"],
    "productCount": [1],
    "productPrice": [100.00],
    "serviceUrl": "https://yourdomain.com/callback"
}

2) Підпишіть запит (merchantSignature). Для цього створіть цифровий підпис із даних запиту, використовуючи ваш Secret Key. Наприклад, у PHP:

$key = 'your_secret_key';
$data = [
    $merchantAccount,
    $merchantDomainName,
    $orderReference,
    $orderDate,
    $amount,
    $currency,
    implode(';', $productName),
    implode(';', $productCount),
    implode(';', $productPrice),
];

$signature = hash_hmac(’md5′, implode(’;’, $data), $key);

3) Отримуйте статус транзакції через callback або в реальному часі.

4. Тестування

Використовуйте тестовий режим у Merchant Dashboard, щоб перевірити роботу інтеграції. Перевірте поведінку в різних сценаріях: успішна транзакція, відмова, повернення коштів.

5. Запуск

Переконайтеся, що всі параметри (ключі, URL) оновлені для продакшн-режиму. Увімкніть live-режим у Merchant Dashboard.

Додатково

Допоміжні ресурси:

• Документація WayForPay.
• Тестові дані для інтеграції.

Якщо потрібна допомога на будь-якому етапі, звертайтеся до технічної підтримки WayForPay.

Справа, яка може рятувати життя

Також, окрім двох онлайн-консультацій та підключення платіжної системи WayForPay, Олег підключив новий домен сайту. Це стало завершальним етапом у реалізації проєкту.

Марія Коломійцева, UI/UX дизайнерка:

«Ми маємо готовий, повністю функціональний сайт, який найближчим часом стане частиною великої співпраці. Це потенційно принесе значну фінансову допомогу для тварин, які перебувають у притулку. Робота з Hello, Ukraine була чудовою! Без зайвих балачок, усе чітко, швидко й професійно — саме так, як має бути. „Код перемоги“ — це справді важлива справа, яка, без перебільшення, може рятувати життя».