Razorpay не определяется

Я впервые интегрирую платежный шлюз. Я нашел какой-то код с использованием шлюза DOC и что-то вроде

<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>

и это работает, если я нажал на proceed to payment кнопка.

Теперь, что я сделал, я изменил код и добавил одну кнопку, которая называется

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

Если какой-либо пользователь нажмет на кнопку, он вызовет функцию, которая находится ниже, но она не работает. В консоли я получаю ошибку 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";
}
});
}