<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razorpay Payment</title>
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body>

    <button id="pay-button">Pay Now</button>

    <script>
        document.getElementById("pay-button").onclick = function() {
            var options = {
                "key": "rzp_test_Af0vFkR0YNxp1K", // Your Razorpay Key
                "amount": 300 * 100, // Amount in paise (300 INR)
                "currency": "INR",
                "name": "Your Business Name",
                "description": "Payment for Order",
                "image": "https://yourlogo.com/logo.png",
                "order_id": "order_ID_from_server", // Replace with the actual order ID you created
                "handler": function (response) {
                    alert("Payment successful! Payment ID: " + response.razorpay_payment_id);
                    // You can call your backend here to capture the payment or process further
                },
                "prefill": {
                    "name": "John Doe",
                    "email": "john.doe@example.com",
                    "contact": "9876543210"
                },
                "theme": {
                    "color": "#F37254"
                }
            };

            var rzp1 = new Razorpay(options);
            rzp1.open();
        };
    </script>

</body>
</html>
