-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathcheckout.html
310 lines (277 loc) · 10.1 KB
/
checkout.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="icon"
type="image/png"
href="https://i1.lmsin.net/website_images/in/favicons/max/favicon-32x32.png"
sizes="32x32"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout</title>
</head>
<link rel="stylesheet" href="./styles/checkout.css" />
<link rel="stylesheet" href="./styles/checkout.meadiaQuery.css" />
<body>
<!-- header start -->
<div id="headerLogo">
<div>
<img src="./resources/max.png" alt="Logo" />
</div>
<div>
<p>Call 1800-123-1444</p>
<p>Monday-Saturday, 09:00AM - 07:00PM</p>
</div>
</div>
<div class="shippinTextOnly">
<h2>Select a shipping method</h2>
</div>
<!-- header end -->
<!-- container start -->
<div id="checkout_container">
<!-- left side div start -->
<div id="leftside_div">
<div id="shippingdetails_box">
<div>
<h4>Home Delivery</h4>
<p>Get your product delivered to your home</p>
</div>
<div>
<h4>Click & Collect</h4>
<p>Collect your from a store of your choice</p>
</div>
</div>
<!-- billing address -->
<div id="Billing_add">
<select name="address" id="home_select">
<option value="add">Home</option>
</select>
<div id="show_add" onclick="showAddress()">
<p>+ Add new billing address</p>
</div>
</div>
<div id="add_box">
<!-- <p>Select your shipping address</p> -->
<p>Add your shipping address</p>
<form>
<label for="">Name</label> <br />
<input type="text" /><br />
<label for="mob">Mobile Number</label><br />
<input type="number" maxlength="10" /><br />
<label for="">Pincode</label><br />
<input type="number" /><br />
<label for="">City</label><br />
<input type="text" /><br />
<label for="">State</label><br />
<input type="text" /><br />
<label for="">Building name or number</label><br />
<input type="text" /><br />
<label for="">Street name or number</label><br />
<input type="text" /><br />
<label for=""
>Landmark <span style="color: grey">(Optional)</span></label
><br />
<input type="text" /><br />
<label for=""
>Address Type <span style="color: grey">(Optional)</span></label
><br />
<div class="home_office">
<input type="checkbox" /><label>Home</label>
<input type="checkbox" /><label for="">Office</label>
</div>
</form>
</div>
<!-- payment option starts -->
<div id="paymentMethod_box">
<!-- <div> -->
<h1>Select a payment method</h1>
<!-- </div> -->
<div class="paymentOpt">
<input type="radio" name="check" onclick="showCardForm()" />
<img src="./resources/cards cc dc.png" alt="cards" />
<div>
<p>Credit/Debit Card</p>
<p>Use your Credit or Debit card</p>
</div>
</div>
<div id="cards_hide_show">
<input type="radio" id="creditcard" name="check" />
<label for="creditcard">Credit Card</label>
<input type="radio" id="debitcard" name="check" />
<label for="debitcard">Debit Card</label>
<div id="cardInput_box">
<label for="Number">Card Number</label> <br />
<input
type="text"
id="cardNum"
placeholder="Enter name on card"
/>
<br />
<label for="Number">Name on Card</label> <br />
<input type="text" id="cardH" placeholder="Enter card number" />
<br />
<div class="expiryDate_cvvText">
<p>Expiry Date</p>
<p>CVV</p>
</div>
<div id="expiryDate_cvvDiv">
<div id="select_option_div">
<select name="" id="expMM">
<option value="MM">MM</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="" id="expYear">
<option value="YYYY">YYYY</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
</select>
</div>
<input type="text" id="cvv" placeholder="CVV(123)" />
</div>
<div class="savethhiscardText">
<input type="checkbox" />
<p>Save this card for a faster checkout experience</p>
</div>
</div>
</div>
</div>
<!-- others payment option -->
<div class="paymentOpt">
<input type="radio" name="check" />
<img src="./resources/emi calender.png" alt="calender" />
<div>
<p>EMI</p>
<p>Available on orders above ₹ 3,000</p>
</div>
</div>
<div class="paymentOpt">
<input type="radio" name="check" />
<img src="./resources/cash on delivery.png" alt="Cash" />
<div>
<p>Cash On Delivery</p>
<p>+₹ 49</p>
</div>
</div>
<div class="paymentOpt">
<input type="radio" name="check" />
<img src="./resources/net banking.png" alt="netBanking" />
<div>
<p>Net Banking</p>
<p>Pay by your preferred bank account</p>
</div>
</div>
<div class="paymentOpt">
<input type="radio" name="check" />
<img src="./resources/wallets.png" alt="wallets" />
<div>
<p>Wallets</p>
<p>Pay with your preferred wallet.</p>
</div>
</div>
<div class="paymentOpt">
<input type="radio" name="check" />
<img src="./resources/bhimupi.png" alt="upi" />
<div>
<p>UPI</p>
<p>Pay with your preferred UPI id.</p>
</div>
</div>
<div class="paymentOpt" id="Gifticons_flextText">
<img src="./resources/gift icon cart page.jpeg" alt="" srcset="" />
<p>
Got a Promo Code?
<a onclick="showInputbox()" id="spanUsecodeclick">Use it here</a>
</p>
</div>
<form id="promoForm">
<input
id="CouponInput"
type="text"
placeholder="Promo Code(masai30)"
/>
<input type="submit" value="Apply" />
</form>
<div class="paymentOpt" id="Gifticons_flextText">
<img src="./resources/gift card icon.jpeg" alt="" />
<p>
Have a Gift Card?
<a onclick="showInputbox()" id="spanUsecodeclick">Use it here.</a>
</p>
</div>
<div id="payNow_div">
<p>By clicking on Pay Now, you agree to our Terms and Conditions</p>
<input type="submit" onclick="payNow()" value="Pay Now" />
</div>
<div id="securityDescription">
<img src="./resources/secure lock .png" alt="secure" />
<div style="margin-left: 20px">
<p style="color: gray">
Your credit card details are securely encrypted and passed
directly to our PCI DSS compliant Payment Gateway for processing.
We only store your credit card's last 4 digits and the expiration
date. Your traffic to this page is secured using either a 256-bit
or 128-bit SSL certificate depending on your browser version.
</p>
<p>© 2021 RNA Intellectual Property Limited.</p>
<p>Privacy Policy - Terms of Use - Terms & Conditions</p>
</div>
</div>
</div>
<!-- left side div end -->
<!-- right side div start -->
<div id="right_div">
<div>
<p>Your order summary</p>
</div>
<div id="cartDetails">
<div class="tableheading">
<table>
<!-- <thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead> -->
<tbody></tbody>
</table>
</div>
<div id="subTotal_Div">
<p id="subtotal"></p>
<div id="paytImgs">
<img src="./resources/payment options.png" alt="" srcset="" />
<p style="color: gray">
Earn up to 4 Landmark Rewards points on this order.
</p>
</div>
</div>
</div>
</div>
<!-- right side div end -->
</div>
<!-- container end -->
</body>
</html>
<script src="./scripts/checkout.js"></script>