@tonder.io/ionic-full-sdk 0.0.33-beta → 0.0.35-beta

package/dist/types/commons.d.ts

@@ -39,3 +39,17 @@ export type PaymentData = {
         items: OrderItem[];
     };
 };
+export type TonderAPM = {
+    pk: string;
+    payment_method: string;
+    priority: number;
+    category: string;
+    unavailable_countries: string[];
+    status: string;
+};
+export type APM = {
+    id: string;
+    payment_method: string;
+    priority: number;
+    category: string;
+};

package/package.json

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

package/src/classes/3dsHandler.ts

@@ -65,6 +65,19 @@ export class ThreeDSHandler {
     }
   }
 
+  saveCheckoutId(checkoutId: any) {
+    localStorage.setItem('checkout_id', JSON.stringify(checkoutId))
+  }
+
+  removeCheckoutId() {
+    localStorage.removeItem("checkout_id")
+  }
+
+  getCurrentCheckoutId() {
+    const checkout_id = localStorage.getItem("checkout_id")
+    return checkout_id ? JSON.parse(checkout_id):null; // TODO: JSON.parse de una string?
+  }
+
   getUrlWithExpiration() {
     const status = this.getStorageItem();
     if(status) {
@@ -154,14 +167,13 @@ export class ThreeDSHandler {
 
   handleSuccessTransaction(response: any) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción autorizada exitosamente.');
+    console.log('Transacción autorizada.');
     return response;
   }
 
   handleDeclinedTransaction(response: any) {
     this.removeVerifyTransactionUrl();
-    console.log('Transacción rechazada.');
-    throw new Error("Transacción rechazada.");
+    return response;
   }
 
   // TODO: the method below needs to be tested with a real 3DS challenge
@@ -193,14 +205,16 @@ export class ThreeDSHandler {
     await this.verifyTransactionStatus();
   }
 
+  // TODO: This method could be removed
   async handleTransactionResponse(response: any) {
     const response_json = await response.json();
-    if (response_json.status === "Pending") {
+    if (response_json.status === "Pending"  && response_json.redirect_post_url) {
       return await this.handle3dsChallenge(response_json);
     } else if (["Success", "Authorized"].includes(response_json.status)) {
-      return this.handleSuccessTransaction(response);
+      return this.handleSuccessTransaction(response_json);
     } else {
-      return this.handleDeclinedTransaction(response);
+      this.handleDeclinedTransaction(response);
+      return response_json
     }
   }
 
@@ -221,17 +235,21 @@ export class ThreeDSHandler {
 
         if (response.status !== 200) {
           console.error('La verificación de la transacción falló.');
-          return
+          this.removeVerifyTransactionUrl();
+          return response
         }
 
         return await this.handleTransactionResponse(response);
       } catch (error) {
         console.error('Error al verificar la transacción:', error);
-        return error;
+        this.removeVerifyTransactionUrl();
       }
     } else {
       console.log('No verify_transaction_status_url found');
     }
   }
 
+  setPayload = (payload: any) => {
+    this.payload = payload
+  }
 }

package/src/classes/inlineCheckout.ts

@@ -1,4 +1,4 @@
-import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
+import { apmItemsTemplate, Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
 import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
 import {
   showError,
@@ -13,6 +13,7 @@ import { Business, Customer, PaymentData, OrderItem } from '@tonder.io/ionic-lit
 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';
+import { APM } from 'src/types/commons';
 
 export type InlineCheckoutConstructor = {
   returnUrl: string,
@@ -59,6 +60,8 @@ export class InlineCheckout {
   containerId: string
   injected: boolean
   cardsInjected: boolean
+  apmsInjected = false
+  apmsData: APM[] = []
   collectorIds: CollectorIds
   platforms?: string[]
   liteCheckout: LiteCheckout
@@ -118,7 +121,8 @@ export class InlineCheckout {
       tonderPayButton: "tonderPayButton",
       msgError: "msgError",
       msgNotification: "msgNotification",
-      tonderSaveCardButton: "tonderSaveCardButton"
+      tonderSaveCardButton: "tonderSaveCardButton",
+      apmsListContainer: "apmsListContainer"
     }
     this.clientCards = []
     this.radioChecked = "new"
@@ -172,7 +176,7 @@ export class InlineCheckout {
     if (!this.renderSaveCardButton) return;
 
     const saveButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);
-    
+
     if (!saveButton) {
       console.error("Save button not found");
       return;
@@ -180,9 +184,9 @@ export class InlineCheckout {
 
 
     saveButton.style.display = "block";
-    
+
     saveButton.textContent = `Guardar`;
-    
+
     saveButton.onclick = async (event) => {
       event.preventDefault();
       await this.#handleSaveCardClick(saveButton);
@@ -215,6 +219,31 @@ export class InlineCheckout {
     this.card = data?.card
   }
 
+  async handle3dsRedirect(response: ErrorResponse | StartCheckoutResponse | false | undefined) {
+    const iframe = response && 'next_action' in response ? response?.next_action?.iframe_resources?.iframe:null
+
+    if (iframe) {
+      this.process3ds.loadIframe()!.then(() => {
+        //TODO: Check if this will be necessary on the frontend side
+        // after some the tests in production, since the 3DS process
+        // doesn't works properly on the sandbox environment
+        // setTimeout(() => {
+        //   process3ds.verifyTransactionStatus();
+        // }, 10000);
+        this.process3ds.verifyTransactionStatus();
+      }).catch((error) => {
+        console.log('Error loading iframe:', error)
+      })
+    } else {
+      const redirectUrl = this.process3ds.getRedirectUrl()
+      if (redirectUrl) {
+        this.process3ds.redirectToChallenge()
+      } else {
+        return response;
+      }
+    }
+  }
+
   payment(data: any) {
     return new Promise(async (resolve, reject) => {
       try {
@@ -225,37 +254,12 @@ export class InlineCheckout {
         this.#handleCurrency(data)
         this.#handleCard(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
-        if (response) {
-          const process3ds = new ThreeDSHandler({ 
-            payload: response, 
-            baseUrl: this.baseUrl,
-            apiKey: this.apiKeyTonder,
-            successUrl: this.successUrl
-          });
-          this.callBack(response);
-          if("next_action" in response) {
-            const iframe = response?.next_action?.iframe_resources?.iframe
-            if (iframe) {
-              process3ds.loadIframe()?.then(() => {
-                //TODO: Check if this will be necessary on the frontend side
-                // after some the tests in production, since the 3DS process
-                // doesn't works properly on the sandbox environment
-                // setTimeout(() => {
-                //   process3ds.verifyTransactionStatus();
-                // }, 10000);
-                process3ds.verifyTransactionStatus();
-              }).catch((error) => {
-                console.log('Error loading iframe:', error)
-              })
-            } else {
-              const redirectUrl = process3ds.getRedirectUrl()
-              if (redirectUrl) {
-                process3ds.redirectToChallenge()
-              } else {
-                resolve(response);
-              }
-            }
-          }
+        this.process3ds.setPayload(response)
+        this.process3ds.saveCheckoutId(response && 'checkout_id' in response ? response.checkout_id:"")
+        this.callBack(response);
+        const payload = await this.handle3dsRedirect(response)
+        if (payload) {
+          resolve(response);
         }
       } catch (error) {
         reject(error);
@@ -263,7 +267,7 @@ export class InlineCheckout {
     });
   }
 
-  #mountRadioButtons (token: string) {
+  #mountRadioButtons (token: string = "") {
     const radioButtons: NodeListOf<HTMLElement> = document.getElementsByName(`card_selected`);
     for (const radio of radioButtons) {
       radio.style.display = "block";
@@ -358,11 +362,10 @@ export class InlineCheckout {
 
   injectCheckout() {
     if (this.injected) return
-    this.process3ds.verifyTransactionStatus()
     const injectInterval = setInterval(() => {
       const queryElement = document.querySelector(`#${this.containerId}`)
       if (queryElement) {
-        queryElement.innerHTML = cardTemplate(this.customStyles ? true : false, this.collectorIds, this.isEnrollmentCard)
+        queryElement.innerHTML = cardTemplate(this.customStyles ? true : false, this.collectorIds, this.isEnrollmentCard, { renderPaymentButton: this.renderPaymentButton })
         this.#mountTonder();
         clearInterval(injectInterval);
         this.injected = true
@@ -370,6 +373,30 @@ export class InlineCheckout {
     }, 500);
   }
 
+  async verify3dsTransaction () {
+    const result3ds = await this.process3ds.verifyTransactionStatus()
+    const resultCheckout = await this.resumeCheckout(result3ds)
+    this.process3ds.setPayload(resultCheckout)
+    if (resultCheckout && 'is_route_finished' in resultCheckout && 'provider' in resultCheckout && resultCheckout.provider === 'tonder') {
+      return resultCheckout
+    }
+    return this.handle3dsRedirect(resultCheckout)
+  }
+
+  async resumeCheckout(response: any) {
+    if (["Failed", "Declined", "Cancelled"].includes(response?.status)) {
+      const routerItems = {
+        // TODO: Replace this with reponse.checkout_id
+        checkout_id: this.process3ds.getCurrentCheckoutId(),
+      };
+      const routerResponse = await this.liteCheckout.handleCheckoutRouter(
+        routerItems
+      );
+      return routerResponse
+    }
+    return response
+  }
+
   loadCardsList (cards: Card[], token: string) {
     if(this.cardsInjected) return;
     const injectInterval = setInterval(() => {
@@ -392,6 +419,31 @@ export class InlineCheckout {
     return await this.liteCheckout.customerRegister(email);
   }
 
+  async #mountAPMs(){
+    try{
+      const apms: APM[] = await this.liteCheckout.getActiveAPMs();
+      if(apms.length > 0){
+        this.apmsData = apms;
+        this.#loadAPMList(apms)
+      }
+    }catch(e){
+      console.warn("Error getting APMS")
+    }
+  }
+
+  #loadAPMList(apms: APM[]) {
+    if (this.apmsInjected) return;
+    const injectInterval = setInterval(() => {
+      const queryElement = document.querySelector(`#${this.collectorIds.apmsListContainer}`);
+      if (queryElement && this.injected) {
+        queryElement.innerHTML = apmItemsTemplate(this.customStyles ? true : false, apms);
+        clearInterval(injectInterval);
+        this.#mountRadioButtons();
+        this.apmsInjected = true;
+      }
+    }, 500);
+  }
+
   async #mountTonder() {
     if(this.isEnrollmentCard){
       this.#mountSaveCardButton()
@@ -426,6 +478,8 @@ export class InlineCheckout {
         }
         
       }
+      
+      await this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -445,6 +499,7 @@ export class InlineCheckout {
 
     this.injected = false
     this.cardsInjected = false
+    this.apmsInjected = false
     // Cancel all requests
     this.abortController.abort(); 
     this.abortController = new AbortController();
@@ -490,7 +545,6 @@ export class InlineCheckout {
   }
 
   async #getCardTokens(tonderButton: string){
-    console.log("this.collectContainer: ", this.collectContainer)
     if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
       try {
         const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
@@ -507,7 +561,7 @@ export class InlineCheckout {
     try {
 
       const selector: any = document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);
-      
+
       if(selector){
         selector.disabled = disabled;
         selector.innerHTML = text
@@ -522,7 +576,7 @@ export class InlineCheckout {
         if(this.merchantData && "openpay_keys" in this.merchantData) {
           const cardTokensSkyflowTonder: any = await this.#getCardTokens(this.collectorIds.tonderSaveCardButton!);
           const customerResponse : CustomerRegisterResponse | ErrorResponse = await this.getCustomer(this.email);
-  
+
           if("auth_token" in customerResponse) {
             const { auth_token, id: cutomerId } = customerResponse;
             console.log("cardTokensSkyflowTonder: ", cardTokensSkyflowTonder)
@@ -674,10 +728,11 @@ export class InlineCheckout {
                 const jsonResponsePayment = await this.liteCheckout.createPayment(
                   paymentItems
                 );
-    
+
+                const selected_apm: APM | undefined | null = this.apmsData ? this.apmsData.find((iapm) => iapm.id ===  this.radioChecked):null;
+               
                 // Checkout router
                 const routerItems: StartCheckoutRequest = {
-                  card: cardTokensSkyflowTonder,
                   name: this.firstName,
                   last_name: this.lastName ?? "",
                   email_client: this.email,
@@ -698,10 +753,14 @@ export class InlineCheckout {
                   source: 'sdk',
                   metadata: this.metadata,
                   browser_info: getBrowserInfo(),
-                  currency: this.currency
+                  currency: this.currency,
+                  ...( !!selected_apm
+                    ? {payment_method: selected_apm.payment_method}
+                    : {card: cardTokensSkyflowTonder}
+                  )
                 };
                 
-                const jsonResponseRouter = await this.liteCheckout.startCheckoutRouter(
+                const jsonResponseRouter = await this.liteCheckout.handleCheckoutRouter(
                   routerItems
                 );
                 

package/src/helpers/template.ts

@@ -1,4 +1,6 @@
+import { APM } from 'src/types/commons';
 import { getCardType } from './utils';
+import { getPaymentMethodDetails } from '@tonder.io/ionic-lite-sdk/dist/helpers/utils';
 
 export type CollectorIds = {
   holderName: string,
@@ -10,7 +12,8 @@ export type CollectorIds = {
   tonderSaveCardButton?: string,
   msgError: string,
   msgNotification: string,
-  cardsListContainer: string
+  cardsListContainer: string,
+  apmsListContainer?: string
 }
 
 export type Card = {
@@ -22,7 +25,7 @@ export type Card = {
   skyflow_id: string
 }
 
-export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEnrollmentCard: boolean = false) => `
+export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEnrollmentCard: boolean = false, data: {renderPaymentButton?: boolean} = {}) => `
 <div class="container-tonder">
   <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
   ${!isEnrollmentCard ? `
@@ -53,8 +56,11 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEn
     <div id="${collectorIds.msgError}"></div>
     <div id="${collectorIds.msgNotification}"></div>
   </div>
-  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
-  <button id="${collectorIds.tonderSaveCardButton ? collectorIds.tonderSaveCardButton:''}" class="save-card-button">Guardar</button>
+  <div id="apmsListContainer" class="apms-list-container"></div>
+  <div class="container-pay-button">
+    <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
+    <button id="${collectorIds.tonderSaveCardButton ? collectorIds.tonderSaveCardButton:''}" class="save-card-button">Guardar</button>
+  </div>
 </div>
 
 ${external ? `` : `<style>
@@ -93,6 +99,10 @@ ${external ? `` : `<style>
   border: solid 1px #e3e3e3;
 }
 
+.container-pay-button{
+  padding: ${!!data['renderPaymentButton'] ? '30px 25px':''};
+}
+
 .collect-row {
   display: flex !important;
   justify-content: space-between !important;
@@ -224,6 +234,14 @@ ${external ? `` : `<style>
   gap: 33% 20px;
 }
 
+.apms-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 33% 20px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
 .checkbox label {
   margin-left: 10px;
   font-size: '12px';
@@ -518,4 +536,164 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
   ${cardItemStyle}
   `
   return cardItem;
+}
+
+export const apmItemsTemplate = (external: boolean, apms: APM[]) => {
+
+  const apmItemsHTML = apms.reduce((_, apm) => {
+    const apm_data = getPaymentMethodDetails(apm.payment_method);
+    return `
+    <div class="apm-item" id="card_container-${apm.id}">
+        <input id="${apm.id}" class="card_selected" name="card_selected" type="radio"/>
+        <label class="apm-item-label" for="${apm.id}">
+          <div class="apm-image">
+            <div class="apm-image-border"></div>
+            <img src="${apm_data.icon}" />
+          </div>
+          <div class="apm-name">${apm_data.label}</div>
+        </label>
+    </div>`
+  }, ``);
+
+  const apmItemStyle = external ? '' :`
+    <style>
+      .apm-item-label {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 33% 10px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        width: 100%;
+      }
+
+      .apm-item {
+        position: relative;
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 15px;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0px 30px;
+      }
+
+      .apm-item:first-child {
+        border-top: 1px solid #e2e8f0;
+      }
+
+      .apm-item .apm-name {
+        font-size: 16px;
+      }
+      .apm-image {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .apm-image img {
+        width: auto;
+        height: 30px;
+      }
+      .apm-image-border{
+        position: absolute;
+        border: 1px solid #bababa36;
+        border-radius: 4px;
+        pointer-events: none;
+        box-sizing: border-box;
+        width: 100%;
+        height: 97%;
+      }
+
+      .card_selected {
+        position: relative;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        border: 1px #bababa solid;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 0;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked {
+        border: 1px #3bc635 solid;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked:before {
+        content: "";
+        border: 1px #3bc635 solid;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 50;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:hover:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        opacity: 10;
+      }
+
+    </style>
+  `
+  const apmItem = `
+  ${apmItemsHTML}
+  ${apmItemStyle}
+  `
+  return apmItem;
 }

package/src/index-dev.js

@@ -102,7 +102,9 @@ const inlineCheckout = new InlineCheckout({
 });
 
 inlineCheckout.injectCheckout();
-
+inlineCheckout.verify3dsTransaction().then(response => {
+  console.log('Verify 3ds response', response)
+})
 document.addEventListener('DOMContentLoaded', function() {
   const payButton = document.getElementById('pay-button');
   payButton.addEventListener('click', async function() {

package/src/types/commons.ts

@@ -41,4 +41,20 @@ export type PaymentData = {
         total: string | number,
         items: OrderItem[]
     }
+}
+
+export type TonderAPM = {
+    pk: string;
+    payment_method: string;
+    priority: number;
+    category: string;
+    unavailable_countries: string[];
+    status: string;
+}
+
+export type APM = {
+    id: string;
+    payment_method: string;
+    priority: number;
+    category: string;
 }