@tonder.io/ionic-full-sdk 0.0.34-beta → 0.0.36-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.36-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/3dsHandler.ts

@@ -65,19 +65,6 @@ 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) {

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 '@tonder.io/ionic-lite-sdk/dist/types/commons';
 
 export type InlineCheckoutConstructor = {
   returnUrl: string,
@@ -25,7 +26,8 @@ export type InlineCheckoutConstructor = {
   containerId?: string,
   collectorIds?: CollectorIds,
   isOpenPaySandbox?: boolean,
-  isEnrollmentCard?: boolean
+  isEnrollmentCard?: boolean,
+  mode?: 'production' | 'stage' | 'sandbox' | 'development',
 }
 
 export class InlineCheckout {
@@ -59,6 +61,8 @@ export class InlineCheckout {
   containerId: string
   injected: boolean
   cardsInjected: boolean
+  apmsInjected = false
+  apmsData: APM[] = []
   collectorIds: CollectorIds
   platforms?: string[]
   liteCheckout: LiteCheckout
@@ -70,6 +74,7 @@ export class InlineCheckout {
   card = {}
   currency: string = ""
   isEnrollmentCard: boolean = false
+  mode: 'production' | 'stage' | 'sandbox' | 'development' = "stage"
 
   constructor ({
     apiKey,
@@ -83,7 +88,9 @@ export class InlineCheckout {
     isOpenPaySandbox,
     isEnrollmentCard,
     renderSaveCardButton,
+    mode = 'stage',
   }: InlineCheckoutConstructor) {
+    this.mode = mode
     this.apiKeyTonder = apiKey;
     this.returnUrl = returnUrl;
     this.successUrl = successUrl;
@@ -91,7 +98,7 @@ export class InlineCheckout {
     this.renderSaveCardButton = renderSaveCardButton;
     this.callBack = callBack;
     this.customStyles = styles
-
+    this.baseUrl = this.#getBaseUrl()
     this.abortController = new AbortController()
 
     this.liteCheckout = new LiteCheckout({
@@ -118,7 +125,8 @@ export class InlineCheckout {
       tonderPayButton: "tonderPayButton",
       msgError: "msgError",
       msgNotification: "msgNotification",
-      tonderSaveCardButton: "tonderSaveCardButton"
+      tonderSaveCardButton: "tonderSaveCardButton",
+      apmsListContainer: "apmsListContainer"
     }
     this.clientCards = []
     this.radioChecked = "new"
@@ -130,6 +138,17 @@ export class InlineCheckout {
     this.isEnrollmentCard = isEnrollmentCard === undefined ? false : isEnrollmentCard
   }
 
+  #getBaseUrl() {
+    const modeUrls = {
+      'production': 'https://app.tonder.io',
+      'sandbox': 'https://sandbox.tonder.io',
+      'stage': 'https://stage.tonder.io',
+      'development': 'http://localhost:8000',
+    };
+
+    return modeUrls[this.mode] || modeUrls['stage']
+  }
+
   #mountPayButton() {
     if (!this.renderPaymentButton) return;
 
@@ -251,7 +270,6 @@ export class InlineCheckout {
         this.#handleCard(data)
         const response: ErrorResponse | StartCheckoutResponse | false | undefined = await this.#checkout()
         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) {
@@ -263,7 +281,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 +379,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
@@ -382,8 +400,7 @@ export class InlineCheckout {
   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(),
+        checkout_id: response.checkout?.id,
       };
       const routerResponse = await this.liteCheckout.handleCheckoutRouter(
         routerItems
@@ -415,6 +432,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 +491,7 @@ export class InlineCheckout {
         }
         
       }
+      await this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -468,6 +511,7 @@ export class InlineCheckout {
 
     this.injected = false
     this.cardsInjected = false
+    this.apmsInjected = false
     // Cancel all requests
     this.abortController.abort(); 
     this.abortController = new AbortController();
@@ -548,7 +592,6 @@ export class InlineCheckout {
   
           if("auth_token" in customerResponse) {
             const { auth_token, id: cutomerId } = customerResponse;
-            console.log("cardTokensSkyflowTonder: ", cardTokensSkyflowTonder)
             await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
             showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
           }
@@ -697,10 +740,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 +765,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/constants.ts

@@ -0,0 +1,64 @@
+enum PAYMENT_METHOD {
+    SORIANA =  "SORIANA",
+    OXXO = "OXXO",
+    SPEI= "SPEI",
+    CODI= "CODI",
+    MERCADOPAGO= "MERCADOPAGO",
+    PAYPAL= "PAYPAL",
+    COMERCIALMEXICANA= "COMERCIALMEXICANA",
+    BANCOMER= "BANCOMER",
+    WALMART= "WALMART",
+    BODEGA= "BODEGA",
+    SAMSCLUB= "SAMSCLUB",
+    SUPERAMA= "SUPERAMA",
+    CALIMAX= "CALIMAX",
+    EXTRA= "EXTRA",
+    CIRCULOK= "CIRCULOK",
+    SEVEN11= "7ELEVEN",
+    TELECOMM= "TELECOMM",
+    BANORTE= "BANORTE",
+    BENAVIDES= "BENAVIDES",
+    DELAHORRO= "DELAHORRO",
+    ELASTURIANO= "ELASTURIANO",
+    WALDOS= "WALDOS",
+    ALSUPER= "ALSUPER",
+    KIOSKO= "KIOSKO",
+    STAMARIA= "STAMARIA",
+    LAMASBARATA= "LAMASBARATA",
+    FARMROMA= "FARMROMA",
+    FARMUNION= "FARMUNION",
+    FARMATODO= "FARMATODO",
+    SFDEASIS= "SFDEASIS",
+    FARM911= "FARM911",
+    FARMECONOMICAS= "FARMECONOMICAS",
+    FARMMEDICITY= "FARMMEDICITY",
+    RIANXEIRA= "RIANXEIRA",
+    WESTERNUNION= "WESTERNUNION",
+    ZONAPAGO= "ZONAPAGO",
+    CAJALOSANDES= "CAJALOSANDES",
+    CAJAPAITA= "CAJAPAITA",
+    CAJASANTA= "CAJASANTA",
+    CAJASULLANA= "CAJASULLANA",
+    CAJATRUJILLO= "CAJATRUJILLO",
+    EDPYME= "EDPYME",
+    KASNET= "KASNET",
+    NORANDINO= "NORANDINO",
+    QAPAQ= "QAPAQ",
+    RAIZ= "RAIZ",
+    PAYSER= "PAYSER",
+    WUNION= "WUNION",
+    BANCOCONTINENTAL= "BANCOCONTINENTAL",
+    GMONEY= "GMONEY",
+    GOPAY= "GOPAY",
+    WU= "WU",
+    PUNTOSHEY= "PUNTOSHEY",
+    AMPM= "AMPM",
+    JUMBOMARKET= "JUMBOMARKET",
+    SMELPUEBLO= "SMELPUEBLO",
+    BAM= "BAM",
+    REFACIL= "REFACIL",
+    ACYVALORES= "ACYVALORES"
+  }
+  
+  export { PAYMENT_METHOD }
+  

package/src/helpers/template.ts

@@ -1,4 +1,5 @@
-import { getCardType } from './utils';
+import { APM } from '@tonder.io/ionic-lite-sdk/dist/types/commons';
+import { getCardType, getPaymentMethodDetails } from './utils';
 
 export type CollectorIds = {
   holderName: string,
@@ -10,7 +11,8 @@ export type CollectorIds = {
   tonderSaveCardButton?: string,
   msgError: string,
   msgNotification: string,
-  cardsListContainer: string
+  cardsListContainer: string,
+  apmsListContainer?: string
 }
 
 export type Card = {
@@ -22,7 +24,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 +55,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>
@@ -72,6 +77,10 @@ ${external ? `` : `<style>
   font-family: "Inter", sans-serif !important;
 }
 
+.container-form {
+  padding: 25px 21px 0px 21px;
+}
+
 .expiration-year .error-custom-inputs-tonder {
   background-color: white;
   position: absolute;
@@ -86,13 +95,17 @@ ${external ? `` : `<style>
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
+  padding: 30px 0px 30px 0px;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
   max-width: 600px;
   border: solid 1px #e3e3e3;
 }
 
+.container-pay-button{
+  padding: ${!!data['renderPaymentButton'] ? '30px 30px':''};
+}
+
 .collect-row {
   display: flex !important;
   justify-content: space-between !important;
@@ -220,10 +233,18 @@ ${external ? `` : `<style>
 .cards-list-container {
   display: flex;
   flex-direction: column;
-  padding: 0px 10px 0px 10px;
+  padding: 0px;
   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';
@@ -235,6 +256,8 @@ ${external ? `` : `<style>
 .checkbox {
   margin-top: 10px;
   margin-bottom: 20px;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
   width: 100%;
   text-align: left;
 }
@@ -244,12 +267,12 @@ ${external ? `` : `<style>
   justify-content: start;
   align-items: center;
   color: #1D1D1D;
-  gap: 33% 20px;
+  gap: 33% 15px;
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
+  padding: 0px 30px;
+  width: 100%;
+  position: relative;
 }
 
 .pay-new-card .card-number {
@@ -271,9 +294,7 @@ ${external ? `` : `<style>
   gap: 33% 20px;
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
+  width: 100%;
 }
 
 .card_selected {
@@ -391,18 +412,19 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
         align-items: center;
         color: #1D1D1D;
         gap: 33% 20px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
-        width: 90%;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        width: 100%;
       }
 
       .card-item {
+        position: relative;
         display: flex;
         justify-content: start;
         align-items: center;
-        gap: 33% 20px;
+        gap: 33% 15px;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0px 30px;
       }
 
       .card-item .card-number {
@@ -518,4 +540,165 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
   ${cardItemStyle}
   `
   return cardItem;
+}
+
+export const apmItemsTemplate = (external: boolean, apms: APM[]) => {
+  console.log("apms here****: ", apms)
+  const apmItemsHTML = apms.reduce((total, apm) => {
+    const apm_data = getPaymentMethodDetails(apm.payment_method);
+    return `
+    ${total}
+    <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;
 }