JSFiddle - React, Tailwind, and code Playground

HTML

<button id="rzp-button6" >Pay with Razorpay</button>

<form name='razorpayform'>
	<input  name="amounter" id="amounter">
    
    <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
    <input type="hidden" name="razorpay_signature"  id="razorpay_signature" >
</form>

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

													
<script>
	
var options = {
    "key": "rzp_test_s7jZhwh0czdxMH",
    "name": "James Bond",
    "amount": "1200",
    "description": "Recharge",
    "image": "http://www.google.com/favicon/android-icon-192x192.png",
    "handler": function (response){
    	
       $("#razorpayform").html(response.razorpay_payment_id);
	var rpid = response.razorpay_payment_id;
	window.location = '/invoice.php?billno=' + rpid;
    
    },
    "prefill": {
        "name": "James Bond",
        "email": "[email protected]",
        "contact": "2343295210"
    },
    "notes": {
        "shopping_id": "q3123kjanjk"
    },
    "theme": {
        "color": "#F37254"
    }
}


var rzp6 = new Razorpay(options);

document.getElementById('rzp-button6').onclick = function(e){
    rzp6.open();
    e.preventDefault();
}

</script>