Як підключити WayForPay до сайту через Claude Code: інтеграція оплати без програміста

Підключити українську платіжну систему до власного сервісу здається задачею для бекенд-розробника, але з AI-асистентом це займає один вечір і кілька тестових платежів. Сучасні digital інструменти — Claude Code, GitHub, Vercel і Supabase — дозволяють маркетологу самостійно зібрати продукт із реальною оплатою, особистими акаунтами та базою даних. У цій статті ми розберемо, як інтегрувати WayForPay у нестандартний проєкт із динамічною ціною, де виникають помилки з вебхуком і як їх виправити без жодного рядка коду, написаного вручну.

Які digital інструменти потрібні, щоб підключити WayForPay до власного продукту

Для робочої інтеграції WayForPay знадобиться п’ять сервісів: Claude Code генерує код, GitHub зберігає репозиторій, Vercel публікує сайт онлайн, Supabase відповідає за базу даних і серверні функції, а сам WayForPay приймає платежі й зараховує кошти на рахунок ФОП чи юрособи. Кожен із цих інструментів має безкоштовний або стартовий тариф, тому для тестування гіпотези бюджет майже не потрібен. Головна перевага такої зв’язки в тому, що більшу частину роботи виконує AI, а ваша задача — правильно передати ключі й перевірити результат. Якщо зі Stripe готових рішень і інструкцій безліч, то щодо українських платіжних систем інформації значно менше, тому ми й вирішили перевірити цю зв’язку наочно.

Демо-проєкт: карта України, де області купують під свій бренд

Для тесту ми зібрали не банальний інтернет-магазин, а інтерактивну карту України, на якій будь-хто може «викупити» область чи місто, розмістити там логотип, опис компанії й посилання на сайт, а наступний покупець може перекупити цю територію дорожче. Ідею підглянули на Reddit: там розробник показував схожу карту всього світу, і хоча до таких кейсів варто ставитися з обережністю, механіка виглядала цікаво саме для перевірки оплат. Це напівфанова історія, але водночас і своєрідний SEO-пуш для сайту, адже на кожній зайнятій території стоять посилання на бізнес власника. Складність у тому, що ціна тут не статична, як у звичайного товару, а змінюється після кожної покупки.

Механіка побудована за принципом «монополії на максималках», і саме вона робить інтеграцію оплати нетривіальною. Перша покупка області коштує п’ять доларів, а наступне «поглинання» вже обійдеться дорожче — наприклад, у шість доларів. Попередній власник при цьому гроші не отримує назад, про що сервіс чесно попереджає перед оплатою. Для платіжної системи це нестандартна задача, бо суму не можна один раз прописати в кабінеті WayForPay. Це означає, що посилання на оплату має формуватися в моменті, з урахуванням історії транзакцій конкретної території:

• система перевіряє, чи купували цю область раніше;
• якщо купували — підвищує чек на крок для наступного покупця;
• формує унікальне посилання WayForPay саме з цією сумою;
• після оплати прив’язує територію, логотип і опис до акаунта покупця.

Як розгорнути проєкт: GitHub, Vercel і Supabase

Розгортання відбувається в три кроки: код із Claude Code завантажується в новий репозиторій GitHub, Vercel автоматично знаходить цей репозиторій і публікує сайт, а Supabase підключається як бекенд через змінні середовища у Vercel. Щойно в GitHub з’являється новий репозиторій, Vercel показує повідомлення, що знайдено новий проєкт, і пропонує його імпортувати. Після імпорту та деплою сайт уже доступний онлайн, тобто половину шляху пройдено за кілька хвилин. Далі будь-яка правка в Claude Code одразу йде в GitHub, звідти її підхоплює Vercel і публікує нову версію — для перевірки ми попросили додати дві демо-статті в блог, і вони з’явилися на сайті без жодних ручних дій.

Бекенд потрібен тому, що користувач має створити власний акаунт, а покупки мають зберігатися за ним, а не лише в інтерфейсі браузера. Для цього в Supabase створюєте новий проєкт на безкоштовному тарифі й підключаєте його до продукту — ми радимо робити це саме через Vercel, у розділі змінних середовища. Там же, до речі, додаються й інші ключі, про які часто питають у коментарях: токен Telegram-бота, ключ OpenAI API та будь-які інші секрети. Ключі, збережені у Vercel, працюють коректно і не «світяться» у відкритому коді, а що саме й куди копіювати, підкаже сам Claude — більшу частину роботи він бере на себе.

Як налаштувати ключі WayForPay у Supabase

Для роботи WayForPay у Supabase потрібно додати чотири секрети в розділі Edge Functions: Merchant account (назву мерчанта), Merchant secret key (секретний ключ), домен сайту без протоколу та повну адресу сайту з https. Усі значення, окрім адрес, копіюються з особистого кабінету WayForPay, де вже прив’язані ваші платіжні реквізити. Спочатку ми очікували, що Claude попросить класти ключі і у Vercel, і в Supabase, а потім викликати оплату через вебхук, але інструкція виявилася простішою. Порядок дій такий: відкриваєте проєкт у Supabase, переходите в Edge Functions, створюєте секрет, вказуєте назву й значення та натискаєте Save — і так для кожного з чотирьох пунктів.

• Merchant account — назва мерчанта з кабінету WayForPay, вона не є секретною
• Merchant secret key — секретний ключ мерчанта, зберігається тільки в секретах
• WayForPay domain — лише домен сайту, без https і слешів
• Site URL — повна адреса сайту разом з https

Окрему увагу приділіть секретному ключу мерчанта, бо за функцією він схожий на токен від Telegram-бота чи ключ доступу до кабінету. Той, хто його має, може формувати запити від імені вашого магазину, тому його не можна показувати на скриншотах, у відео чи в листуванні. Назва мерчанта, навпаки, видна всім користувачам, тож копіювати її можна без хвилювань. Кошти від клієнтів надходять на рахунок ФОП або юрособи, а не на особисту картку, — інакше в податкової виникне багато запитань.

Курс

Маркетингові Воронки

Боти, квізи, інсташопи, e-commerce — повний цикл побудови воронок продажів під різні ніші.

Дивитись програму →

Динамічне посилання на оплату і вебхук: де виникла проблема

Перша тестова оплата пройшла успішно: сервіс згенерував унікальне посилання WayForPay на п’ять доларів, платіж через Apple Pay зарахувався, а покупка зафіксувалася в базі, проте після оплати не спрацював нормальний редирект назад на сайт. Причина виявилася в налаштуванні вебхука, а точніше — в тому, як його спершу запропонував зробити Claude. Він радив вставити адресу сервісу (service URL) у налаштуваннях WayForPay, куди платіжна система надсилає підтвердження оплати. Такий підхід працює, коли товар статичний: фіксована ціна консультації, товару чи підписки, для якої вебхук налаштовується один раз.

У нашому проєкті посилання на оплату щоразу унікальне, тому адреса вебхука має автоматично передаватися всередині кожного згенерованого посилання, а не жити окремо в кабінеті. Ми описали цю здогадку Claude, він вніс правки, і вони майже одразу опинилися на продакшені. Важливо, що навіть у першій спробі оплата насправді працювала: після оновлення сторінки покупка нікуди не зникала, а в стрічці активності з’являвся запис про те, що область зайнято. Тобто проблема була не в прийомі коштів, а в тому, що відбувається з користувачем одразу після транзакції.

Сторінка успішної оплати і що налаштувати після транзакції

Щоб завершити сценарій покупки, потрібна окрема сторінка успішної оплати з повідомленням «Дякуємо за оплату» та автоматичним поверненням на головну через кілька секунд — без неї користувач після платежу опиняється на порожній чи сторонній сторінці й не розуміє, чи пройшла транзакція. Запит до Claude був максимально простим: «Зроби сторінку успішної оплати після транзакції, а потім автоматичний редирект через декілька секунд на головну сторінку». Після цієї правки третя тестова покупка — цього разу Черкаська область — завершилася повідомленням «Дякуємо за оплату» і коректним поверненням на карту. Оплата фіксується, запам’ятовується за конкретним акаунтом, а ціна для наступного покупця вже підвищена.

Сторінка подяки корисна не лише для зручності користувача, а й для аналітики, адже саме її перегляд найпростіше використати як сигнал про покупку. Коли продукт почне отримувати трафік із реклами, варто окремо налаштувати події в Google Tag Manager — перегляд сторінки подяки і передачу конверсії в GA4. Так ви бачитимете не просто відвідування, а реальні оплати з кожного каналу. Для SaaS-продуктів і магазинів це база, без якої неможливо порахувати окупність реклами.

Далі поверх оплати можна будувати автоматизацію: вебхуки з передачею даних на активацію доступу, повідомлення в Telegram чи розсилки. Наприклад, після покупки клієнт одразу отримує лист із підтвердженням і інструкцією, а через кілька днів — нагадування про нові можливості продукту. Такий сценарій зручно вибудовувати як email-маркетинг — серію листів, яка утримує користувача і повертає його до сервісу. Усе це Claude Code так само реалізує за текстовим запитом, якщо чітко описати, які дані і куди потрібно передати.

Що варто врахувати перед запуском такого продукту

Перед публічним запуском продукту з оплатою варто перевірити три речі: модерацію контенту, який завантажують покупці, коректну роботу всіх сценаріїв оплати на реальних платежах і стабільність додаткових функцій на кшталт особистого блогу власника території. У нашому демо модерації поки немає, тобто будь-хто може розмістити на карті будь-який логотип і опис — для реального сервісу це ризик, який треба закрити заздалегідь. Друге важливе спостереження: тестуйте на реальних невеликих сумах, бо саме так ми побачили проблему з редиректом, якої не видно у фронтенд-макеті. Кожна тестова оплата повертається вам як мерчанту, тож такі перевірки коштують лише часу, хоча банк може й поцікавитися серією дрібних списань. Наостанок переконайтеся, що всі digital інструменти у зв’язці — GitHub, Vercel, Supabase і WayForPay — працюють на одному продакшн-домені.

Окремо ми закладали ідею, що власник області може автоматично вести на своїй території блог і публікувати статті. Кнопка написання статті запрацювала, а от керування брендом потребує доопрацювання — це нормальна ситуація для MVP, зібраного за кілька ітерацій. Розумно запускати продукт поетапно: спершу перевірити ключову гіпотезу, у нашому випадку оплату, а потім нарощувати функції. Так ви не витрачаєте тижні на сервіс, у якого може не спрацювати найважливіша частина — прийом грошей.

Чому AI-розробка — це новий навик маркетолога

Аі маркетинг сьогодні — це не лише генерація текстів і креативів, а й можливість самостійно зібрати робочий продукт із реєстрацією, базою даних і оплатою, не чекаючи на команду розробників, тому AI-розробка поступово стає таким самим робочим навиком, як налаштування реклами. Для ai маркетолога такий навик означає швидку перевірку гіпотез: лендинг із передоплатою, міні-SaaS, платний доступ до матеріалів чи внутрішні транзакції в продукті. Наш тест показав, що WayForPay працює навіть у складному сценарії з динамічною ціною: система створює унікальне посилання, приймає оплату й фіксує успішну транзакцію за акаунтом. Більшу частину технічної роботи виконує Claude, а людина відповідає за логіку, ключі та перевірку результату. Саме тому ai маркетолог сприймає digital інструменти на кшталт Claude Code, Vercel і Supabase не як «територію програмістів», а як частину власного робочого стеку.

Для бізнесу це відкриває новий рівень інтернет маркетингу, де оплата стає частиною продуманого шляху клієнта, а не окремою технічною задачею. Коли ви розумієте, як влаштована воронка продажів, ви можете самі побудувати її останній крок — сторінку оплати, подяку й автоматичні повідомлення після покупки. А реклама свого бізнесу в інтернеті стає ефективнішою, коли кожна оплата відстежується і пов’язується з джерелом трафіку. Саме тому маркетологу варто розбиратися не лише в налаштуванні кампаній, а й у тому, що відбувається з клієнтом після кліку. Аі маркетинг тут дає головну перевагу — швидкість: гіпотезу з оплатою можна перевірити за вечір, а не за місяць розробки.

Якщо хочете вибудовувати повний шлях клієнта — від реклами до оплати, бота й автоматичних листів — зверніть увагу на курс «Маркетингові Воронки» від ADSchool. На ньому ми розбираємо e-commerce, інсташопи, ботів і квізи на реальних прикладах. Ви навчитеся проєктувати воронку під конкретну нішу і з’єднувати її елементи між собою. А технічну частину, як показує цей тест, дедалі частіше можна доручити AI.

Часті запитання

🎁

Бонус для тих, хто читає до кінця

130 AI-сервісів + 2 відео по запуску реклами

Добірка перевірених AI-інструментів для маркетологів + відео: запуск реклами в Meta Ads і LinkedIn з нуля.

Отримати →