Vaadin 支付网关集成 (Razorpay)

Question

我想使用

Razorpay

作为后端将

Vaadin 24

支付网关与我的

Spring-boot 3

应用程序集成。我已从 Razor pay 获得付款凭据。

key_id: myKeyId
key_secret: myKeySecret

并将

com.razorpay razorpay-java 1.4.4

依赖项添加到我的

POM

。我有这样的付款视图。

    @PageTitle("Payment")
    @PermitAll
    @Route(value = "payment", layout = MainLayout.class)
    public class PaymentView extends VerticalLayout {
        RazorpayClient razorpayClient;
        public PaymentView() {
            PaymentUI paymentUI = new PaymentUI();
            add(paymentUI);
    
            try {
                razorpayClient = new RazorpayClient("myKeyId", "myKeySecret");
            } catch (RazorpayException ex) {
                throw new RuntimeException(ex);
            }
    
            paymentUI.btnPay.addClickListener(e -> {
    
                try {
                    final Order razorPayOrder = createRazorPayOrder();
                    //what is next to show Razorpay checkout?
    
                } catch (RazorpayException ex) {
                    throw new RuntimeException(ex);
                }
            });
        }
    
        private Order createRazorPayOrder() throws RazorpayException {
    
            JSONObject options = new JSONObject();
            options.put("amount", 100);
            options.put("currency", "INR");
            options.put("receipt", "txn_123456");
            return razorpayClient.orders.create(options);
        }
    
    }

处理函数（javaScript）查看代码（来自 Razorpay 网站）

    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
    var options = {
        "key": "YOUR_KEY_ID", // 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
        "currency": "INR",
        "name": "Acme Corp",
        "description": "Test Transaction",
        "image": "https://example.com/your_logo",
        "handler": function (response){
            alert(response.razorpay_payment_id);
            alert(response.razorpay_order_id);
            alert(response.razorpay_signature)
        },
        "prefill": {
            "name": "Gaurav Kumar",
            "email": "[email protected]",
            "contact": "9000090000"
        },
        "notes": {
            "address": "Razorpay Corporate Office"
        },
        "theme": {
            "color": "#3399cc"
        }
    };
    var rzp1 = new Razorpay(options);
    rzp1.open();
    rzp1.on('payment.failed', function (response){
            alert(response.error.code);
            alert(response.error.description);
            alert(response.error.source);
            alert(response.error.step);
            alert(response.error.reason);
            alert(response.error.metadata.order_id);
            alert(response.error.metadata.payment_id);
    });
    </script>

在我的 Vaadin 应用程序中，如问题所示，有一个 PaymentView 和该视图中的一个按钮。当用户单击该按钮时，我想执行处理函数（javaScript）检查问题中所示的代码。执行结帐代码时，它将重定向到 Razorpay 的支付页面，并返回成功或失败响应。

请一些人帮忙。

Answer 1

经过一个多月的努力，我找到了方法。这个链接帮助我解决了这个问题。

第 1 步：创建 JavaScript 文件

a.In Vaadin project, navigate to the frontend directory.
b.Create a new file named razorPayCheckOut.js in the frontend directory.
c.Open the created file and add the following JavaScript code:



 window.showCheckOut = function showCheckOut(order_id, CustomerName, Mobile, emailId, element) {
    var options = {
          "name": "check_out_headder",
          "description": "Test Transaction",
          "image": "./icons/icon.png", //src/main/resources/META-INF/resources/icons/icon.png
          "order_id": order_id,
            "prefill": {
                "name": CustomerName,
                "email": emailId,
                "contact": Mobile
            },
            "notes": {
                "address": "Office Address"
            },
            "theme": {
                "color": "#3399cc"
            },
            "handler": function (response){
                            element.$server.getResponse(response.razorpay_payment_id,
                            response.razorpay_order_id, response.razorpay_signature);
                           // alert(response.razorpay_payment_id);
                        },
            "modal": {
                 "ondismiss": function(){
                            window.location.replace("/");
                        }
                 },

        };
        var rzp1 = new Razorpay(options);
        rzp1.open();

 }

第2步：导入checkout.js javascript库。这可以通过在“frontend/index.html”文件的 head 标签内添加下面的脚本标签来完成

    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    

第3步：制作checkOutView

@PageTitle("Check Out")
@PermitAll
@Route(value = "checkOut", layout = MainLayout.class)
@JavaScript("./razorPayCheckOut.js") //import java script file from front end
public class CheckOutView extends VerticalLayout {

private RazorPayClient razorpayClient;
CheckOutView() {

  Button payButton = new Button("Pay");
  payButton.addClickListener(e -> showCheckOut());
  add(payButton)
  
  }

 private void showCheckOut() {
 
 try {

        String CustomerName = "CustomerName";
        String Mobile = "Mobile";
        String emailId = "emailId";

        JSONObject orderRequest = new JSONObject();
        orderRequest.put("amount", amt * 100); // amount in the smallest currency unit
        orderRequest.put("currency", "INR");
        orderRequest.put("receipt", "order_rcptid_11");

        razorpayClient = new RazorpayClient(key, key_secret); //key and key_secret from Razorpay
        Order order = razorpayClient.orders.create(orderRequest);
                    String order_id = order.get("id");

                    UI.getCurrent().getPage().executeJs("window.showCheckOut($0, $1, $2, $3, $4)",
                            order_id, CustomerName, Mobile, emailId, element);

                } catch (RazorpayException e) {
                    e.printStackTrace();
                }
               }
   
    @ClientCallable
    public void getResponse(String razorpay_payment_id, String razorpay_order_id, String razorpay_signature) {
        //Handle the response from razorPayCheckOut.js
    }
 
}