Как принять первую оплату — пошагово, не становясь банком и не трогая карты

Главный страх новичка перед первой оплатой: «мне же придётся хранить номера карт, а это страшно и незаконно». Выдыхай. Тебе нельзя и не нужно трогать данные карт. Этим занимается платёжный сервис — у него лицензии, защита и вся скучная ответственность. Ты лишь подключаешь его и ловишь результат. Разберём по шагам, до рабочей кнопки.

Что получится

К концу: кнопка «Оплатить», которая уводит пользователя на защищённую страницу сервиса, берёт деньги и возвращает обратно. Карту вводят там, у тебя она не появляется ни на секунду. Поехали.

1. Выбери платёжный сервис

Не пиши приём денег сам — возьми готовый. Популярные у вайб-кодеров:

• Stripe — мировой стандарт, отличная документация (нужен счёт вне РФ).
• ЮKassa / Robokassa — если принимаешь оплату в России.
• Lemon Squeezy / Paddle — берут на себя ещё и налоги при продаже за рубеж.

Логика у всех одинаковая, дальше покажу на примере Stripe.

2. Заведи аккаунт и включи тестовый режим

Зарегистрируйся, сразу переключись в Test mode (тумблер в панели). В тесте всё работает как в бою, но деньги не списываются — идеально, чтобы не бояться ошибиться.

В разделе для разработчиков возьми два ключа: публичный (pk_test_...) и секретный (sk_test_...).

3. Спрячь ключи в переменные окружения

Секретный ключ — это доступ к твоим деньгам. Никогда не вписывай его прямо в код и не коммить в git. Положи оба ключа в переменные окружения — отдельный файл .env, который не попадает в репозиторий. Подробнее — в гайде как безопасно хранить ключи.

4. Сделай кнопку, которая открывает Checkout

Не верстай форму карты сам. Попроси у сервиса готовую страницу оплаты — у Stripe это Checkout. Твоя кнопка дёргает твой же сервер, сервер с секретным ключом создаёт «сессию оплаты» и отдаёт ссылку, а ты перенаправляешь туда пользователя.

Промпт для ИИ-помощника, чтобы не писать с нуля:

5. Поймай результат через вебхук, а не через фронтенд

Самая частая дыра новичков: «пользователя вернуло на success-страницу — значит, оплатил». Это легко подделать, поменяв адрес в браузере. Правда об оплате приходит только от сервиса — через вебхук: Stripe сам стучится на твой сервер с событием «оплата прошла». Выдавай доступ или товар именно по нему, а не по тому, что увидел браузер.

6. Проверь тестовой картой

В тестовом режиме введи карту 4242 4242 4242 4242, любой будущий срок и любой CVC. Оплата пройдёт, вебхук прилетит. Убедись, что доступ выдался. Только после этого переключай аккаунт в боевой режим и меняй ключи на live.

Когда дойдёшь до боя — не забудь про цену: её стоит продумать до запуска, а не выставлять наугад.

Это законно — принимать деньги вот так?

Да. Платёжный сервис — лицензированный посредник, он и берёт на себя соответствие правилам (включая PCI DSS для карт). Ты не хранишь карты, поэтому и большая часть требований не на тебе. Проверь только условия сервиса для своей страны.

Нужен ли мне для этого свой сервер?

Да, минимальный. Создавать сессию оплаты надо там, где живёт секретный ключ, — на бэкенде. Если приложение чисто фронтовое, подойдёт лёгкая serverless-функция: одна короткая функция в облаке вместо целого сервера.