@tonder.io/ionic-full-sdk 0.0.13-beta → 0.0.14-beta
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/dist/index.js +1 -1
- package/package.json +2 -2
- package/src/classes/inlineCheckout.ts +10 -3
- package/src/helpers/template.ts +171 -10
- package/src/helpers/utils.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tonder.io/ionic-full-sdk",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14-beta",
|
|
4
4
|
"description": "Tonder ionic full SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.js",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@tonder.io/ionic-lite-sdk": "^0.0.
|
|
13
|
+
"@tonder.io/ionic-lite-sdk": "^0.0.22-beta",
|
|
14
14
|
"crypto-js": "^4.1.1",
|
|
15
15
|
"skyflow-js": "^1.34.1"
|
|
16
16
|
},
|
|
@@ -204,6 +204,10 @@ export class InlineCheckout {
|
|
|
204
204
|
const id = button.attributes.getNamedItem("id")
|
|
205
205
|
const skyflow_id = id?.value?.split("_")?.[2]
|
|
206
206
|
if(skyflow_id) {
|
|
207
|
+
const cardClicked: HTMLElement | null = document.querySelector(`#card_container-${skyflow_id}`);
|
|
208
|
+
if(cardClicked) {
|
|
209
|
+
cardClicked.style.display = "none"
|
|
210
|
+
}
|
|
207
211
|
await this.liteCheckout.deleteCustomerCard(customerToken, skyflow_id)
|
|
208
212
|
this.cardsInjected = false
|
|
209
213
|
const cards = await this.liteCheckout.getCustomerCards(customerToken)
|
|
@@ -220,7 +224,9 @@ export class InlineCheckout {
|
|
|
220
224
|
containerForm.style.display = radio.id === "new" ? "block" : "none";
|
|
221
225
|
}
|
|
222
226
|
if(radio.id === "new") {
|
|
223
|
-
|
|
227
|
+
if(this.radioChecked !== radio.id) {
|
|
228
|
+
await this.#mountForm();
|
|
229
|
+
}
|
|
224
230
|
} else {
|
|
225
231
|
this.#unmountForm();
|
|
226
232
|
}
|
|
@@ -462,7 +468,7 @@ export class InlineCheckout {
|
|
|
462
468
|
|
|
463
469
|
if("auth_token" in customerResponse) {
|
|
464
470
|
|
|
465
|
-
const { auth_token } = customerResponse;
|
|
471
|
+
const { auth_token, id: cutomerId } = customerResponse;
|
|
466
472
|
|
|
467
473
|
const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
|
|
468
474
|
|
|
@@ -512,7 +518,8 @@ export class InlineCheckout {
|
|
|
512
518
|
business_pk: business.pk,
|
|
513
519
|
amount: total,
|
|
514
520
|
date: dateString,
|
|
515
|
-
|
|
521
|
+
order_id: jsonResponseOrder.id,
|
|
522
|
+
client_id: cutomerId
|
|
516
523
|
};
|
|
517
524
|
|
|
518
525
|
const jsonResponsePayment = await this.liteCheckout.createPayment(
|
package/src/helpers/template.ts
CHANGED
|
@@ -25,7 +25,7 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
|
|
|
25
25
|
<div class="container-tonder">
|
|
26
26
|
<div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
|
|
27
27
|
<div class="pay-new-card">
|
|
28
|
-
<input checked id="new" name="card_selected" type="radio"/>
|
|
28
|
+
<input checked id="new" class="card_selected" name="card_selected" type="radio"/>
|
|
29
29
|
<label class="card-item-label-new" for="new">
|
|
30
30
|
<img class="card-image" src="${getCardType("XXXX")}" />
|
|
31
31
|
<div class="card-number">Pagar con tarjeta</div>
|
|
@@ -98,7 +98,7 @@ ${external ? `` : `<style>
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.message-container{
|
|
101
|
-
color:
|
|
101
|
+
color: #3bc635 !important;
|
|
102
102
|
background-color: #DAFCE4 !important;
|
|
103
103
|
margin-bottom: 13px !important;
|
|
104
104
|
font-size: 80% !important;
|
|
@@ -224,6 +224,86 @@ ${external ? `` : `<style>
|
|
|
224
224
|
width: 90%;
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
+
.card_selected {
|
|
228
|
+
position: relative;
|
|
229
|
+
width: 16px;
|
|
230
|
+
height: 16px;
|
|
231
|
+
appearance: none;
|
|
232
|
+
cursor: pointer;
|
|
233
|
+
border-radius: 100%;
|
|
234
|
+
border: 1px #3bc635 solid;
|
|
235
|
+
color: #3bc635;
|
|
236
|
+
transition-property: all;
|
|
237
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
238
|
+
transition-duration: 150ms;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.card_selected:before {
|
|
242
|
+
width: 8px;
|
|
243
|
+
height: 8px;
|
|
244
|
+
content: "";
|
|
245
|
+
position: absolute;
|
|
246
|
+
top: 50%;
|
|
247
|
+
left: 50%;
|
|
248
|
+
display: block;
|
|
249
|
+
transform: translate(-50%, -50%);
|
|
250
|
+
border-radius: 100%;
|
|
251
|
+
background-color: #3bc635;
|
|
252
|
+
opacity: 0;
|
|
253
|
+
transition-property: opacity;
|
|
254
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
255
|
+
transition-duration: 150ms;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.card_selected:checked {
|
|
259
|
+
border: 1px #3bc635 solid;
|
|
260
|
+
position: relative;
|
|
261
|
+
width: 16px;
|
|
262
|
+
height: 16px;
|
|
263
|
+
appearance: none;
|
|
264
|
+
cursor: pointer;
|
|
265
|
+
border-radius: 100%;
|
|
266
|
+
color: #3bc635;
|
|
267
|
+
transition-property: all;
|
|
268
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
269
|
+
transition-duration: 150ms;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.card_selected:checked:before {
|
|
273
|
+
content: "";
|
|
274
|
+
border: 1px #3bc635 solid;
|
|
275
|
+
width: 8px;
|
|
276
|
+
height: 8px;
|
|
277
|
+
position: absolute;
|
|
278
|
+
top: 50%;
|
|
279
|
+
left: 50%;
|
|
280
|
+
display: block;
|
|
281
|
+
transform: translate(-50%, -50%);
|
|
282
|
+
border-radius: 100%;
|
|
283
|
+
background-color: #3bc635;
|
|
284
|
+
opacity: 50;
|
|
285
|
+
transition-property: opacity;
|
|
286
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
287
|
+
transition-duration: 150ms;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.card_selected:hover:before {
|
|
291
|
+
width: 8px;
|
|
292
|
+
height: 8px;
|
|
293
|
+
content: "";
|
|
294
|
+
position: absolute;
|
|
295
|
+
top: 50%;
|
|
296
|
+
left: 50%;
|
|
297
|
+
display: block;
|
|
298
|
+
transform: translate(-50%, -50%);
|
|
299
|
+
border-radius: 100%;
|
|
300
|
+
background-color: #3bc635;
|
|
301
|
+
transition-property: opacity;
|
|
302
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
303
|
+
transition-duration: 150ms;
|
|
304
|
+
opacity: 10;
|
|
305
|
+
}
|
|
306
|
+
|
|
227
307
|
</style>
|
|
228
308
|
`}`
|
|
229
309
|
|
|
@@ -231,16 +311,16 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
|
|
|
231
311
|
|
|
232
312
|
const cardItemsHTML = cards.reduce((total: string, card: Card) => {
|
|
233
313
|
return `${total}
|
|
234
|
-
<div class="card-item">
|
|
235
|
-
<input id="${card.skyflow_id}" name="card_selected" type="radio"/>
|
|
314
|
+
<div class="card-item" id="card_container-${card.skyflow_id}">
|
|
315
|
+
<input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
|
|
236
316
|
<label class="card-item-label" for="${card.skyflow_id}">
|
|
237
317
|
<img class="card-image" src="${getCardType(card.card_scheme)}" />
|
|
238
318
|
<div class="card-number">${card.card_number}</div>
|
|
239
319
|
<div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
|
|
240
320
|
<div class="card-delete-icon">
|
|
241
321
|
<button id="delete_button_${card.skyflow_id}" class="card-delete-button">
|
|
242
|
-
<svg
|
|
243
|
-
<path fill
|
|
322
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
|
|
323
|
+
<path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
|
|
244
324
|
</svg>
|
|
245
325
|
</button>
|
|
246
326
|
</div>
|
|
@@ -266,10 +346,6 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
|
|
|
266
346
|
width: 90%;
|
|
267
347
|
}
|
|
268
348
|
|
|
269
|
-
.card_selected {
|
|
270
|
-
width: 10%;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
349
|
.card-item {
|
|
274
350
|
display: flex;
|
|
275
351
|
justify-content: start;
|
|
@@ -294,10 +370,95 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
|
|
|
294
370
|
}
|
|
295
371
|
|
|
296
372
|
.card-delete-button {
|
|
373
|
+
background-color: transparent !important;
|
|
374
|
+
color: #000000 !important;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.card-delete-button:hover {
|
|
297
378
|
background-color: transparent !important;
|
|
298
379
|
color: #D91C1C !important;
|
|
299
380
|
}
|
|
300
381
|
|
|
382
|
+
.card_selected {
|
|
383
|
+
position: relative;
|
|
384
|
+
width: 16px;
|
|
385
|
+
height: 16px;
|
|
386
|
+
appearance: none;
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
border-radius: 100%;
|
|
389
|
+
border: 1px #3bc635 solid;
|
|
390
|
+
color: #3bc635;
|
|
391
|
+
transition-property: all;
|
|
392
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
393
|
+
transition-duration: 150ms;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.card_selected:before {
|
|
397
|
+
width: 8px;
|
|
398
|
+
height: 8px;
|
|
399
|
+
content: "";
|
|
400
|
+
position: absolute;
|
|
401
|
+
top: 50%;
|
|
402
|
+
left: 50%;
|
|
403
|
+
display: block;
|
|
404
|
+
transform: translate(-50%, -50%);
|
|
405
|
+
border-radius: 100%;
|
|
406
|
+
background-color: #3bc635;
|
|
407
|
+
opacity: 0;
|
|
408
|
+
transition-property: opacity;
|
|
409
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
410
|
+
transition-duration: 150ms;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.card_selected:checked {
|
|
414
|
+
border: 1px #3bc635 solid;
|
|
415
|
+
position: relative;
|
|
416
|
+
width: 16px;
|
|
417
|
+
height: 16px;
|
|
418
|
+
appearance: none;
|
|
419
|
+
cursor: pointer;
|
|
420
|
+
border-radius: 100%;
|
|
421
|
+
color: #3bc635;
|
|
422
|
+
transition-property: all;
|
|
423
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
424
|
+
transition-duration: 150ms;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.card_selected:checked:before {
|
|
428
|
+
content: "";
|
|
429
|
+
border: 1px #3bc635 solid;
|
|
430
|
+
width: 8px;
|
|
431
|
+
height: 8px;
|
|
432
|
+
position: absolute;
|
|
433
|
+
top: 50%;
|
|
434
|
+
left: 50%;
|
|
435
|
+
display: block;
|
|
436
|
+
transform: translate(-50%, -50%);
|
|
437
|
+
border-radius: 100%;
|
|
438
|
+
background-color: #3bc635;
|
|
439
|
+
opacity: 50;
|
|
440
|
+
transition-property: opacity;
|
|
441
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
442
|
+
transition-duration: 150ms;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.card_selected:hover:before {
|
|
446
|
+
width: 8px;
|
|
447
|
+
height: 8px;
|
|
448
|
+
content: "";
|
|
449
|
+
position: absolute;
|
|
450
|
+
top: 50%;
|
|
451
|
+
left: 50%;
|
|
452
|
+
display: block;
|
|
453
|
+
transform: translate(-50%, -50%);
|
|
454
|
+
border-radius: 100%;
|
|
455
|
+
background-color: #3bc635;
|
|
456
|
+
transition-property: opacity;
|
|
457
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
458
|
+
transition-duration: 150ms;
|
|
459
|
+
opacity: 10;
|
|
460
|
+
}
|
|
461
|
+
|
|
301
462
|
</style>
|
|
302
463
|
`
|
|
303
464
|
const cardItem = `
|
package/src/helpers/utils.ts
CHANGED
|
@@ -131,6 +131,6 @@ export const mapCards = (card: CardResponse) => {
|
|
|
131
131
|
const newCard = { ...card.fields };
|
|
132
132
|
const carArr = newCard.card_number.split("-");
|
|
133
133
|
const last = carArr[carArr.length - 1];
|
|
134
|
-
newCard.card_number =
|
|
134
|
+
newCard.card_number = `••••${last}`;
|
|
135
135
|
return newCard;
|
|
136
136
|
}
|