Как интегрировать Razorpay Payment Gateway в React: пошаговый разбор

Razorpay — один из самых популярных платежных шлюзов в Индии. Он принимает карты, UPI, интернет-банкинг и кошельки вроде Paytm и PhonePe, а мультивалютность позволяет работать с клиентами за пределами страны. Для React-разработчика это значит: можно добавить оплату в приложение, не поднимая собственный процессинг.

Но есть нюанс. Интеграция не сводится к красивой кнопке «Оплатить». Процесс состоит из двух частей: фронтенд открывает окно чекаута, а бэкенд создает заказ и проверяет подпись. Пропустить вторую часть — значит оставить дверь открытой для поддельных платежей.

Разберем по шагам.

Как устроен платежный флоу

Схема выглядит так:

1. Пользователь нажимает кнопку оплаты.
2. Фронтенд просит бэкенд создать заказ в Razorpay.
3. Бэкенд отправляет запрос и возвращает order_id, сумму и валюту.
4. Фронтенд открывает чекаут Razorpay с этими данными.
5. После удачного платежа Razorpay возвращает payment_id, order_id и подпись.
6. Фронтенд передает эти три значения на бэкенд.
7. Бэкенд проверяет подпись через HMAC-SHA256.

Только после успешной проверки заказ можно помечать оплаченным в базе. Шаг 7 — не формальность, а главный защитный механизм.

Никогда не пропускай проверку подписи на бэкенде. Иначе любой может сэмулировать успешный ответ от Razorpay.

Почему без проверки подписи никуда

Фронтенд — это среда, которую контролирует пользователь. Можно открыть DevTools, подменить ответ или отправить фейковый payment_id. Поэтому полагаться только на ответ из чекаута нельзя.

Секретный ключ Razorpay хранится только на бэкенде. Бэкенд берет order_id и payment_id, склеивает их, хеширует через HMAC-SHA256 с секретом и сравнивает с подписью из запроса. Совпало — платеж настоящий. Не совпало — возвращаем ошибку и не обновляем базу.

Такая схема работает, только если секрет не попадает во фронтенд. Ни в код, ни в переменные окружения Vite, ни в localStorage.

Что нужно для интеграции

Аккаунт и ключи

Все начинается с регистрации в дашборде Razorpay. Во время разработки держи включенным тестовый режим — он использует специальные ключи и не проводит реальные платежи.

Ключи находятся в разделе Account & Settings → API Keys. Их два:

• Key ID — публичный, его можно передавать фронтенду (обычно лежит в .env рядом с Vite).
• Key Secret — секретный, живет только на бэкенде. Например, в .env на сервере.

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

Бэкенд: создание заказа и верификация

На бэкенде нужны два эндпоинта. Первый создает заказ через API Razorpay. Второй принимает payment_id, order_id и подпись, проверяет их и возвращает статус.

Обрати внимание на мелочь: сумму в заказе нужно передавать в меньших денежных единицах. Для индийских рупий это пайсы — проще говоря, умножь сумму на 100 и округли. Забыл про это — получишь заказ на сумму, которая отличается от ожидаемой.

В эндпоинте верификации создается HMAC-SHA256 из order_id и payment_id с использованием ключа. Если подпись совпадает — отдаем success. Если нет — отдаем ошибку.

Фронтенд: открыть чекаут

Сам чекаут запускается на клиенте. Ты получаешь с бэкенда order_id и параметры заказа, вызываешь JS-библиотеку Razorpay, и она показывает пользователю окно с выбором способа оплаты.

Ничего сложного в этом нет, главное — не пытаться инициировать платеж без бэкенда. Сервер должен знать о заказе до того, как откроется окно, иначе потом нечего проверять.

Кто за что отвечает

Типичные ошибки

• Кладете Key Secret в код фронтенда или в переменные окружения с префиксом VITE_. Это верный способ подарить ключ всем.
• Не проверяете подпись. Если эндпоинт верификации не вызывается или возвращает успех без проверки — платежи можно подделывать.
• Путаете рупии и пайсы. Цена 100 рублей? С точки зрения Razorpay это 10000 пайсов. Без умножения сумма уедет.
• Используете live-ключи на этапе разработки. Тестовые платежи будут проходить как настоящие, а провайдер может списать деньги.
• Доверяете сумме из фронтенда. Создавать заказ на основе данных, которые прислал клиент, — плохая идея. Лучше пересчитать цену на бэкенде.

Чек-лист перед запуском

• Тестовый режим включен, используются test-ключи.
• Key Secret нет во фронтенд-коде и в клиентских .env.
• Сумма заказа переводится в меньшие единицы.
• Эндпоинт /api/verify-payment реально вызывается и проверяет подпись.
• База обновляется только после успешной верификации.

Razorpay закрывает практически всю рутину: прием карт, UPI, кошельков, обработку валют, отображение чекаута. Твоя задача — сделать так, чтобы бэкенд был единственным источником правды. Если соблюдать этот принцип, интеграция будет работать и через год, и без сюрпризов.