Это пошаговое руководство по интеграции платежного шлюза 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, и объяснение этого выходит за рамки этого поста.
  • Для получения других подробностей, пожалуйста, ознакомьтесь с официальной документацией и не добавляйте дополнительные ключи объекта, если вы не понимаете, что делаете. Перепроверяйте каждый раз, так как платежи вовлечены.

И это все для этой истории. Надеюсь, вы дочитали до конца. Если вам понравились фрагменты/объяснение, поднимите тост признательности :)