Подключение ЮKassa на Django и React: фронт или бэкенд?

При подключении платёжной системы ЮKassa к сайту на Django (бэкенд) и React + Next.js (фронт) возникает ключевой вопрос: где выполнять запросы к API - на стороне клиента или сервера? Правильный выбор напрямую влияет на безопасность данных и защиту секретного ключа магазина.

Почему нельзя работать с API ЮKassa с фронта?

Прямой запрос с фронта к https://api.yookassa.ru/v3/payments/ требует передачи секретного ключа (Secret Key) в заголовке авторизации. Этот ключ даёт полный доступ к управлению платежами: создание, подтверждение, возврат. Если ключ попадёт в открытый доступ (например, через инструменты разработчика браузера), злоумышленники смогут проводить операции от вашего имени. Критично: секретный ключ никогда не должен быть доступен на клиентской стороне.

Правильная архитектура: бэкенд как прокси

Оптимальное решение - создать эндпоинты на Django, которые принимают с фронта только необходимые данные (сумма, описание заказа, данные клиента) и уже внутри сервера обращаются к API ЮKassa. Бэкенд выступает безопасным посредником, скрывая секретный ключ и логику обработки платежей.

Пошаговая схема работы

• Фронт (React/Next.js): отправляет POST-запрос на свой бэкенд-эндпоинт с данными о платеже (например, {'amount': 1000, 'description': 'Заказ №123', 'customer': {'email': 'user@mail.com'}}).
• Бэкенд (Django): получает запрос, проверяет подлинность (например, через JWT или сессию), формирует запрос к API ЮKassa с использованием секретного ключа (хранится в переменных окружения) и возвращает фронту ответ (например, ссылку на оплату или ID платежа).
• Фронт: перенаправляет пользователя на страницу оплаты ЮKassa или отображает статус.

Преимущества серверного подхода

• Безопасность: секретный ключ никогда не покидает сервер.
• Контроль: можно добавить валидацию, логирование, повторные попытки.
• Гибкость: легко интегрировать вебхуки для уведомлений о статусе платежа.

Что делать, если уже засветили секретный ключ?

Немедленно смените секретный ключ в личном кабинете ЮKassa. Проверьте логи на предмет несанкционированных операций. В будущем используйте только серверные вызовы API.

Заключение

Для безопасного подключения ЮKassa к сайту на Django и React вся работа с API должна выполняться на бэкенде. Фронт отправляет только общие данные о платеже, а бэкенд обрабатывает запросы, скрывая секретный ключ. Это стандартная практика для всех платёжных систем.