Это пошаговое руководство по интеграции платежного шлюза Razorpay с VueJS. Шаги включают настройку как на внешнем, так и на внутреннем интерфейсе. Я начну с нуля и максимально подробно объясню все шаги. Давайте катиться.
ШАГ 1. Сгенерируйте ID КЛЮЧА RAZORPAY и СЕКРЕТ КЛЮЧА
Чтобы сгенерировать их, войдите в систему / зарегистрируйтесь, а на экране панели инструментов вы можете увидеть параметры «Настройки» в левой строке меню (внизу). В настройках нажмите на вкладку API-ключ. Если вы здесь впервые (что, скорее всего, будет), у вас будет возможность сгенерировать свои учетные данные. Нажмите «Создать» и СОХРАНИТЕ ИХ, ПОТОМУ ЧТО ОНИ БОЛЬШЕ НЕ БУДУТ ВИДИМЫ. Другой способ - восстановить учетные данные.
Шаг 2. Настройка серверной части
Настройка серверной части (Express JS) включает установку пакетов npm, таких как — cors, crypto, dotenv, express, razorpay | (короткий/uuid/момент необязателен).
Эта установка на серверной части включает в себя несколько отдельных модулей, и я опишу их как можно подробнее. Я начну с настройки конфигурации cors и маршрута заказов.
Фрагмент конфигурации Cors -
Я определил все домены из белого списка в своем окружении, например
WHITELIST_DOMAINS=https://yourproductionsite.com,http://localhost:8080.
Таким образом, ваш запрос будет обслуживаться только с аутентифицированных доменов. После настройки CORS и настройки маршрута app.js может выглядеть так:
Чтобы настроить Razor Pay в моем бэкэнд-сервисе, я создам еще один js-модуль — razorpay.js, который будет выглядеть так:
Я кратко объясню этот файл, и если вам нужна полная информация, вы всегда можете найти дополнительную информацию на https://razorpay.com/docs/payment-gateway/server-integration/nodejs/
Итак, мы сначала инициализируем экземпляр razorypay, как описано в документации.
Я создал функцию generateOrder, которая будет генерировать заказ, из которого может быть получен платеж. (Сначала создается заказ, и платежи производятся на основе идентификатора заказа. (Если вы хотите получить платеж, сначала создайте заказ). Функция generateOrder просто вызывает функцию razorpay.orders.create(__your_options_object_) и создайте заказ. Объект параметров в основном содержит сумму, которую вы хотите получить, валюту, в которой вы хотите получать платежи, и квитанцию (случайная строка), которую razorpay отправляет вам обратно. например, я использовал shortid для генерации случайного номера квитанции, но это может быть буквально что угодно.
Теперь, в конце концов, я буду работать над своим контроллером, который фактически будет получать данные из внешнего интерфейса.
Файл orders.controller.js будет выглядеть так
Файл контроллера будет просто вызывать функцию generateOrder, которую мы создали ранее в модуле razorpay. Сумма будет чем-то, что вы рассчитали на основе некоторой бизнес-логики.
Обратите внимание, что сумма – это наименьшая номинальная сумма вашего текущего платежа. Выберите сумму 10000, если хотите получить (100 рупий), или 5000, если хотите получить (50$) и т. д.
Шаг 3 — Настройка во внешнем интерфейсе
Это будет немного сложнее, и вы должны следить за тем, чтобы теперь вы могли что-то пропустить.
Во внешнем интерфейсе я создам компонент Payment.vue, и его шаблон будет пустым, так как Я ПРЕДПОЛАГАЮ, ЧТО ПОЛЬЗОВАТЕЛИ НАЖМАЛИ КНОПКУ «ОПЛАТИТЬ СЕЙЧАС», И ЭТОТ КОМПОНЕНТ БУДЕТ ОФОРМЛЕН
В моей части сценария вся работа будет сделана.
в моем разделе данных сценария vue я определю сценарий реактивной переменной, значение которого будет https://checkout.razorpay.com/v1/checkout.js. Это значение можно найти в документации, предоставленной Razorpay.
Затем я создам метод loadRazorpay и отмечу его как асинхронный метод. Метод будет выглядеть так —
Приведенный выше код довольно прост, и он просто загружает скрипт, когда пользователь нажимает «Оплатить сейчас». Теперь в созданном хуке жизненного цикла я определю объект параметров, который ожидает razorpay.
Чтобы объяснить описанный выше процесс, мы сначала проверяем, успешно ли загружен скрипт razorpay. Если нет, мы показываем ошибку и возвращаемся. В противном случае мы создаем объект.
В 100% случаев перед созданием объекта вы будете выполнять внутренний вызов для получения данных, которые будут использоваться в объекте параметров. Для удобства использования объекта я упомянул назначение поля, и вы можете изменить свой внутренний контроллер, чтобы предоставить вам такие результаты, как, по крайней мере, сумма в валюте и идентификатор заказа. Другие параметры могут быть определены во внешнем интерфейсе или также могут быть получены из внутреннего интерфейса. Объект предварительного заполнения удобен, если у вас есть данные пользователя, и он сохранит их на дополнительный шаг. После того, как вы успешно внедрили код… Вы интегрировали платежный шлюз и готовы принимать платежи.
Некоторые моменты, чтобы убедиться, что —
- Данные на фронтенде могут быть подделаны. Убедитесь, что валюта вашей суммы и идентификатор заказа совпадают как во внешнем интерфейсе, так и в бэкэнде.
- Сумма указана в наименьшем номинале
- Сохраните свой идентификатор ключа и секрет в .env
- Обновите объект конфигурации cors с правильными конфигурациями
- Это сделает транзакцию и будет зафиксировано в транзакциях razorpay. Обработчик успеха в порядке, но все еще может давать противоречивые результаты при определении того, что платеж прошел успешно. Для этой цели мы используем веб-хуки razorpay, и объяснение этого выходит за рамки этого поста.
- Для получения других подробностей, пожалуйста, ознакомьтесь с официальной документацией и не добавляйте дополнительные ключи объекта, если вы не понимаете, что делаете. Перепроверяйте каждый раз, так как платежи вовлечены.
И это все для этой истории. Надеюсь, вы дочитали до конца. Если вам понравились фрагменты/объяснение, поднимите тост признательности :)