-
Notifications
You must be signed in to change notification settings - Fork 0
/
step2.html
166 lines (156 loc) · 9.93 KB
/
step2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Campaign</title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="bg-checkout">
<div class="topbar py-3 py-lg-4">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-5 d-flex justify-content-center justify-content-md-start align-items-center pb-2 pb-md-0">
<div class="logo">
<img src="img/logo.png" alt="Example Campaign" class="img-fluid">
</div>
</div>
<div class="col-md-7 d-flex justify-content-center justify-content-md-end align-items-center">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item is-current"><span>CHECKOUT</span></li>
<li class="breadcrumb-item">UPGRADES</li>
<li class="breadcrumb-item">SUMMARY</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<section class="main pt-5">
<div class="container">
<div class="row justify-content-center ">
<div id="block--payment_opt1" class="col-12 col-lg-5">
<form class="form" novalidate="novalidate">
<input type="hidden" id="card_token" name="card_token">
<input type="hidden" name="payment_method" id="payment_method">
<input type="hidden" name="shipping_method" id="shipping_method">
<input type="hidden" name="billing_same_as_shipping_address" id="billing_same_as_shipping_address" value='true'>
<div class="step-title">
STEP 3: PAYMENT OPTION
</div>
<hr class="mt-2">
<div class="checkout_express-buttons">
<div class="d-grid mb-3">
<button type="button" class="btn btn-lg btn-express is-paypal pay-with-paypal"><span class="fs-8 text-dark me-1">Pay with</span> <img src="img/paypal.svg" height="30px" alt=""></button>
</div>
</div>
<div class="div-line fw-bold">OR PAY SECURELY WITH CREDIT CARD </div>
<div class="bg-white rounded-3 border mb-3">
<div id="form-cc" class="form form-cc p-2 p-lg-3">
<div class="row g-2 mb-3">
<div class="col-12 d-flex justify-content-between align-items-center">
<h5>Credit/Debit:</h5>
<img src="img/creditCard.svg" alt="" class="ms-1">
</div>
<div id="payment-error-block"></div>
<div class="col-12 ">
<div class="form-cc-card">
<div id="bankcard-number" class="form-control p-0">
</div>
</div>
<div class="invalid-message invalid-cc" id="invalid-cc"></div>
</div>
<div class="col-sm col-lg-12 col-xl-6">
<div class="form-floating">
<select class="form-select" name="expiry_month" id="id_expiry_month" autocomplete="cc-exp-month">
<option value="" selected disabled>Please Select</option>
<option value="01">(01) January</option>
<option value="02">(02) February</option>
<option value="03">(03) March</option>
<option value="04">(04) April</option>
<option value="05">(05) May</option>
<option value="06">(06) June</option>
<option value="07">(07) July</option>
<option value="08">(08) August</option>
<option value="09">(09) September</option>
<option value="10">(10) October</option>
<option value="11">(11) November</option>
<option value="12">(12) December</option>
</select>
<label for="id_expiry_month">Month</label>
</div>
</div>
<div class="col-sm col-lg-12 col-xl-6">
<div class="form-floating">
<select class="form-select" name="expiry_year" id="id_expiry_year" autocomplete="cc-exp-year">
<option value="" selected disabled>Please Select</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>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2040">2040</option>
<option value="2041">2041</option>
<option value="2042">2042</option>
</select>
<label for="id_expiry_year">Year</label>
</div>
</div>
<div class="col-12">
<div class="form-cc-cvv">
<div id="bankcard-cvv" class="form-control p-0"></div>
</div>
<div class="invalid-message invalid-cvv" id="invalid-cvv"></div>
</div>
</div>
<div class="row" id="step-3">
<div class="col">
<div class="d-grid mb-4">
<button id="cc-submit-button" type="button" class="btn btn-lg btn-success btn-checkout pay-with-cc" data-loading-text='Processing' data-text='Pay with Credit Card' disabled>Pay with Credit Card</button>
</div>
</div>
<div id="validation-error-block"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container pt-4 pb-5">
<div class="row">
<div class="col-12 mt-3 pt-2 text-center footer-copyright d-flex flex-column flex-sm-row justify-content-between align-items-center">
<div class="mb-4 mb-sm-0 fs-8 text-light">
©2024 <span class="text-secondary">Example Campaign</span>. All Rights Reserved.
</div>
</div>
</div>
</div>
</footer>
</body>
<script type="text/javascript">
const publicKey = "HJiDgB1BcNDWx0lJYvP79mqDeRN8d0EVN9DfqYLv";
const nextURL = "/upsell.html";
</script>
<script src="https://core.spreedly.com/iframe/iframe-v1.min.js"></script>
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<script type="text/javascript" src="js/campaign.js"></script>
<script type="text/javascript" src="js/checkout2.js"></script>
<script type="text/javascript" src="js/form2.js"></script>
</html>