Razorpay is not defined

Question

I am first time integrating the payment gateway. I found some code using gateway doc and code is something like

<form action="/purchase" method="POST">
         <!--Note that the amount is in paise = 50 INR -->
        <script
            src="https://checkout.razorpay.com/v1/checkout.js"
            data-key="************"
            data-amount="100"
            data-buttontext="proceed to payment"
            data-name="test"
            data-description="Purchase Description"
            data-image="logo"
            data-prefill.name="mnbvc"
            data-prefill.email="adsdasdd"
            data-theme.color="#F37254"
        ></script>
        <input type="hidden" value="Hidden Element" name="hidden">

        </form>

and It's working If I clicked on proceed to payment button.

Now What I did, I change the code and added one button called as

<input type="button" id="proceedToPayment" name="proceedToPayment" value="Proceed To Payment">

If any user clicks on the button then it will call the function which is below but it's not working. In the console, I am getting the error Razorpay is not defined.

$("#proceedToPayment").click(function(e){
    payeeamount = $("#totalDetails").val();
    var options = {
    "key": "*******",
    "amount":payeeamount, // 2000 paise = INR 20
    "name": "dasd",
    "description": "Purchase Description",
    "image": "logo",
    "handler": function (response){
      /*.razorpay_payment_id*/
      confirmpayment(response);
    },
    "prefill": {
      "name": "",
      "email": ""
    },
    "theme": {
      "color": "#F37254"
    }
  };
  var rzp1 = new Razorpay(options);
    rzp1.open();
    e.preventDefault();
});

function confirmpayment(response){
    response['action']='processSessionReq';
    $.ajax({
      type:"POST",
      url:"processpage.php",
      data: response,       
      success: function (data) {
        window.location = "TransactionSuccess.php";
      }
    });
  }

Answer 1

There's not any problem in your code. Just make sure you have added checkout js before your click event. Use "https://checkout.razorpay.com/v1/checkout.js" in the script tag before your javascript code.

For more details visit: https://docs.razorpay.com/docs/checkout-form