Рубрики
Без рубрики

РЕАКТ – Платежный шлюз Интеграция

Ссылки на проект: https://bookindesk.com/ (https://bookindesk.com/) https://app.c.bookindesk.com/ (https://app.cokebindesk.com/) https: //docs.bookindesk .com / (https://docs.bookindesk.com/) Другой …

Автор оригинала: DhananjayKumar.

В этом посте мы будем охватывать интеграцию Razorpay Paymentway Gateway с Express (Server-Side) и Action (Client-Side). Во-первых, понять Поток оплаты согласно их документию.

Paymentflow.jpg.

Шаг 1: Создайте заказ: Гость Выберите тариф на веб-сайт недвижимости на основе доступности. Наше приложение React отправляет запрос на Express API для создания заказа. Экспресс в свою очередь вызовите RazorPay для создания заказа и Razorpay_Order_ID в серверах Razorpay и возвращаются в экспресс, а затем пересылают в клиентское приложение.

Шаг 2: Соберите детали оплаты: При успешном создании заказа, форма оплаты присутствует для гостя. Гость выбирает соответствующий способ оплаты, заполнить дериторию и завершает платеж. Этот запрос напрямую отправляется в Razorpay Server с деталями, полученными из гостя вместе с Razorpay_Order_ID, полученный на шаге 1.

Шаг 3: Аутентификация и авторизация платежа: Детали оплаты, собранные от клиента, отправляются в ваш банк. Внутренне Razorpay отправляет запрос аутентификации в банк клиента. После соответствующей аутентификации Razorpay уполномочен вычесть сумму с банковского счета клиента. После того, как уполномочена сумма транзакции сохраняется с RazorPay и немедленно урегулирована на ваш счет. RazorPay возвращает Payment_id, который мы можем, наконец, сохраняться вместе с деталями бронирования.

Шаг 4: Захват платежей: После того, как оплата уполномочена банком клиента, вы должны проверить, вычтена ли уполномоченная сумма счета от клиента, такая же, как сумма, введенная заказчиком в форме оформления заказа. Уполномоченная сумма будет урегулирована на ваш счет только после этого шага проверки.

Примечание: Любая авторизация, сопровождаемый захватом в течение 5 дней, автоматически считается пустотой, а возмещение. Если мы хотим пропустить шаг 4, и у нас есть возможность автоматического захвата. Это позволяет платежам быть захваченным автоматически до окончания периода авторизации.

Давайте проверим код.

Экспресс (серверный) код:

Сначала установите узел Razorpay Node для Express App.

npm install  razorpay

Далее, в контроллере добавьте ниже 2 конечных точек –

var Razorpay = require('razorpay');

router.post('/sites/:siteAddress/createBookingOrder', async (req,res,next)=> {
    let instance = new Razorpay({
    key_id: hotel.key_id,
    key_secret: hotel.key_secret
  });

  let orderDate = {
    "amount": req.body.bookingAmount * 100,
    "currency": "INR",
    "receipt": "receipt",
    "payment_capture": 1
  };

  instance.orders.create(orderDate, function(err, order) {
    res.status(200).send(order);
  });
});

router.post('/sites/:siteAddress/confirmBooking', async (req,res,next)=> {
  var newEvent = new Event.model({
    name : req.body.name,
    checkinDate : req.body.checkinDate,
    checkoutDate : req.body.checkoutDate,           
    guest : req.body.guest,
    payments : [],
    hotel_id : req.body.hotel_id
  });
  
  let payment = {
    amount : req.body.bookingAmount,
    order_id : req.body.order_id,
    payment_id : req.body.payment_id
  };
  
  newEvent.payments = [...newEvent.payments, payment];
  await newEvent.save().catch(err => {throw err});
  res.status(200).send(newEvent);
});

Важный момент, чтобы отметить здесь – «Payment_Capture»: 1 в создании заказа. Это позволяет пропустить шаг 4, а платеж автоматически захвачен.

Реакция (клиент-сторона) код:

Включите тег скрипта для загрузки файла razorpay checkout.js в index.html.




  
    
    
    
    
    
    Hotel Front Desk

Далее в компонент бронирования добавить ниже метод –

handleBooking() {       
  CreateBookingOrder({
    "bookingAmount" : this.state.bookingAmount,
    "hotel_id" : this.state.site._id,
    "siteAddress" : this.state.site.siteAddress
  })
  .then(res => {
    this.handleBookingCheckout(res);
  })
  .catch(err => {
    // Handle error.
  });
}

Выше вы можете увидеть на статусе успеха, мы называем DiskbookingCheckout со службой ответа, который включает в себя order_id.

handleBookingCheckout = (res) => {
  var options = {
    "key_id": this.state.site.key_id,
    "amount": res.amount, 
    "currency": "INR",
    "name": this.state.site.name,
    "description": "Booking Request amount for "+this.state.site.name,
    "image": "https://example.com/your_logo",
    "order_id": res.id,
    "handler": this.handleBookingPaymentResponse,
    "prefill": {
      "name": this.state.guest.name,
      "email": this.state.guest.email,
      "contact": this.state.guest.phone,
    },
    "notes": {
      "address": "note value"
    },
    "theme": {
      "color": "#FFFF00"
    }
  };
  
  let rzp = new window.Razorpay(options);
  rzp.open();
}

Приведенный выше код представляет собой платежное всплывающее окно, где гость заполняет детали и нажмите Pay. Еще раз вы можете увидеть, как мы позволим мы позвонить, чтобы мы позволим, чтобы мы позволим, чтобы мы позвонить, чтобы мы позвонить в RankbookingPayment Response на обработку Razorpay Sucess или отзыв с ошибками –

handleBookingPaymentResponse = (res) => {
  this.setState({ loading: true });
  let selectedTariff = this.state.selectedTariff;
  let bookingData = {
    "name": "Booking",
    "checkinDate": this.state.checkin + "T12:00:00",
    "checkoutDate": this.state.checkout + "T12:00:00",
    "bookingAmount" : this.state.bookingAmount,
    "order_id" : res.razorpay_order_id,
    "payment_id" : res.razorpay_payment_id,
    "guest" : this.state.guest,
    "hotel_id" : this.state.site._id,
    "siteAddress" : this.state.site.siteAddress
  };

  ConfirmBooking(bookingData)
  .then(res => {
    // Handle successful booking.
  })
  .catch(err => {
    // Handle booking failure.
  });        
}

Читайте ещё по теме: