Razorpay — один из самых популярных платежных шлюзов в Индии. Он принимает карты, UPI, интернет-банкинг и кошельки вроде Paytm и PhonePe, а мультивалютность позволяет работать с клиентами за пределами страны. Для React-разработчика это значит: можно добавить оплату в приложение, не поднимая собственный процессинг.
Но есть нюанс. Интеграция не сводится к красивой кнопке «Оплатить». Процесс состоит из двух частей: фронтенд открывает окно чекаута, а бэкенд создает заказ и проверяет подпись. Пропустить вторую часть — значит оставить дверь открытой для поддельных платежей.
Разберем по шагам.
Как устроен платежный флоу
Схема выглядит так:
- Пользователь нажимает кнопку оплаты.
- Фронтенд просит бэкенд создать заказ в Razorpay.
- Бэкенд отправляет запрос и возвращает order_id, сумму и валюту.
- Фронтенд открывает чекаут Razorpay с этими данными.
- После удачного платежа Razorpay возвращает payment_id, order_id и подпись.
- Фронтенд передает эти три значения на бэкенд.
- Бэкенд проверяет подпись через 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, и она показывает пользователю окно с выбором способа оплаты.
Ничего сложного в этом нет, главное — не пытаться инициировать платеж без бэкенда. Сервер должен знать о заказе до того, как откроется окно, иначе потом нечего проверять.
Кто за что отвечает
| Этап | Где происходит | Зачем |
|---|---|---|
| Создание заказа | Бэкенд | Зафиксировать сумму, валюту и получить order_id |
| Открытие чекаута | Фронтенд | Показать пользователю способы оплаты |
| Проверка подписи | Бэкенд | Убедиться, что платеж настоящий |
| Обновление статуса | Бэкенд | Отметить заказ оплаченным только после верификации |
Типичные ошибки
- Кладете Key Secret в код фронтенда или в переменные окружения с префиксом VITE_. Это верный способ подарить ключ всем.
- Не проверяете подпись. Если эндпоинт верификации не вызывается или возвращает успех без проверки — платежи можно подделывать.
- Путаете рупии и пайсы. Цена 100 рублей? С точки зрения Razorpay это 10000 пайсов. Без умножения сумма уедет.
- Используете live-ключи на этапе разработки. Тестовые платежи будут проходить как настоящие, а провайдер может списать деньги.
- Доверяете сумме из фронтенда. Создавать заказ на основе данных, которые прислал клиент, — плохая идея. Лучше пересчитать цену на бэкенде.
Чек-лист перед запуском
- Тестовый режим включен, используются test-ключи.
- Key Secret нет во фронтенд-коде и в клиентских .env.
- Сумма заказа переводится в меньшие единицы.
- Эндпоинт /api/verify-payment реально вызывается и проверяет подпись.
- База обновляется только после успешной верификации.
Razorpay закрывает практически всю рутину: прием карт, UPI, кошельков, обработку валют, отображение чекаута. Твоя задача — сделать так, чтобы бэкенд был единственным источником правды. Если соблюдать этот принцип, интеграция будет работать и через год, и без сюрпризов.
Fluxs
Комментарии (1)
Войдите, чтобы комментировать.