<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donate to Sharan Foundation</title>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body>
<h2>Donate to Sharan Foundation Projects</h2>
<form id="donationForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="pan">PAN Card:</label><br>
<input type="text" id="pan" name="pan" required><br><br>
<button type="button" onclick="donate('Guru Nanak Modi Khana Project', 180000)">Donate to Guru Nanak Modi Khana Project</button><br><br>
<button type="button" onclick="donate('Padhe Punjab Vadhe Punjab', 128000)">Donate to Padhe Punjab Vadhe Punjab</button><br><br>
<button type="button" onclick="donate('Suchajji Project', 20000)">Donate to Suchajji Project</button>
</form>
<script>
function donate(projectName, amount) {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var pan = document.getElementById('pan').value;
if (!name || !phone || !pan) {
alert("Please fill out all the details.");
return;
}
var options = {
"key": "rzp_live_8tbV3iWG87iKCY", // Your live Razorpay key ID
"amount": amount * 100, // Amount in paise (e.g., 180000 = ₹1,800.00)
"currency": "INR",
"name": "Sharan Foundation",
"description": "Donation for " + projectName,
"handler": function (response){
alert("Payment successful. Payment ID: " + response.razorpay_payment_id);
// Here you can pass the collected data to your server
},
"prefill": {
"name": name,
"contact": phone,
"email": "" // You can add an email field if required
},
"notes": {
"PAN Card": pan,
"Project Name": projectName
},
"theme": {
"color": "#F37254" // Customize the theme color
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
}
</script>
</body>
</html>
