payment.html

<button id="rzp-button1">Proceed to Payment</button>
		<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
		<script>
		var options = {
			"key": "rzp_test_usJ1p8JkggFwy9", // Enter the Key ID generated from the Dashboard
			"name": "Payment system",
			"description": "Test Transaction",
			"image": "https://example.com/your_logo",
			"order_id" : 'order_IbfzvAGjraVeYh'  , //#This is a sample Order ID. Pass the `id` obtained in the response of Step 1
			"handler": function (response){

				console.log(
				{
				razorpay_payment_id : response.razorpay_payment_id,
				razorpay_order_id : response.razorpay_order_id,
				razorpay_signature : response.razorpay_signature
				}
			);
				
			},
			"prefill": {
				"name": "Mushfiqur Rahman",
				"email": "mushfiq781@gmail.com",
				"contact": "012345678910"
			},

			"theme": {
				"color": "#3399cc"
			}
		};
		var rzp1 = new Razorpay(options);
		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);
		});
		document.getElementById('rzp-button1').onclick = function(e){
			rzp1.open();
			e.preventDefault();
		}
		</script>