如何使用 JavaScript 或 Java 将 Razorpay 集成到网站中？

问题描述 投票：0回答：3

我完全是支付网关的初学者，不知道如何处理它。但我经历了 Razorpay 方面和所有其他 stackoverflow 问题，从 2 天开始，我一直在努力将 Razorpay 网关集成到我的项目中。现在我正在使用 JavaScript 来访问支付网关。 我的项目是一个基于java的在线购物网站，但我使用JavaScript来提供网站中的功能。

  1. 我对Reactjs没有任何了解，我正在尝试使用基本的Js集成网关。 直接进入jsp.
<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>
</head>
<input type="button" id="razorGateway" name="submit" class="submit action-button"
                                    value="Pay" />
<script type="text/javascript"> 
            var options = {
            "key": "rzp_test_1234567UHGSssj", // Enter the Key ID generated from the Dashboard
            "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise or INR 500.
            "currency": "INR",
            "name": "Acme Corp",
            "description": "Ecommerce",
            "image": "image",
            "order_id": "order_9A33XWu170gUtm",//This is a sample Order ID. Create an Order using Orders API. (https://razorpay.com/docs/payment-gateway/orders/integration/#step-1-create-an-order). Refer the Checkout form table given below
            "handler": function (response){
                alert(response.razorpay_payment_id);
            },
            "prefill": {
                "name": "Gaurav Kumar",
                "email": "[email protected]",
                "contact": "9999999999"
            },
            "notes": {
                "address": "note value"
            },
            "theme": {
                "color": "#EA5B29"
            }
        };
        var rzp1 = new window.Razorpay(options);
        document.getElementById('razorGateway').onclick = function(e){
            rzp1.open();
            e.preventDefault();
        }
</script>

调试后我收到一条错误消息。 rzp1.open()。 Screenshot

当我无法与上述方法集成时，我采用了另一种方法。

<script>
    // Single instance on page.
      var razorpay = new Razorpay({
      key: 'rzp_test_1234567UHGSssj',
        // logo, displayed in the payment processing popup
      image: 'https://i.imgur.com/n5tjHFD.png',
      });

    //Fetching the payment.
      razorpay.once('ready', function(response) {
      console.log(response.methods);
      })

     //Submitting the data.
     var data = {
              amount: 1000, // in currency subunits. Here 1000 = 1000 paise, which equals to ₹10
              currency: "INR",// Default is INR. We support more than 90 currencies.
              email: '[email protected]',
              contact: '9123456780',
              notes: {
                address: 'Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru',
              },
             // order_id: '123',
              method: 'netbanking',
              // method specific fields
              bank: 'HDFC'
     };

    $("#razorGateway").click (function(){
        alert("payment clicked");
  // has to be placed within user initiated context, such as click, in order for popup to open.
     razorpay.createPayment(data);

          razorpay.on('payment.success', function(resp) {
              alert("payment checking.");
            alert(resp.razorpay_payment_id),
            alert(resp.razorpay_order_id),
            alert(resp.razorpay_signature)}); // will pass payment ID, order ID, and Razorpay signature to success handler.

          razorpay.on('payment.error', function(resp){alert(resp.error.description)}); // will pass error object to error handler

})
</script>

在这里，我可以点击 razorpay，弹出窗口也可见，但由于它是硬编码的，我无法获得演示中所示的各种付款方式选项。它直接给我成功和失败消息（网关的最后一页）。 https://razorpay.com/demo

这个选项我不明白。Different payment methods

如果我得到答案或者我能够以任何方式或任何其他方式集成它，我将在云9号。如果还欢迎集成 Java 的选项。

javascript java
3个回答
0
投票

嗨，我认为您需要从服务器端生成一个实际的

order_id
，正如他们的文档这里中提到的那样。而不是样品
order id
。

0
投票

以下代码有效。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PaymentGateway</title>
</head>
<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // Single instance on page.
  var razorpay = new Razorpay({
    key: 'rzp_test_tCLhPLootU4w3M',
    // logo, displayed in the payment processing popup
    image: 'https://i.imgur.com/n5tjHFD.png',
  });

  // Fetching the payment.
  razorpay.once('ready', function(response) {
    console.log(response.methods);
  });

  // Submitting the data.
  var data = {
    amount: 1000, // in currency subunits. Here 1000 = 1000 paise, which equals to ₹10
    currency: "INR", // Default is INR. We support more than 90 currencies.
    email: '[email protected]',
    contact: '9123456780',
    notes: {
      address: 'Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru',
    },
    // order_id: '123',
    method: 'netbanking',
    // method specific fields
    bank: 'HDFC'
  };

  $("#razorGateway").click(function() {
    alert("Payment clicked");
    // has to be placed within a user-initiated context, such as click, in order for popup to open.
    razorpay.createPayment(data);

    razorpay.on('payment.success', function(resp) {
      alert("Payment success.");
      alert(resp.razorpay_payment_id);
      alert(resp.razorpay_order_id);
      alert(resp.razorpay_signature);
    }); // will pass payment ID, order ID, and Razorpay signature to success handler.

    razorpay.on('payment.error', function(resp) {
      alert(resp.error.description);
    }); // will pass error object to error handler
  });
});
</script>
<body>
  <input type="button" id="razorGateway" name="submit" class="submit action-button" value="Pay" />
</body>
</html>
0
投票

我面临一个问题。我有一个 Next.js 应用程序，按照 brijesh revella 提到的方式设置，只要用户没有禁用浏览器中的弹出窗口，它就可以正常工作，在这种情况下，我的用户就会卡在我的支付页面上并处于无限加载状态。任何人都可以帮助我在 brijesh 的代码之上添加代码，并使 razorpay 窗口在与我当前网站选项卡相同的选项卡中打开，然后继续正常使用 

razorpay.on('success'/'failure')

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.