-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathPaymentGateway.html
117 lines (114 loc) · 11.9 KB
/
PaymentGateway.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
<!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" />
<title>Payment Page</title>
<link rel="stylesheet" href="PaymentGateway.css" />
<link rel="shortcut icon" href="https://www.cricbuzz.com/images/cb_favicon.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/eba04dea05.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<div id="planinfo">
<div>
<div id="backbtn">
<img
src="https://api.payu.in/public/assets/images/back.svg"
alt="backbutton"
/>
<p>Back</p>
</div>
<img
src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABCCAYAAADQQ92kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmIwZjhiZTkwLCAyMDIxLzEyLzE1LTIxOjI1OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU0Rjk4QzNCRkM5MTFFQzk2RTFBNDc4MDcxRjZFRjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU0Rjk4QzRCRkM5MTFFQzk2RTFBNDc4MDcxRjZFRjgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTRGOThDMUJGQzkxMUVDOTZFMUE0NzgwNzFGNkVGOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTRGOThDMkJGQzkxMUVDOTZFMUE0NzgwNzFGNkVGOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psl6nNwAABSESURBVHja7F0H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"
alt="CrickbuzzLogo"
/>
</div>
<div id="detailtree">
<h3>Enter new Card</h3>
<p>Total Payable Amount <span id="amountpayable">₹999</span></p>
<div class="plandetailstable">
<p>Amount chargeable as per plan</p>
<p id="pricetodeduct">Up to ₹999</p>
</div>
<div class="plandetailstable">
<p>Start Date</p>
<p id="todaysdate"></p>
</div>
<div class="plandetailstable">
<p>End Date</p>
<p id="planexpirydate"></p>
</div>
</div>
</div>
<div id="paymentformcontainer">
<div id="headform">
<p>CARDS (CREDIT/DEBIT)</p>
<div id="payformlanguage">
<img
src="https://www.periodontal-health.com/wp-content/uploads/2019/05/Translation-600x375.jpg"
alt="language change"
/>
<select id="languageselect">
<option value="English">English</option>
<option value="हिंदी">हिंदी</option>
<option value="ગુજરાતી">ગુજરાતી</option>
<option value="मराठी">मराठी</option>
<option value="తెలుగు">తెలుగు</option>
<option value="தமிழ்">தமிழ்</option>
<option value="ಕನ್ನಡ">ಕನ್ನಡ</option>
<option value="বাংলা">বাংলা</option>
</select>
</div>
</div>
<form>
<label for="">New Card</label>
<input
type="number"
id="cardNumber"
maxlength="12"
minlength="20"
placeholder="Enter Card Number"
/>
<div id="expcvv">
<div>
<label for="">Expiry</label>
<input
type="text"
name=""
id="cardExpiry"
min="08-22"
max="08-45"
minlength="5"
maxlength="5"
placeholder="MM/YY"
/>
</div>
<div>
<label for="">CVV</label>
<input
type="number"
id="cardCVV"
min="000"
max="999"
placeholder="Enter CVV"
/>
</div>
</div>
<label for="">Name on Card</label>
<input type="text" id="cardHolder" placeholder="Card Holder's Name" />
<div id="tnc">
<input type="checkbox"name="accept" id="agreetnc" />
<p>
I hereby agree and authorize Crickbuzz to debit my account and set
up standing instruction. Learn more
</p>
</div>
<input type="submit" name="accept"value="Proceed" id="fetchdata" />
</form>
</div>
</div>
</body>
</html>
<script src="PaymentGateway.js"></script>