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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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.6",
+    "@tonder.io/ionic-lite-sdk": "^0.0.12",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

package/src/classes/3dsHandler.ts

@@ -42,9 +42,7 @@ export class ThreeDSHandler {
   redirectTo3DS() {
     const url = this.payload?.next_action?.redirect_to_url?.url
     if (url) {
-      this.saveVerifyTransactionUrl()
-      window.open('@tonder/ionic-full-sdk://', '_system')
-      // window.open(url, '_blank');
+      this.saveVerifyTransactionUrl();
       return true
     } else {
       console.log('No redirection found');

package/src/classes/inlineCheckout.ts

@@ -10,6 +10,7 @@ import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorRespo
 import { Business, Customer, PaymentData, OrderItem } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
 import { CustomerRegisterResponse, StartCheckoutResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
 import { StartCheckoutRequest, CreatePaymentRequest, CreateOrderRequest } from '@tonder.io/ionic-lite-sdk/dist/types/requests';
+import { InCollectorContainer } from '../helpers/skyflow';
 
 export type InlineCheckoutConstructor = {
   returnUrl: string,
@@ -18,18 +19,15 @@ export type InlineCheckoutConstructor = {
   renderPaymentButton: boolean,
   callBack?: (params: any) => void,
   styles?: any,
-  form?: any,
-  totalElement?: any,
   containerId?: string,
-  collectorIds?: CollectorIds,
-  platforms?: string[]
+  collectorIds?: CollectorIds
 }
 
 export class InlineCheckout {
   paymentData = {}
   items = []
   baseUrl = "https://stage.tonder.io";
-  collectContainer: any = null
+  collectContainer: InCollectorContainer | null = null;
   cartTotal?: string | null | number
   apiKeyTonder: string
   returnUrl?: string
@@ -60,6 +58,7 @@ export class InlineCheckout {
   liteCheckout: LiteCheckout
   clientCards: Card[]
   radioChecked: string | null
+  fetchingPayment: boolean 
 
   constructor ({
     apiKey,
@@ -69,8 +68,7 @@ export class InlineCheckout {
     callBack = () => {},
     styles,
     containerId,
-    collectorIds,
-    platforms
+    collectorIds
   }: InlineCheckoutConstructor) {
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
@@ -78,7 +76,6 @@ export class InlineCheckout {
     this.renderPaymentButton = renderPaymentButton;
     this.callBack = callBack;
     this.customStyles = styles
-    this.platforms = platforms
 
     this.abortController = new AbortController()
 
@@ -109,6 +106,9 @@ export class InlineCheckout {
     }
     this.clientCards = []
     this.radioChecked = "new"
+    this.collectContainer = null;
+
+    this.fetchingPayment = false;
   }
 
   #mountPayButton() {
@@ -179,6 +179,11 @@ export class InlineCheckout {
     if(containerForm) {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
+    if(radio.id === "new") {
+      await this.#mountForm();
+    } else {
+      this.#unmountForm();
+    }
     this.radioChecked = radio.id;
   }
 
@@ -282,7 +287,7 @@ export class InlineCheckout {
 
           if("cards" in cards) {
 
-            const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+            const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
   
             this.loadCardsList(cardsMapped)
 
@@ -307,53 +312,99 @@ export class InlineCheckout {
   }
 
   removeCheckout() {
+
     this.injected = false
     this.cardsInjected = false
     // Cancel all requests
     this.abortController.abort(); 
     this.abortController = new AbortController();
-
     clearInterval(this.injectInterval);
     console.log("InlineCheckout removed from DOM and cleaned up.");
+
   }
 
-  async #checkout() {
-    try {
-      const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-      if(selector){
-        selector.disabled = true;
-      }
-    } catch (error) {
+  #unmountForm () {
+
+    this.injected = false
+
+    if(this.collectContainer) {
+      if("unmount" in this.collectContainer.elements.cardHolderNameElement) this.collectContainer.elements.cardHolderNameElement.unmount() 
+      if("unmount" in this.collectContainer.elements.cardNumberElement) this.collectContainer.elements.cardNumberElement.unmount()
+      if("unmount" in this.collectContainer.elements.expiryYearElement) this.collectContainer.elements.expiryYearElement.unmount()
+      if("unmount" in this.collectContainer.elements.expiryMonthElement) this.collectContainer.elements.expiryMonthElement.unmount()
+      if("unmount" in this.collectContainer.elements.cvvElement) this.collectContainer.elements.cvvElement.unmount()
     }
 
-    if(this.merchantData) {
+  }
 
-      if("openpay_keys" in this.merchantData) {
+  async #mountForm () {
 
-        const { openpay_keys, reference, business } = this.merchantData
+    const result = await this.#fetchMerchantData();
 
-        const total = Number(this.cartTotal)
+    if(result && "vault_id" in result) {
+      
+      const { vault_id, vault_url } = result;
 
-        let cardTokensSkyflowTonder: any = null;
+      this.collectContainer = await initSkyflow(
+        vault_id,
+        vault_url,
+        this.baseUrl,
+        this.abortController.signal,
+        this.customStyles,
+        this.collectorIds,
+        this.apiKeyTonder
+      );
 
-        if(this.radioChecked === "new") {
-          try {
-            const collectResponseSkyflowTonder = await this.collectContainer?.collect();
-            cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
-          } catch (error) {
-            showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-            throw error;
-          }
-          
-        } else {
+    }
 
-          cardTokensSkyflowTonder = {
-            skyflow_id: this.radioChecked
-          }
-          
+  }
+
+  async #checkout() {
+
+    try {
+
+      try {
+
+        const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+        
+        if(selector){
+          selector.disabled = true;
+          selector.innerHTML = "Cargando..."
         }
 
-        try {
+      } catch (error) { }
+
+      if(this.merchantData) {
+
+        if("openpay_keys" in this.merchantData) {
+
+          const { openpay_keys, reference, business } = this.merchantData
+
+          const total = Number(this.cartTotal)
+
+          let cardTokensSkyflowTonder: any = null;
+
+          if(this.radioChecked === "new") {
+
+            if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
+              try {
+                const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
+                cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
+              } catch (error) {
+                showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+                throw error;
+              }
+            } else {
+              showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+            }
+            
+          } else {
+
+            cardTokensSkyflowTonder = {
+              skyflow_id: this.radioChecked
+            }
+            
+          }
 
           let deviceSessionIdTonder: any;
 
@@ -384,7 +435,7 @@ export class InlineCheckout {
 
                 if("cards" in cards) {
 
-                  const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+                  const cardsMapped: Card[] = cards.cards.map(card => ({ ...card.fields }))
         
                   this.loadCardsList(cardsMapped)
 
@@ -453,7 +504,6 @@ export class InlineCheckout {
                 const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
                   routerItems
                 );
-    
                 if (jsonResponseRouter) {
                   try {
                     const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
@@ -469,14 +519,16 @@ export class InlineCheckout {
               }
             }
           }
-        } catch (error) {
-          console.log(error);
-          showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-          throw error;
         }
-
+      } else {
+        showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
       }
-      
+    } catch (error) {
+      console.log(error);
+      showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+      throw error;
+    } finally {
+      this.fetchingPayment = false;
     }
   };
 }

package/src/helpers/skyflow.ts

@@ -5,6 +5,13 @@ import { CollectorIds } from "./template";
 import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container"
 import ComposableContainer from "skyflow-js/types/core/external/collect/compose-collect-container"
 import RevealContainer from "skyflow-js/types/core/external/reveal/reveal-container"
+import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
+import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
+
+export type InCollectorContainer = { 
+  container: CollectorContainer | ComposableContainer | RevealContainer, 
+  elements: { [ index: string ]: CollectElement | ComposableElement | RevealElement }
+}
 
 export async function initSkyflow(
   vaultId: string,
@@ -14,7 +21,7 @@ export async function initSkyflow(
   customStyles: any = {},
   collectorIds: CollectorIds,
   apiKey: string
-): Promise <CollectorContainer | ComposableContainer | RevealContainer> {
+): Promise <InCollectorContainer> {
   const skyflow = await Skyflow.init({
     vaultID: vaultId,
     vaultURL: vaultUrl,
@@ -59,7 +66,7 @@ export async function initSkyflow(
     },
   };
 
-  const cardHolderNameElement: any = await collectContainer.create({
+  const cardHolderNameElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cardholder_name",
     ...collectStylesOptions,
@@ -69,10 +76,12 @@ export async function initSkyflow(
     validations: [lengthMatchRule],
   });
 
-  cardHolderNameElement.setError('Inválido')
+  if("setError" in cardHolderNameElement) {
+    cardHolderNameElement.setError('Inválido')
+  }
 
   // Create collect elements.
-  const cardNumberElement: any = await collectContainer.create({
+  const cardNumberElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "card_number",
     ...collectStylesOptions,
@@ -85,9 +94,11 @@ export async function initSkyflow(
     type: Skyflow.ElementType.CARD_NUMBER,
   });
 
-  cardNumberElement.setError('Inválido')
+  if("setError" in cardNumberElement) {
+    cardNumberElement.setError('Inválido')
+  }
 
-  const cvvElement: any = await collectContainer.create({
+  const cvvElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
     ...collectStylesOptions,
@@ -95,10 +106,12 @@ export async function initSkyflow(
     placeholder: "3-4 dígitos",
     type: Skyflow.ElementType.CVV,
   });
+  
+  if("setError" in cvvElement) {
+    cvvElement.setError('Inválido')
+  }
 
-  cvvElement.setError('Inválido')
-
-  const expiryMonthElement: any = await collectContainer.create({
+  const expiryMonthElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
     ...collectStylesOptions,
@@ -107,9 +120,11 @@ export async function initSkyflow(
     type: Skyflow.ElementType.EXPIRATION_MONTH,
   });
 
-  expiryMonthElement.setError('Inválido')
+  if("setError" in expiryMonthElement) {
+    expiryMonthElement.setError('Inválido')
+  }
 
-  const expiryYearElement: any = await collectContainer.create({
+  const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
     ...collectStylesOptions,
@@ -118,7 +133,9 @@ export async function initSkyflow(
     type: Skyflow.ElementType.EXPIRATION_YEAR,
   });
 
-  expiryYearElement.setError('Inválido')
+  if("setError" in expiryYearElement) {
+    expiryYearElement.setError('Inválido')
+  }
 
   await mountElements(
     { id: collectorIds.cardNumber, element: cardNumberElement },
@@ -128,7 +145,16 @@ export async function initSkyflow(
     { id: collectorIds.holderName, element: cardHolderNameElement }
   )
 
-  return collectContainer
+  return { 
+    container: collectContainer, 
+    elements: { 
+      cardHolderNameElement, 
+      cardNumberElement, 
+      cvvElement, 
+      expiryMonthElement, 
+      expiryYearElement 
+    } 
+  }
 }
 
 async function mountElements(

package/src/helpers/template.ts

@@ -38,7 +38,12 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
       <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
       <div id="${collectorIds.cvv}" class="empty-div"></div>
     </div>
-    <div class="checkbox"><input id="save-checkout-card" type="checkbox"><label for="save-checkout-card">Guardar tarjeta para futuros pagos</label></div>
+    <div class="checkbox">
+      <input id="save-checkout-card" type="checkbox">
+      <label for="save-checkout-card">
+        Guardar tarjeta para futuros pagos
+      </label>
+    </div>
     <div id="${collectorIds.msgError}"></div>
     <div id="${collectorIds.msgNotification}"></div>
   </div>
@@ -47,6 +52,8 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
 
 ${external ? `` : `<style>
 
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
@@ -115,6 +122,10 @@ ${external ? `` : `<style>
   display: none;
 }
 
+.pay-button:disabled, pay-button[disabled] {
+  background-color: #B9B9B9;
+}
+
 .lds-dual-ring {
   display: inline-block;
   width: 14px;
@@ -131,6 +142,7 @@ ${external ? `` : `<style>
   border-color: #fff transparent #fff transparent;
   animation: lds-dual-ring 1.2s linear infinite;
 }
+
 @keyframes lds-dual-ring {
   0% {
     transform: rotate(0deg);
@@ -163,12 +175,7 @@ ${external ? `` : `<style>
   font-size: '12px';
   font-weight: '500';
   color: #1D1D1D;
-  font-family: "Inter", sans-serif;
-}
-
-@font-face {
-  font-family: Inter;
-  src: url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+  font-family: "Inter", sans-serif !important;
 }
 
 .checkbox {
@@ -192,7 +199,8 @@ ${external ? `` : `<style>
 }
 
 .pay-new-card .card-number {
-  font-size: 14px;
+  font-size: 16px;
+  font-family: "Inter", sans-serif !important;
 }
 
 .card-image {
@@ -221,6 +229,8 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
   const cardItemStyle = external ? '' : `
     <style>
 
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
       .card-item-label {
         display: flex;
         justify-content: start;
@@ -246,11 +256,13 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
       }
 
       .card-item .card-number {
-        font-size: 14px;
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
       }
 
       .card-item .card-expiration {
-        font-size: 14px;
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
       }
 
       .card-image {