@tonder.io/ionic-full-sdk 0.0.34-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.34-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.33-beta",
+    "@tonder.io/ionic-lite-sdk": "^0.0.34-beta",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

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);
@@ -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";
@@ -361,7 +365,7 @@ export class InlineCheckout {
     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
@@ -415,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()
@@ -449,6 +478,8 @@ export class InlineCheckout {
         }
         
       }
+      
+      await this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -468,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();
@@ -513,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();
@@ -530,7 +561,7 @@ export class InlineCheckout {
     try {
 
       const selector: any = document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);
-      
+
       if(selector){
         selector.disabled = disabled;
         selector.innerHTML = text
@@ -545,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)
@@ -697,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,
@@ -721,7 +753,11 @@ 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.handleCheckoutRouter(

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/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;
 }