@tonder.io/ionic-full-sdk 0.0.4 → 0.0.6
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/README.md +338 -88
- package/dist/classes/inlineCheckout.d.ts +1 -4
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/src/classes/3dsHandler.ts +1 -3
- package/src/classes/inlineCheckout.ts +50 -45
- package/src/helpers/template.ts +4 -0
package/README.md
CHANGED
|
@@ -1,43 +1,114 @@
|
|
|
1
|
-
# Tonder SDK
|
|
1
|
+
# Tonder Ionic Full SDK
|
|
2
2
|
|
|
3
|
-
Tonder SDK
|
|
3
|
+
Tonder SDK to integrate checkout form
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
You can install using NPM
|
|
8
8
|
```bash
|
|
9
|
-
npm i tonder-sdk
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
or using an script tag
|
|
13
|
-
```html
|
|
14
|
-
<script src="https://zplit-stage.s3.amazonaws.com/v1/bundle.min.js"></script>
|
|
9
|
+
npm i @tonder.io/ionic-full-sdk
|
|
15
10
|
```
|
|
16
11
|
|
|
17
12
|
Add dependencies to the root of the app (index.html)
|
|
18
13
|
```html
|
|
19
|
-
<script src="https://js.skyflow.com/v1/index.js"></script>
|
|
20
14
|
<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
|
|
21
15
|
<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
|
|
22
16
|
```
|
|
23
17
|
|
|
24
18
|
## Usage
|
|
25
|
-
HTML
|
|
19
|
+
On HTML view
|
|
26
20
|
```html
|
|
27
21
|
<div>
|
|
28
22
|
<h1>Checkout</h1>
|
|
29
23
|
<!-- You have to add an entry point with the ID 'tonder-checkout' -->
|
|
30
|
-
<div id="tonder-checkout">
|
|
31
|
-
</div>
|
|
24
|
+
<div id="tonder-checkout"></div>
|
|
32
25
|
</div>
|
|
33
26
|
```
|
|
34
|
-
|
|
27
|
+
On Script section
|
|
28
|
+
|
|
35
29
|
```javascript
|
|
36
|
-
import { InlineCheckout } from "tonder-sdk
|
|
30
|
+
import { InlineCheckout } from "@tonder.io/ionic-full-sdk"
|
|
37
31
|
```
|
|
38
32
|
|
|
33
|
+
```javascript
|
|
34
|
+
const checkoutData = {
|
|
35
|
+
customer: {
|
|
36
|
+
firstName: "Juan",
|
|
37
|
+
lastName: "Hernández",
|
|
38
|
+
country: "Mexico",
|
|
39
|
+
address: "Av. Revolución 356, Col. Roma",
|
|
40
|
+
city: "Monterrey",
|
|
41
|
+
state: "Nuevo León",
|
|
42
|
+
postCode: "64700",
|
|
43
|
+
email: "juan.hernandez@mail.com",
|
|
44
|
+
phone: "8187654321",
|
|
45
|
+
},
|
|
46
|
+
currency: 'mxn',
|
|
47
|
+
cart: {
|
|
48
|
+
total: 399,
|
|
49
|
+
items: [
|
|
50
|
+
{
|
|
51
|
+
description: "Black T-Shirt",
|
|
52
|
+
quantity: 1,
|
|
53
|
+
price_unit: 1,
|
|
54
|
+
discount: 0,
|
|
55
|
+
taxes: 0,
|
|
56
|
+
product_reference: 1,
|
|
57
|
+
name: "T-Shirt",
|
|
58
|
+
amount_total: 399,
|
|
59
|
+
},
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const apiKey = "You can take this from you Tonder Dashboard";
|
|
65
|
+
const returnUrl = "http://my-website:8080/checkout-success"
|
|
66
|
+
const successUrl = "http://my-website:8080/3ds-success"
|
|
67
|
+
|
|
68
|
+
const inlineCheckout = new InlineCheckout({
|
|
69
|
+
apiKey,
|
|
70
|
+
returnUrl,
|
|
71
|
+
successUrl
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
inlineCheckout.setPaymentData(checkoutData);
|
|
75
|
+
inlineCheckout.setCartTotal(checkoutData.cart.total);
|
|
76
|
+
inlineCheckout.setCustomerEmail(checkoutData.cart.email);
|
|
77
|
+
inlineCheckout.injectCheckout();
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Configuration
|
|
82
|
+
| Property | Type | Required | Description |
|
|
83
|
+
|-----------------|---------------|:-----------------:|-------------------------------------------------------------|
|
|
84
|
+
| apiKey | string | X | You can take this from you Tonder Dashboard |
|
|
85
|
+
| returnUrl | string | X | |
|
|
86
|
+
| successUrl | string | | |
|
|
87
|
+
| style | object | | |
|
|
88
|
+
| containerId | string | | If require a custom checkout container id, default |
|
|
89
|
+
| | | | value "tonder-checkout" |
|
|
90
|
+
| collectorIds | object | | If require a custom div containers ids, default |
|
|
91
|
+
| | | | value: |
|
|
92
|
+
| | | | { |
|
|
93
|
+
| | | | cardsListContainer: "cardsListContainer", |
|
|
94
|
+
| | | | holderName: "collectCardholderName", |
|
|
95
|
+
| | | | cardNumber: "collectCardNumber", |
|
|
96
|
+
| | | | expirationMonth: "collectExpirationMonth", |
|
|
97
|
+
| | | | expirationYear: "collectExpirationYear", |
|
|
98
|
+
| | | | cvv: "collectCvv", |
|
|
99
|
+
| | | | tonderPayButton: "tonderPayButton", |
|
|
100
|
+
| | | | msgError: "msgError", |
|
|
101
|
+
| | | | msgNotification: "msgNotification" |
|
|
102
|
+
| | | | } |
|
|
103
|
+
| callBack | function | | Callback function invoqued after the payment process |
|
|
104
|
+
| | | | end successfully |
|
|
105
|
+
|
|
106
|
+
## Theming
|
|
107
|
+
|
|
108
|
+
<font size="3"> It exists two types of styles to the tonder checkout </font>
|
|
39
109
|
|
|
40
110
|
```javascript
|
|
111
|
+
|
|
41
112
|
const customStyles = {
|
|
42
113
|
inputStyles: {
|
|
43
114
|
base: {
|
|
@@ -99,41 +170,6 @@ const customStyles = {
|
|
|
99
170
|
}
|
|
100
171
|
}
|
|
101
172
|
|
|
102
|
-
const checkoutData = {
|
|
103
|
-
customer: {
|
|
104
|
-
firstName: "Juan",
|
|
105
|
-
lastName: "Hernández",
|
|
106
|
-
country: "Mexico",
|
|
107
|
-
address: "Av. Revolución 356, Col. Roma",
|
|
108
|
-
city: "Monterrey",
|
|
109
|
-
state: "Nuevo León",
|
|
110
|
-
postCode: "64700",
|
|
111
|
-
email: "juan.hernandez@mail.com",
|
|
112
|
-
phone: "8187654321",
|
|
113
|
-
},
|
|
114
|
-
currency: 'mxn',
|
|
115
|
-
cart: {
|
|
116
|
-
total: 399,
|
|
117
|
-
items: [
|
|
118
|
-
{
|
|
119
|
-
description: "Black T-Shirt",
|
|
120
|
-
quantity: 1,
|
|
121
|
-
price_unit: 1,
|
|
122
|
-
discount: 0,
|
|
123
|
-
taxes: 0,
|
|
124
|
-
product_reference: 1,
|
|
125
|
-
name: "T-Shirt",
|
|
126
|
-
amount_total: 399,
|
|
127
|
-
},
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
|
|
133
|
-
const returnUrl = "http://my-website:8080/checkout"
|
|
134
|
-
const successUrl = "http://my-website:8080/sucess"
|
|
135
|
-
// if using script tag, it should be initialized like this
|
|
136
|
-
// new TonderSdk.InlineCheckout
|
|
137
173
|
const inlineCheckout = new InlineCheckout({
|
|
138
174
|
apiKey,
|
|
139
175
|
returnUrl,
|
|
@@ -141,57 +177,271 @@ const inlineCheckout = new InlineCheckout({
|
|
|
141
177
|
styles: customStyles
|
|
142
178
|
});
|
|
143
179
|
|
|
144
|
-
inlineCheckout.injectCheckout();
|
|
145
|
-
|
|
146
|
-
const response = await inlineCheckout.payment(checkoutData);
|
|
147
180
|
```
|
|
148
181
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
```
|
|
182
|
+
<font size="3">The styles param is related to the style of the inputs inside the checkout form, to customize the checkout container and the cards list you can use global styles on base to this classes</font>
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
|
|
186
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
|
|
187
|
+
|
|
188
|
+
.container-tonder {
|
|
189
|
+
background-color: #F9F9F9;
|
|
190
|
+
margin: 0 auto;
|
|
191
|
+
padding: 30px 10px 30px 10px;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
transition: max-height 0.5s ease-out;
|
|
194
|
+
max-width: 600px;
|
|
195
|
+
border: solid 1px #e3e3e3;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.collect-row {
|
|
199
|
+
display: flex;
|
|
200
|
+
justify-content: space-between;
|
|
201
|
+
width: 100%;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.collect-row > :first-child {
|
|
205
|
+
min-width: 120px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.expiration-year {
|
|
209
|
+
padding-top: 25px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.empty-div {
|
|
213
|
+
height: 80px;
|
|
214
|
+
margin-top: 2px;
|
|
215
|
+
margin-bottom: 4px;
|
|
216
|
+
margin-left: 10px;
|
|
217
|
+
margin-right: 10px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.error-container{
|
|
221
|
+
color: red;
|
|
222
|
+
background-color: #FFDBDB;
|
|
223
|
+
margin-bottom: 13px;
|
|
224
|
+
font-size: 80%;
|
|
225
|
+
padding: 8px 10px;
|
|
226
|
+
border-radius: 10px;
|
|
227
|
+
text-align: left;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.message-container{
|
|
231
|
+
color: green;
|
|
232
|
+
background-color: #90EE90;
|
|
233
|
+
margin-bottom: 13px;
|
|
234
|
+
font-size: 80%;
|
|
235
|
+
padding: 8px 10px;
|
|
236
|
+
border-radius: 10px;
|
|
237
|
+
text-align: left;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.pay-button {
|
|
241
|
+
font-size: 16px;
|
|
242
|
+
font-weight: bold;
|
|
243
|
+
min-height: 2.3rem;
|
|
244
|
+
border-radius: 0.5rem;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
width: 100%;
|
|
247
|
+
padding: 1rem;
|
|
248
|
+
text-align: center;
|
|
249
|
+
border: none;
|
|
250
|
+
background-color: #000;
|
|
251
|
+
color: #fff;
|
|
252
|
+
margin-bottom: 10px;
|
|
253
|
+
display: none;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.pay-button:disabled, pay-button[disabled] {
|
|
257
|
+
background-color: #B9B9B9;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.lds-dual-ring {
|
|
261
|
+
display: inline-block;
|
|
262
|
+
width: 14px;
|
|
263
|
+
height: 14px;
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
.lds-dual-ring:after {
|
|
267
|
+
content: " ";
|
|
268
|
+
display: block;
|
|
269
|
+
width: 14px;
|
|
270
|
+
height: 14px;
|
|
271
|
+
border-radius: 50%;
|
|
272
|
+
border: 6px solid #fff;
|
|
273
|
+
border-color: #fff transparent #fff transparent;
|
|
274
|
+
animation: lds-dual-ring 1.2s linear infinite;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@keyframes lds-dual-ring {
|
|
278
|
+
0% {
|
|
279
|
+
transform: rotate(0deg);
|
|
280
|
+
}
|
|
281
|
+
100% {
|
|
282
|
+
transform: rotate(360deg);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
@media screen and (max-width: 600px) {
|
|
287
|
+
.payment_method_zplit {
|
|
288
|
+
font-size: 16px;
|
|
289
|
+
width: 100%;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.payment_method_zplit label img {
|
|
293
|
+
display: none;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.cards-list-container {
|
|
298
|
+
display: flex;
|
|
299
|
+
flex-direction: column;
|
|
300
|
+
padding: 0px 10px 0px 10px;
|
|
301
|
+
gap: 33% 20px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.checkbox label {
|
|
305
|
+
margin-left: 10px;
|
|
306
|
+
font-size: '12px';
|
|
307
|
+
font-weight: '500';
|
|
308
|
+
color: #1D1D1D;
|
|
309
|
+
font-family: "Inter", sans-serif;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.checkbox {
|
|
313
|
+
margin-top: 10px;
|
|
314
|
+
margin-bottom: 10px;
|
|
315
|
+
width: 100%;
|
|
316
|
+
text-align: left;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.pay-new-card {
|
|
320
|
+
display: flex;
|
|
321
|
+
justify-content: start;
|
|
322
|
+
align-items: center;
|
|
323
|
+
color: #1D1D1D;
|
|
324
|
+
gap: 33% 20px;
|
|
325
|
+
margin-top: 10px;
|
|
326
|
+
margin-bottom: 10px;
|
|
327
|
+
padding-left: 10px;
|
|
328
|
+
padding-right: 10px;
|
|
329
|
+
width: 90%;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.pay-new-card .card-number {
|
|
333
|
+
font-size: 16px;
|
|
334
|
+
font-family: "Inter", sans-serif;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.card-image {
|
|
338
|
+
width: 27px;
|
|
339
|
+
height: 20px;
|
|
340
|
+
text-align: left;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.card-item-label {
|
|
344
|
+
display: flex;
|
|
345
|
+
justify-content: start;
|
|
346
|
+
align-items: center;
|
|
347
|
+
color: #1D1D1D;
|
|
348
|
+
gap: 33% 20px;
|
|
349
|
+
margin-top: 10px;
|
|
350
|
+
margin-bottom: 10px;
|
|
351
|
+
padding-left: 10px;
|
|
352
|
+
padding-right: 10px;
|
|
353
|
+
width: 90%;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.card_selected {
|
|
357
|
+
width: 10%;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.card-item {
|
|
361
|
+
display: flex;
|
|
362
|
+
justify-content: start;
|
|
363
|
+
align-items: center;
|
|
364
|
+
gap: 33% 20px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.card-item .card-number {
|
|
368
|
+
font-size: 16px;
|
|
369
|
+
font-family: "Inter", sans-serif;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.card-item .card-expiration {
|
|
373
|
+
font-size: 16px;
|
|
374
|
+
font-family: "Inter", sans-serif;
|
|
375
|
+
}
|
|
152
376
|
|
|
153
|
-
## Configuration
|
|
154
|
-
| Property | Type | Description |
|
|
155
|
-
|:---------------:|:-------------:|:---------------------------------------------------:|
|
|
156
|
-
| apiKey | string | You can take this from you Tonder Dashboard |
|
|
157
|
-
| backgroundColor | string | Hex color #000000 |
|
|
158
|
-
| returnUrl | string | |
|
|
159
|
-
| successUrl | string | |
|
|
160
|
-
| backgroundColor | string | |
|
|
161
|
-
|
|
162
|
-
## setPayment params
|
|
163
|
-
### products
|
|
164
|
-
It will receive an array of objects that represent the products.
|
|
165
|
-
```javascript
|
|
166
|
-
[
|
|
167
|
-
{
|
|
168
|
-
name: 'name of the product',
|
|
169
|
-
price_unit: 'valid float string with the price of the product',
|
|
170
|
-
quantity: 'valid integer strig with the quantity of this product',
|
|
171
|
-
}
|
|
172
|
-
]
|
|
173
377
|
```
|
|
174
|
-
### shippingCost
|
|
175
|
-
It is a valid float string, that will be the shipping cost.
|
|
176
378
|
|
|
177
|
-
|
|
178
|
-
The email of the customer that is making the purchase.
|
|
379
|
+
<font size="3">Included in this html template</font>
|
|
179
380
|
|
|
180
|
-
|
|
181
|
-
|
|
381
|
+
<font size="4">Form</font>
|
|
382
|
+
|
|
383
|
+
```html
|
|
182
384
|
|
|
183
|
-
|
|
184
|
-
|
|
385
|
+
<div class="container-tonder">
|
|
386
|
+
<div class="cards-list-container"></div>
|
|
387
|
+
<div class="pay-new-card">
|
|
388
|
+
<input checked id="new" name="card_selected" type="radio"/>
|
|
389
|
+
<label for="new">
|
|
390
|
+
<img class="card-image"/>
|
|
391
|
+
<div class="card-number"></div>
|
|
392
|
+
</label>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="container-form">
|
|
395
|
+
<div class="empty-div"></div>
|
|
396
|
+
<div class="empty-div"></div>
|
|
397
|
+
<div class="collect-row">
|
|
398
|
+
<div class="empty-div"></div>
|
|
399
|
+
<div class="expiration-year"></div>
|
|
400
|
+
<div class="empty-div"></div>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="checkbox">
|
|
403
|
+
<input id="save-checkout-card" type="checkbox">
|
|
404
|
+
<label for="save-checkout-card"></label>
|
|
405
|
+
</div>
|
|
406
|
+
<div></div>
|
|
407
|
+
<div></div>
|
|
408
|
+
</div>
|
|
409
|
+
<button class="pay-button"></button>
|
|
410
|
+
</div>
|
|
185
411
|
|
|
186
|
-
|
|
187
|
-
An array of items to be registered in the Tonder order.
|
|
412
|
+
```
|
|
188
413
|
|
|
189
|
-
|
|
190
|
-
You need to have an element where the inline checkout will be mounted, this should be a DIV element with the ID "tonder-checkout"
|
|
414
|
+
<font size="4">Cards list</font>
|
|
191
415
|
|
|
192
416
|
```html
|
|
193
|
-
|
|
417
|
+
|
|
418
|
+
<div class="card-item">
|
|
419
|
+
<input name="card_selected" type="radio"/>
|
|
420
|
+
<label class="card-item-label">
|
|
421
|
+
<img class="card-image"/>
|
|
422
|
+
<div class="card-number"></div>
|
|
423
|
+
<div class="card-expiration"></div>
|
|
424
|
+
</label>
|
|
425
|
+
</div>
|
|
426
|
+
|
|
427
|
+
```
|
|
428
|
+
## Mobile settings
|
|
429
|
+
|
|
430
|
+
<font size="3">If you are deploying to Android, edit your AndroidManifest.xml file to add the Internet permission.</font>
|
|
431
|
+
|
|
432
|
+
```xml
|
|
433
|
+
<!-- Required to fetch data from the internet. -->
|
|
434
|
+
<uses-permission android:name="android.permission.INTERNET" />
|
|
194
435
|
```
|
|
436
|
+
|
|
437
|
+
<font size="3">Likewise, if you are deploying to macOS, edit your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files to include the network client entitlement.</font>
|
|
438
|
+
|
|
439
|
+
```xml
|
|
440
|
+
<!-- Required to fetch data from the internet. -->
|
|
441
|
+
<key>com.apple.security.network.client</key>
|
|
442
|
+
<true/>
|
|
443
|
+
```
|
|
444
|
+
|
|
195
445
|
## License
|
|
196
446
|
|
|
197
447
|
[MIT](https://choosealicense.com/licenses/mit/)
|
|
@@ -12,11 +12,8 @@ export type InlineCheckoutConstructor = {
|
|
|
12
12
|
renderPaymentButton: boolean;
|
|
13
13
|
callBack?: (params: any) => void;
|
|
14
14
|
styles?: any;
|
|
15
|
-
form?: any;
|
|
16
|
-
totalElement?: any;
|
|
17
15
|
containerId?: string;
|
|
18
16
|
collectorIds?: CollectorIds;
|
|
19
|
-
platforms?: string[];
|
|
20
17
|
};
|
|
21
18
|
export declare class InlineCheckout {
|
|
22
19
|
#private;
|
|
@@ -55,7 +52,7 @@ export declare class InlineCheckout {
|
|
|
55
52
|
clientCards: Card[];
|
|
56
53
|
radioChecked: string | null;
|
|
57
54
|
fetchingPayment: boolean;
|
|
58
|
-
constructor({ apiKey, returnUrl, successUrl, renderPaymentButton, callBack, styles, containerId, collectorIds
|
|
55
|
+
constructor({ apiKey, returnUrl, successUrl, renderPaymentButton, callBack, styles, containerId, collectorIds }: InlineCheckoutConstructor);
|
|
59
56
|
payment(data: any): Promise<unknown>;
|
|
60
57
|
setCartItems(items: OrderItem[]): void;
|
|
61
58
|
setCustomerEmail(email: string): void;
|