Урок 12

После этого урока вы:

• Поймёте, как работают онлайн-платежи и какие системы подходят для статического сайта.
• Зарегистрируетесь в ЮKassa или Stripe и получите необходимые ключи.
• Создадите платёжную ссылку (Payment Link) в личном кабинете.
• Добавите на свой сайт кнопку «Оплатить».
• Настроите тестовый режим и проверите оплату без реальных денег.
• Узнаете, как обработать возврат пользователя на сайт после оплаты.

• Ваш сайт (любая страница, где вы хотите разместить кнопку оплаты).
• Аккаунт в ЮKassa (для России) или Stripe (международный).
• Доступ к DeepSeek (или другому AI) для генерации кода.
• Желание добавить на сайт приём платежей — без сервера!

На статическом сайте (GitHub Pages) у вас нет серверной части, поэтому вы не можете обрабатывать платежи напрямую. Но вы можете использовать платёжные ссылки или виджеты, которые перенаправляют пользователя на защищённую страницу платёжной системы.

Схема работы:

1. Пользователь нажимает кнопку «Оплатить» на вашем сайте.
2. Он перенаправляется на платёжную страницу ЮKassa или Stripe.
3. Там он вводит данные карты и подтверждает платёж.
4. После успешной оплаты пользователь возвращается на ваш сайт (на страницу успеха).
5. Вы получаете уведомление о платеже (по email или в личном кабинете).

В этом уроке мы используем платёжные ссылки — это самый простой способ для статического сайта.

Что такое платёжная ссылка (Payment Link)?

• Готовая страница оплаты, созданная в личном кабинете платёжной системы.
• Вы указываете сумму, описание товара и URL-адрес для возврата после оплаты.
• Система генерирует уникальную ссылку, которую вы размещаете на сайте.

Что такое тестовый режим (sandbox)?

• Среда для имитации оплаты без списания реальных денег.
• Используются тестовые карты (например, 4242 4242 4242 4242 для Stripe).
• По завершении настройки переключаетесь на боевой режим.

Вариант А: ЮKassa (для России)

1. Перейдите на yookassa.ru и нажмите Зарегистрироваться.
2. Заполните данные (для тестового режима подойдут любые).
3. Войдите в личный кабинет → Настройки → Ключи API.
4. Скопируйте shopId и Secret key (тестовые).

Вариант Б: Stripe (международный)

1. Перейдите на stripe.com и нажмите Start now.
2. Зарегистрируйтесь и войдите в дашборд. Включите тестовый режим (правый верхний угол).
3. В левом меню выберите Payment Links или Products → Add product.

Для ЮKassa:

1. Личный кабинет → Приём платежей → Ссылки на оплату.
2. Нажмите Создать ссылку.
3. Укажите сумму, валюту (RUB), описание.
4. В поле URL для возврата укажите адрес страницы успеха на вашем сайте.
5. Сохраните — вы получите ссылку вида https://pay.yookassa.ru/s/XXXXXXXXXX.

Для Stripe:

1. Дашборд → Products → Add product (если ещё не создали).
2. Введите название, цену, выберите One-time (разовая) или Recurring (подписка).
3. Нажмите Save product, затем Create payment link.
4. Скопируйте полученную ссылку.

Теперь попросите AI сгенерировать кнопку, которая ведёт на вашу платёжную ссылку. Подставьте в промпт полученную ссылку:

Попросите AI разместить кнопку на странице товара, лендинге или на отдельной странице payment.html.

Создайте страницу success.html, на которую вернётся пользователь после оплаты. Попросите AI сгенерировать её:

5.1. Проверка в тестовом режиме

1. Перейдите на сайт и нажмите кнопку «Оплатить».
2. Вы попадёте на платёжную страницу (в тестовом режиме).
3. Используйте тестовую карту:
   • Stripe: 4242 4242 4242 4242, любой срок, CVC 123.
   • ЮKassa: тестовые карты из документации (например, 5555 5555 5555 4444).
4. Завершите оплату и проверьте возврат на страницу успеха.

5.2. Проверка в боевом режиме (если готовы)

1. Переключите режим на «Боевой» (Live mode).
2. Создайте новую платёжную ссылку для реальных денег и замените её на сайте.
3. Проверьте реальный платёж (можно на небольшую сумму, например, 1 рубль).

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

• На email, указанный при регистрации.
• В личный кабинет платёжной системы.
• В Telegram — можно через webhook, но для статики сложнее; проще проверять личный кабинет.

1. Зарегистрируйтесь в ЮKassa или Stripe (бесплатно).
2. Создайте платёжную ссылку для своего товара/услуги (в тестовом режиме).
3. Добавьте кнопку с этой ссылкой на ваш сайт.
4. Создайте страницу успеха и укажите её URL в настройках ссылки.
5. Проведите тестовую оплату (без реальных денег) и убедитесь, что всё работает.
6. Закоммитьте и запушьте все изменения.

• Как работают онлайн-платежи на статическом сайте без сервера.
• Как создать платёжную ссылку в ЮKassa или Stripe.
• Как добавить кнопку оплаты на сайт.
• Как протестировать оплату в тестовом режиме (песочнице).
• Как обработать возврат пользователя после оплаты.

Главный итог: теперь вы можете принимать платежи на статическом сайте без сервера — просто используя платёжные ссылки. Это открывает путь к монетизации ваших проектов! 🚀

Дополнительные материалы: prompts-bonus.md, checklists-bonus.md