tonder-web-sdk 1.16.11-betatest → 1.16.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/v1/bundle.js +1 -0
- package/v1/bundle.min.js +1 -1
- package/v1/index.html +180 -0
package/v1/index.html
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
7
|
+
<style>
|
|
8
|
+
#checkout-container {
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
}
|
|
12
|
+
#pay-button {
|
|
13
|
+
padding: 10px 20px;
|
|
14
|
+
margin-top: 30px;
|
|
15
|
+
background-color: #4a90e2;
|
|
16
|
+
color: white;
|
|
17
|
+
border: none;
|
|
18
|
+
border-radius: 5px;
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition: background-color 0.3s;
|
|
22
|
+
}
|
|
23
|
+
#payButton:hover {
|
|
24
|
+
background-color: #357abd;
|
|
25
|
+
}
|
|
26
|
+
.cart-details {
|
|
27
|
+
font-size: 3rem;
|
|
28
|
+
font-weight: bold;
|
|
29
|
+
padding: 2rem;
|
|
30
|
+
display: flex;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
.button-container {
|
|
34
|
+
width: 100%;
|
|
35
|
+
display: flex;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
}
|
|
38
|
+
.tab-container {
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
margin-bottom: 20px;
|
|
42
|
+
}
|
|
43
|
+
.tab {
|
|
44
|
+
padding: 10px 20px;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
background-color: #f1f1f1;
|
|
47
|
+
border: 1px solid #ccc;
|
|
48
|
+
border-bottom: none;
|
|
49
|
+
margin-right: 5px;
|
|
50
|
+
}
|
|
51
|
+
.tab.active {
|
|
52
|
+
background-color: #fff;
|
|
53
|
+
border-bottom: 1px solid #4a90e2;
|
|
54
|
+
}
|
|
55
|
+
.tab-content {
|
|
56
|
+
display: none;
|
|
57
|
+
width: 100%;
|
|
58
|
+
}
|
|
59
|
+
.card-form {
|
|
60
|
+
max-width: 400px;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
}
|
|
63
|
+
.form-group {
|
|
64
|
+
margin-bottom: 1.5rem;
|
|
65
|
+
}
|
|
66
|
+
.form-group label {
|
|
67
|
+
display: block;
|
|
68
|
+
margin-bottom: 0.5rem;
|
|
69
|
+
font-weight: 500;
|
|
70
|
+
}
|
|
71
|
+
.form-group input {
|
|
72
|
+
width: 100%;
|
|
73
|
+
padding: 0.75rem;
|
|
74
|
+
border: 1px solid #ddd;
|
|
75
|
+
border-radius: 4px;
|
|
76
|
+
font-size: 1rem;
|
|
77
|
+
transition: border-color 0.3s ease;
|
|
78
|
+
}
|
|
79
|
+
.form-group input:focus {
|
|
80
|
+
outline: none;
|
|
81
|
+
border-color: #4a90e2;
|
|
82
|
+
}
|
|
83
|
+
.form-row {
|
|
84
|
+
display: flex;
|
|
85
|
+
gap: 3rem;
|
|
86
|
+
}
|
|
87
|
+
.form-row .form-group {
|
|
88
|
+
flex: 1;
|
|
89
|
+
}
|
|
90
|
+
.btn {
|
|
91
|
+
display: inline-block;
|
|
92
|
+
padding: 0.75rem 1.5rem;
|
|
93
|
+
background-color: #4a90e2;
|
|
94
|
+
color: #fff;
|
|
95
|
+
border: none;
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
font-size: 1rem;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
transition: background-color 0.3s ease;
|
|
100
|
+
}
|
|
101
|
+
.btn:hover {
|
|
102
|
+
background-color: #357abd;
|
|
103
|
+
}
|
|
104
|
+
.cart-details {
|
|
105
|
+
text-align: center;
|
|
106
|
+
font-size: 1.5rem;
|
|
107
|
+
margin-bottom: 2rem;
|
|
108
|
+
}
|
|
109
|
+
.input-md {
|
|
110
|
+
max-width: 100%;
|
|
111
|
+
}
|
|
112
|
+
.invalid {
|
|
113
|
+
border: 2px solid red !important;
|
|
114
|
+
}
|
|
115
|
+
</style>
|
|
116
|
+
<script defer src="bundle.js"></script></head>
|
|
117
|
+
|
|
118
|
+
<body>
|
|
119
|
+
<div class="checkout-container">
|
|
120
|
+
<div class="tab-container">
|
|
121
|
+
<a
|
|
122
|
+
href="?mode=inline"
|
|
123
|
+
class="tab"
|
|
124
|
+
data-mode="inline"
|
|
125
|
+
onclick="switchTab('inline'); return false;"
|
|
126
|
+
>Inline Checkout</a
|
|
127
|
+
>
|
|
128
|
+
<a href="?mode=lite" class="tab" data-mode="lite" onclick="switchTab('lite'); return false;"
|
|
129
|
+
>Lite Inline Checkout</a
|
|
130
|
+
>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div id="lite-content" class="tab-content">
|
|
134
|
+
<div class="cart-details">
|
|
135
|
+
<span>Total </span>
|
|
136
|
+
<div id="cart-total-lite">$399</div>
|
|
137
|
+
</div>
|
|
138
|
+
<form id="lite-payment-form" class="card-form">
|
|
139
|
+
<div class="form-group">
|
|
140
|
+
<label for="card-number">Número de Tarjeta</label>
|
|
141
|
+
<input type="text" id="card-number" placeholder="1234 5678 9012 3456" required />
|
|
142
|
+
</div>
|
|
143
|
+
<div class="form-group">
|
|
144
|
+
<label for="card-name">Nombre en la Tarjeta</label>
|
|
145
|
+
<input type="text" id="card-name" placeholder="John Doe" required />
|
|
146
|
+
</div>
|
|
147
|
+
<div class="form-row">
|
|
148
|
+
<div class="form-group">
|
|
149
|
+
<label for="month">Fecha de Expiración</label>
|
|
150
|
+
<div class="form-row">
|
|
151
|
+
<input class="input-md" type="text" id="month" placeholder="MM" required />
|
|
152
|
+
<input class="input-md" type="text" id="year" placeholder="AA" required />
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="form-group">
|
|
156
|
+
<label for="cvv">CVV</label>
|
|
157
|
+
<input class="input-md" type="text" id="cvv" placeholder="123" required />
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
<button type="submit" class="btn" id="pay-button-lite">Pagar Ahora</button>
|
|
161
|
+
</form>
|
|
162
|
+
</div>
|
|
163
|
+
<div id="inline-content" class="tab-content">
|
|
164
|
+
<div class="cart-details">
|
|
165
|
+
<span>Total </span>
|
|
166
|
+
<div id="cart-total">$399</div>
|
|
167
|
+
</div>
|
|
168
|
+
<form id="payment-form">
|
|
169
|
+
<div id="tonder-checkout"></div>
|
|
170
|
+
</form>
|
|
171
|
+
<div class="button-container">
|
|
172
|
+
<button id="pay-button">Pagar</button>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</body>
|
|
177
|
+
<script src="https://js.skyflow.com/v1/index.js"></script>
|
|
178
|
+
<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
|
|
179
|
+
<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
|
|
180
|
+
</html>
|