-
Notifications
You must be signed in to change notification settings - Fork 1
/
payment.html
157 lines (117 loc) · 5.16 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Open+Sans&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<title>Document</title>
<link rel="stylesheet" href="./styles/payment.css">
<style>
</style>
</head>
<body>
<!-- Top-most div -->
<!-- <div class="headline">
<div class="title">
<h1>e</h1>
<h1>b</h1>
<h1>a</h1>
<h1>y</h1>
</div>
<h2>Checkout</h2>
</div> -->
<!-- 2nd div -->
<div class="SecDiv">
<p>Pay with a credit or debit card. It's simple and secure, and you can save it for a faster checkout next time</p>
</div>
<!-- 3rd div for payment and confirmation -->
<div class="payWith">
<div class="payOptions">
<div>
<h3>Pay with</h3>
</div>
<hr>
<div class="GooglePay">
<input type="radio" id="payPalCredit" name="payment" value="payPalCredit">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvmYMJ_uYvXnK3j0O9_lluoADHRUg8-8OZ5Vk-USE6cGwUA9ofznfIm5gu87OmiRR3dbg&usqp=CAU" alt="" height="25px" width="45px">
<label for="payPalCredit">Google Pay</label>
</div>
<hr>
<div class="PayPal">
<input type="radio" id="PayPal" name="payment" value="PayPal">
<img src="https://logos-download.com/wp-content/uploads/2016/03/PayPal_Logo_2007.png" alt="" height="18px" width: "25px">
</div>
<hr>
<div class="PayPalCredit">
<input type="radio" id="gPay" name="payment" value="gPay">
<img src="https://www.kindpng.com/picc/m/388-3884385_paypal-png-logo-transparent-paypal-credit-logo-png.png" alt="" height="30px" width="70px">
</div>
<hr>
<div class="newCard">
<input type="radio" id="newCard" name="payment" value="newCard">
<label for="newCard">Add new card</label>
</div>
</div>
<div class="confirmation">
<p>Subtotal<span id="paymentSubTotal" class="pto">0</span></p>
<p>Shipping<span class="pto">Rs 80</span></p>
<hr>
<h4>Order total <span id="paymentTotal" class="pto">0</span></h4>
<button id="button">Confirm and pay</button>
</div>
</div>
<div id="card">
<h1>Add card details</h1>
<div id="details">
<label> Card No:<span>*</span></label><br>
<input type = "text" id = "cardNo" disabled><br>
<label for = ""> Card Type: <span>*</span></label><br>
<input type = "text" id = "type" disabled><br>
<label for = ""> Expiry Month: <span>*</span></label><br>
<input type = "text" id = "date" disabled><br>
<label for = ""> Expiry Year: <span>*</span></label><br>
<input type = "text" id = "year" disabled><br>
<label for = ""> CVV: <span>*</span></label><br>
<input type = "text" id = "cvv" disabled><br>
<label for = "">Cardholder Name: <span>*</span></label><br>
<input type = "text" id = "name" disabled><br>
</div>
</div>
</body>
</html>
<script>
document.getElementById("newCard").addEventListener("click", addDetails)
var pto1 = document.getElementById('paymentTotal');
var pto2 = document.getElementById('paymentSubTotal');
var total12 = JSON.parse(localStorage.getItem('ebayCartTotla'))
pto1.textContent=(Number(total12)+80);
pto2.textContent=`${total12}`
function addDetails()
{
document.getElementById("cardNo").disabled = false;
document.getElementById("type").disabled = false;
document.getElementById("date").disabled = false;
document.getElementById("year").disabled = false;
document.getElementById("cvv").disabled = false;
document.getElementById("name").disabled = false;
document.querySelector("#button").addEventListener("click", payment)
function payment()
{
var cardtype = document.getElementById("type").value
var cardDate = document.getElementById("date").value
var year = document.getElementById("year").value
var cvv = document.getElementById("cvv").value
var name = document.getElementById("name").value
var num = document.getElementById("cardNo").value
if(cardtype && cardDate && year && cvv && name && num)
{
window.location.href = "otp.html";
}
else
window.alert("All fields are mandetory")
}
}
</script>