@tonder.io/ionic-full-sdk 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.js",
@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.12",
+    "@tonder.io/ionic-lite-sdk": "^0.0.14",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

package/src/classes/inlineCheckout.ts

@@ -2,7 +2,8 @@ import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/
 import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
 import {
   showError,
-  showMessage
+  showMessage,
+  mapCards
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler';
@@ -149,7 +150,12 @@ export class InlineCheckout {
         this.setCartItems(data.cart?.items)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         if (response) {
-          const process3ds = new ThreeDSHandler({ payload: response });
+          const process3ds = new ThreeDSHandler({ 
+            payload: response, 
+            baseUrl: this.baseUrl,
+            apiKey: this.apiKeyTonder,
+            successUrl: this.successUrl
+          });
           this.callBack(response);
           if (!process3ds.redirectTo3DS()) {
             resolve(response);
@@ -287,7 +293,7 @@ export class InlineCheckout {
 
           if("cards" in cards) {
 
-            const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
+            const cardsMapped: Card[] = cards.cards.map(mapCards)
   
             this.loadCardsList(cardsMapped)
 
@@ -435,7 +441,7 @@ export class InlineCheckout {
 
                 if("cards" in cards) {
 
-                  const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
+                  const cardsMapped: Card[] = cards.cards.map((card) => mapCards(card))
         
                   this.loadCardsList(cardsMapped)
 

package/src/helpers/template.ts

@@ -13,6 +13,7 @@ export type CollectorIds = {
 }
 
 export type Card = {
+  card_scheme: string,
   cardholder_name: string,
   card_number: string,
   expiration_month: string,
@@ -25,7 +26,7 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
   <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
   <div class="pay-new-card">
     <input checked id="new" name="card_selected" type="radio"/>
-    <label class="card-item-label" for="new">
+    <label class="card-item-label-new" for="new">
       <img class="card-image" src="${getCardType("XXXX")}" />
       <div class="card-number">Pagar con tarjeta</div>
     </label>
@@ -204,11 +205,24 @@ ${external ? `` : `<style>
 }
 
 .card-image {
-  width: 27px;
-  height: 20px;
+  width: 39px;
+  height: 24px;
   text-align: left;
 }
 
+.card-item-label-new {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
 </style>
 `}`
 
@@ -219,7 +233,7 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
     <div class="card-item">
         <input id="${card.skyflow_id}" name="card_selected" type="radio"/>
         <label class="card-item-label" for="${card.skyflow_id}">
-          <img class="card-image" src="${getCardType(card.card_number)}" />
+          <img class="card-image" src="${getCardType(card.card_scheme)}" />
           <div class="card-number">${card.card_number}</div>
           <div class="card-expiration">${card.expiration_month}/${card.expiration_year}</div>
         </label>
@@ -233,7 +247,7 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
 
       .card-item-label {
         display: flex;
-        justify-content: start;
+        justify-content: space-between;
         align-items: center;
         color: #1D1D1D;
         gap: 33% 20px;
@@ -266,8 +280,8 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
       }
 
       .card-image {
-        width: 27px;
-        height: 20px;
+        width: 39px;
+        height: 24px;
         text-align: left;
       }