Vaadin Payment Gateway integration (Razorpay)

Question

I want to integrate Razorpay payment gateway with my Vaadin 24 application using Spring-boot 3 as back end. I have got payment credentials from Razor pay.

key_id: myKeyId
key_secret: myKeySecret

and added com.razorpay razorpay-java 1.4.4 dependency to my POM. I have a payment view like this.

    @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);
        }
    
    }

Handler Function (javaScript) Check out code (From Razorpay website)

    <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": "gaurav.kumar@example.com",
            "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>

In my Vaadin application as shown in the question there is a PaymentView and a button in that view. When a user clicks on that button, I want to execute Handler Function (javaScript) Check out code as shown in the question. When the checkout code is executed, it will redirect to the payment page of Razorpay and will return a success or failure response.

Some body please help.

Answer 1

After more than a month's hard work I found the way. This link helped me much to solve the problem.

Step 1: Create the JavaScript File

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();

 }

Step 2: import the checkout.js javascript library. This can be done by adding the script tag below inside the head tags of your ‘frontend/index.html’ file

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

Step 3: Make the 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) {
        
         try {
               JSONObject options = new JSONObject();
               options.put("razorpay_order_id", razorpay_order_id);
               options.put("razorpay_payment_id", payment_id);
               options.put("razorpay_signature", razorpay_signature);
               boolean status = Utils.verifyPaymentSignature(options, key_secret);
        if (status) {
                    //Handle the response from razorPayCheckOut.js
        }
         } catch (Exception e) {
                    e.printStackTrace();
                }
                }
             
            }