-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpayment.html
71 lines (65 loc) · 2.68 KB
/
payment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Page</title>
<link rel="stylesheet" href="/styles/styles.css">
<link rel="stylesheet" href="/styles/payment.css">
</head>
<body>
<div class="payment-container">
<h2>Select Payment Method</h2>
<div class="payment-methods">
<!-- UPI Option -->
<div class="payment-method" id="upi-option">
<h3>UPI Payment</h3>
<p>Pay using UPI (e.g., Google Pay, PhonePe, etc.)</p>
</div>
<!-- Debit/Credit Card Option -->
<div class="payment-method" id="card-option">
<h3>Debit/Credit Card</h3>
<p>Pay using a debit or credit card.</p>
</div>
<!-- Cash on Delivery (COD) Option -->
<div class="payment-method" id="cod-option">
<h3>Cash on Delivery (COD)</h3>
<p>Pay when the order is delivered.</p>
</div>
</div>
<!-- UPI Form (Hidden initially) -->
<div class="payment-form" id="upi-form">
<h3>Enter UPI ID</h3>
<div class="form-group">
<label for="upi-id">UPI ID</label>
<input type="text" id="upi-id" placeholder="example@upi">
</div>
<input type="submit" class="btn-class" value="Proceed with UPI Payment" id="upi-submit">
</div>
<!-- Debit/Credit Card Form (Hidden initially) -->
<div class="payment-form" id="card-form">
<h3>Enter Card Details</h3>
<div class="form-group">
<label for="card-number">Card Number</label>
<input type="number" id="card-number" placeholder="Card Number">
</div>
<div class="form-group">
<label for="expiry-date">Expiry Date</label>
<input type="date" id="expiry-date">
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input type="number" id="cvv" placeholder="CVV">
</div>
<input type="submit" class="btn-class" value="Proceed with Card Payment" id="card-submit">
</div>
<!-- COD Form (Hidden initially) -->
<div class="payment-form" id="cod-form">
<h3>Confirm Order</h3>
<p>You have selected Cash on Delivery as your payment method.</p>
<input type="submit" class="btn-class" value="Confirm COD Order" id="cod-submit">
</div>
</div>
</body>
<script src="/scripts/payment.js" type="module"></script>
</html>