You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
10 KiB
368 lines
10 KiB
6 months ago
|
<?php
|
||
|
|
// PHP code to handle form submission and payment processing could be added here
|
||
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||
|
|
// Handle form data and payment processing (e.g., store user data, send payment info, etc.)
|
||
|
|
$name = $_POST['name'];
|
||
|
|
$email = $_POST['email'];
|
||
|
|
$donation_amount = $_POST['donation-amount'];
|
||
|
|
// Further processing as needed
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Step-by-Step Donation with Payment Integration</title>
|
||
|
|
<style>
|
||
|
|
/* General Styles */
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
/* Main Content */
|
||
|
|
main {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 90%;
|
||
|
|
max-width: 500px;
|
||
|
|
background-color: white;
|
||
|
|
border: 2px solid #4caf50;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container h1 {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group label {
|
||
|
|
display: block;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group input[type="text"],
|
||
|
|
.form-group input[type="email"],
|
||
|
|
.form-group input[type="number"],
|
||
|
|
.form-group textarea {
|
||
|
|
width: 70%;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-options button {
|
||
|
|
flex: 1;
|
||
|
|
padding: 10px;
|
||
|
|
border: none;
|
||
|
|
background-color: #4caf50;
|
||
|
|
color: white;
|
||
|
|
font-size: 16px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-options button:hover {
|
||
|
|
background-color: #45a049;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-buttons {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-buttons button {
|
||
|
|
padding: 10px 20px;
|
||
|
|
background-color: #4caf50;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-buttons button:hover {
|
||
|
|
background-color: #45a049;
|
||
|
|
}
|
||
|
|
/* Hidden for dynamic forms */
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Navigation -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Make a Difference Today!</h1>
|
||
|
|
|
||
|
|
<!-- Step 1: Personal Information -->
|
||
|
|
<div class="step active" id="step1">
|
||
|
|
<form method="POST" action="monetary.php">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="name">Your Name:</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="name"
|
||
|
|
name="name"
|
||
|
|
placeholder="Enter your full name"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Your Email:</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
id="email"
|
||
|
|
name="email"
|
||
|
|
placeholder="Enter your email address"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="navigation-buttons">
|
||
|
|
<button type="button" onclick="nextStep()">Next</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Step 2: Payment Method -->
|
||
|
|
<div class="step" id="step2">
|
||
|
|
<h2>Select Payment Method</h2>
|
||
|
|
<div class="payment-options">
|
||
|
|
<button type="button" onclick="showCreditCardForm()">
|
||
|
|
Credit Card
|
||
|
|
</button>
|
||
|
|
<button type="button" onclick="redirectToKhalti()">Khalti</button>
|
||
|
|
<button type="button" onclick="showBankTransferForm()">
|
||
|
|
Bank Transfer
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div id="dynamic-form" class="hidden">
|
||
|
|
<!-- Placeholder for dynamically loaded forms -->
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<div class="navigation-buttons">
|
||
|
|
<button type="button" onclick="prevStep()">Back</button>
|
||
|
|
<button type="button" onclick="nextStep()">Next</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Step 3: Donation Amount -->
|
||
|
|
<div class="step" id="step3">
|
||
|
|
<h2>Enter Donation Amount</h2>
|
||
|
|
<div class="form-group">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id="donation-amount"
|
||
|
|
name="donation-amount"
|
||
|
|
placeholder="Enter amount (USD)"
|
||
|
|
min="1"
|
||
|
|
step="0.01"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="navigation-buttons">
|
||
|
|
<button type="button" onclick="prevStep()">Back</button>
|
||
|
|
<button type="submit">Donate Now</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// JavaScript code for step navigation and dynamic forms
|
||
|
|
let currentStep = 1;
|
||
|
|
|
||
|
|
function showStep(step) {
|
||
|
|
document.querySelectorAll(".step").forEach((stepDiv, index) => {
|
||
|
|
stepDiv.classList.toggle("active", index + 1 === step);
|
||
|
|
});
|
||
|
|
currentStep = step;
|
||
|
|
}
|
||
|
|
|
||
|
|
function nextStep() {
|
||
|
|
showStep(currentStep + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function prevStep() {
|
||
|
|
showStep(currentStep - 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showCreditCardForm() {
|
||
|
|
const dynamicForm = document.getElementById("dynamic-form");
|
||
|
|
dynamicForm.innerHTML = `
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="card-number">Card Number:</label>
|
||
|
|
<input type="text" id="card-number" name="card-number" placeholder="Enter your card number" required />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="expiry-date">Expiry Date:</label>
|
||
|
|
<input type="text" id="expiry-date" name="expiry-date" placeholder="MM/YY" required />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="cvv">CVV:</label>
|
||
|
|
<input type="text" id="cvv" name="cvv" placeholder="Enter CVV" required />
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
dynamicForm.classList.remove("hidden");
|
||
|
|
}
|
||
|
|
|
||
|
|
function redirectToKhalti() {
|
||
|
|
window.location.href = "https://test-admin.khalti.com/#/";
|
||
|
|
}
|
||
|
|
|
||
|
|
function showBankTransferForm() {
|
||
|
|
const dynamicForm = document.getElementById("dynamic-form");
|
||
|
|
dynamicForm.innerHTML = `
|
||
|
|
<h3>Bank Transfer Instructions</h3>
|
||
|
|
<p>Please provide the details of your bank transfer:</p>
|
||
|
|
|
||
|
|
<!-- Bank Selection -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="bank-name">Select Your Bank:</label>
|
||
|
|
<select id="bank-name" name="bank-name" required>
|
||
|
|
<option value="">-- Select Bank --</option>
|
||
|
|
<option value="Nabil Bank">Nabil Bank</option>
|
||
|
|
<option value="Standard Chartered Bank">Standard Chartered Bank</option>
|
||
|
|
<option value="Himalayan Bank">Himalayan Bank</option>
|
||
|
|
<option value="Nepal SBI Bank">Nepal SBI Bank</option>
|
||
|
|
<option value="Everest Bank">Everest Bank</option>
|
||
|
|
<option value="Global IME Bank">Global IME Bank</option>
|
||
|
|
<option value="NIC Asia Bank">NIC Asia Bank</option>
|
||
|
|
<option value="Prabhu Bank">Prabhu Bank</option>
|
||
|
|
<option value="Machhapuchhre Bank">Machhapuchhre Bank</option>
|
||
|
|
<option value="Sanima Bank">Sanima Bank</option>
|
||
|
|
<!-- Add more banks if necessary -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Account Holder's Name -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="account-holder-name">Account Holder Name:</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="account-holder-name"
|
||
|
|
name="account-holder-name"
|
||
|
|
placeholder="Enter account holder's name"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Account Number -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="account-number">Account Number:</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="account-number"
|
||
|
|
name="account-number"
|
||
|
|
placeholder="Enter account number"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Bank Branch -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="bank-branch">Bank Branch Location:</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="bank-branch"
|
||
|
|
name="bank-branch"
|
||
|
|
placeholder="Enter branch location (e.g., Kathmandu)"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Amount Transferred -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="transfer-amount">Amount Transferred (NPR):</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id="transfer-amount"
|
||
|
|
name="transfer-amount"
|
||
|
|
placeholder="Enter the amount you transferred"
|
||
|
|
min="1"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Date of Transfer -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="transfer-date">Date of Transfer:</label>
|
||
|
|
<input
|
||
|
|
type="date"
|
||
|
|
id="transfer-date"
|
||
|
|
name="transfer-date"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Transaction Reference Number -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="transfer-reference">Transaction Reference Number:</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="transfer-reference"
|
||
|
|
name="transfer-reference"
|
||
|
|
placeholder="Enter transaction reference number"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Upload Proof of Payment -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="proof-of-payment">Upload Proof of Payment:</label>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
id="proof-of-payment"
|
||
|
|
name="proof-of-payment"
|
||
|
|
accept=".jpg,.jpeg,.png,.pdf"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Submit Button -->
|
||
|
|
<button type="submit" class="submit">Submit Details</button>
|
||
|
|
`;
|
||
|
|
dynamicForm.classList.remove("hidden");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|