Question 166522 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Is the Razorpay checkout window not opening in WordPress?

Because of some reasons instead of using razorpay plugins available in WordPress, I am writing my own plugin where I have created a form and after submit I want to redirect it to the Razorpay checkout window. I have written following code for the same –

<html>
        <body>
        <form action="" method=POST>
                <label>Full Name:</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label>Mob Number:</label>
                <input type="text" name="mobnum" id="mobnum"><br><br>
                <label>Address:</label>
                <input type="text" name="add" id="add"><br><br>
                <input type="submit" name="submit" value="Submit" onclick="myFunction()">
        </form>
        </body>
        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
        <script>
                function myFunction() {
                        var name = document.getElementById("fname");
                        var mob = document.getElementById("mobnum");
                        var add = document.getElementById("add");
                        var options = {
                            "key": "*********",
                            "data-amount": "100", // 2000 paise = INR 20
                            "data-currency": "INR",
                            "data-id": "<?php echo 'OID'.rand(10,100).'END';?>",
                            "data-name": "Plugin Test",
                            "data-description": "Plugin Testing Training",
                            "handler": function (response){

                                    alert(JSON.stringify(response));
                            },
                            "prefill": {
                                "name": "XYZ",
                                "email": "[email protected]"
                            },
                            "theme": {
                                "color": "#F37254"
                            }
                        };
                        var rzp1 = new Razorpay(options);
                        rzp1.open();
                    }
        </script>
        </html>

But here the problem is razorpay checkout window is not opening and its throwing an error as below –

"serviceworker" must be a dictionary in your web app manifest.

Can anyone please help me out? Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This issue has been resolved with the help of jQuery. I have added jQuery script and made following changes in code -

    <html>
        <body>
        <form action="" method=POST>
                <label>Full Name:</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label>Mob Number:</label>
                <input type="text" name="mobnum" id="mobnum"><br><br>
                <label>Address:</label>
                <input type="text" name="add" id="add"><br><br>
                <input type="submit" name="submit" id="submit" value="Submit">
        </form>
        </body>
        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
        <script src ="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
                jQuery('#submit').on('click', function(e) {
                        e.preventDefault();
                        var name = document.getElementById("fname");
                        var mob = document.getElementById("mobnum");
                        var add = document.getElementById("add");
                        var options = {
                            "key": "*********",
                            "data-amount": "100", // 2000 paise = INR 20
                            "data-currency": "INR",
                            "data-id": "<?php echo 'OID'.rand(10,100).'END';?>",
                            "data-name": "Plugin Test",
                            "data-description": "Plugin Testing Training",
                            "handler": function (response){

                                    alert(JSON.stringify(response));
                            },
                            "prefill": {
                                "name": "XYZ",
                                "email": "[email protected]"
                            },
                            "theme": {
                                "color": "#F37254"
                            }
                        };
                        var rzp1 = new Razorpay(options);
                        rzp1.open();
                    });
        </script>
        </html>

  2. 0

    The problem seems to be here with the form ‘POST’.

    So maybe u can remove the POST and call myFunction() onclick.

    example – onClick = " myFunction()"

    This

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search