@tonder.io/ionic-full-sdk 0.0.58 → 0.0.59-beta.develop.b30cdb2

package/dist/classes/3dsHandler.d.ts

@@ -0,0 +1,39 @@
+import { CustomizationOptions } from "@tonder.io/ionic-lite-sdk/dist/types/commons";
+type ThreeDSHandlerContructor = {
+    payload?: any;
+    apiKey?: string;
+    baseUrl?: string;
+    customization?: CustomizationOptions;
+    tdsIframeId?: string;
+    callBack?: (params: any) => any;
+};
+export declare class ThreeDSHandler {
+    baseUrl?: string;
+    apiKey?: string;
+    payload?: any;
+    localStorageKey: string;
+    customization?: CustomizationOptions;
+    callBack?: (params: any) => any;
+    tdsIframeId?: string;
+    constructor({ payload, apiKey, baseUrl, customization, tdsIframeId, callBack }: ThreeDSHandlerContructor);
+    setStorageItem(data: any): void;
+    getStorageItem(): string | null;
+    removeStorageItem(): void;
+    saveVerifyTransactionUrl(): void;
+    saveUrlWithExpiration(url: string): void;
+    getUrlWithExpiration(): any;
+    removeVerifyTransactionUrl(): void;
+    getVerifyTransactionUrl(): string | null;
+    loadIframe(): Promise<unknown> | undefined;
+    getRedirectUrl(): any;
+    redirectToChallenge(): void;
+    getURLParameters(): any;
+    handleSuccessTransaction(response: any): any;
+    handleDeclinedTransaction(response: any): any;
+    handle3dsChallenge(response_json: any): Promise<void>;
+    handleTransactionResponse(response: any): Promise<any>;
+    requestTransactionStatus(): Promise<any>;
+    verifyTransactionStatus(): Promise<any>;
+    setPayload: (payload: any) => void;
+}
+export {};

package/dist/classes/checkout.d.ts

@@ -0,0 +1,31 @@
+import { CheckoutType } from "../types/commons";
+export declare class Checkout {
+    url: string;
+    apiKey?: string;
+    type: string;
+    backgroundColor: string;
+    color: string;
+    params: string;
+    order: any;
+    buttonText: string;
+    cb: (params: any) => void;
+    tonderButton: any;
+    constructor({ apiKey, type, backgroundColor, color, cb, url }: CheckoutType);
+    generateButton: (buttonText: string) => void;
+    getButton: ({ buttonText }: {
+        buttonText: string;
+    }) => any;
+    mountButton: ({ buttonText }: {
+        buttonText: string;
+    }) => void;
+    stylishButton: (element: HTMLElement) => void;
+    setOrder: ({ products, email, shippingCost }: {
+        products: any;
+        email: string;
+        shippingCost: string;
+    }) => any;
+    openTabListener: (tab: any, button: HTMLButtonElement) => void;
+    openCheckout: () => void;
+    getUrlParams: () => string;
+    receiveMessage(event: any): void;
+}

package/dist/helpers/constants.d.ts

@@ -58,6 +58,9 @@ declare enum PAYMENT_METHOD {
     SMELPUEBLO = "SMELPUEBLO",
     BAM = "BAM",
     REFACIL = "REFACIL",
-    ACYVALORES = "ACYVALORES"
+    ACYVALORES = "ACYVALORES",
+    SAFETYPAYCASH = "SAFETYPAYCASH",
+    SAFETYPAYTRANSFER = "SAFETYPAYTRANSFER",
+    NEOSURF = "NEOSURF"
 }
 export { PAYMENT_METHOD };

package/dist/helpers/template.d.ts

@@ -39,6 +39,7 @@ export declare const cardItemsTemplate: (data: {
     renderPaymentButton: boolean;
     customStyles: any;
     customization?: IInlineCustomizationOptions;
+    hasCOF?: boolean;
 }) => string;
 export declare const apmItemsTemplate: (data: {
     apms: ITonderPaymentMethod[];

package/dist/index.js

@@ -1 +1 @@
-import n from"lodash.get";import t from"skyflow-js";import{BaseInlineCheckout as e}from"@tonder.io/ionic-lite-sdk";import o from"accordion-js";function i(n,t,e,o){return new(e||(e=Promise))((function(i,l){function a(n){try{s(o.next(n))}catch(n){l(n)}}function r(n){try{s(o.throw(n))}catch(n){l(n)}}function s(n){var t;n.done?i(n.value):(t=n.value,t instanceof e?t:new e((function(n){n(t)}))).then(a,r)}s((o=o.apply(n,t||[])).next())}))}function l(n,t,e,o){if("a"===e&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?n!==t||!o:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?o:"a"===e?o.call(n):o?o.value:t.get(n)}function a(n,t,e,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,e):i?i.value=e:t.set(n,e),e}var r;"function"==typeof SuppressedError&&SuppressedError,function(n){n.SORIANA="SORIANA",n.OXXO="OXXO",n.SPEI="SPEI",n.CODI="CODI",n.OXXOPAY="OXXOPAY",n.MERCADOPAGO="MERCADOPAGO",n.PAYPAL="PAYPAL",n.COMERCIALMEXICANA="COMERCIALMEXICANA",n.BANCOMER="BANCOMER",n.WALMART="WALMART",n.BODEGA="BODEGA",n.SAMSCLUB="SAMSCLUB",n.SUPERAMA="SUPERAMA",n.CALIMAX="CALIMAX",n.EXTRA="EXTRA",n.CIRCULOK="CIRCULOK",n.SEVEN11="7ELEVEN",n.TELECOMM="TELECOMM",n.BANORTE="BANORTE",n.BENAVIDES="BENAVIDES",n.DELAHORRO="DELAHORRO",n.ELASTURIANO="ELASTURIANO",n.WALDOS="WALDOS",n.ALSUPER="ALSUPER",n.KIOSKO="KIOSKO",n.STAMARIA="STAMARIA",n.LAMASBARATA="LAMASBARATA",n.FARMROMA="FARMROMA",n.FARMUNION="FARMUNION",n.FARMATODO="FARMATODO",n.SFDEASIS="SFDEASIS",n.FARM911="FARM911",n.FARMECONOMICAS="FARMECONOMICAS",n.FARMMEDICITY="FARMMEDICITY",n.RIANXEIRA="RIANXEIRA",n.WESTERNUNION="WESTERNUNION",n.ZONAPAGO="ZONAPAGO",n.CAJALOSANDES="CAJALOSANDES",n.CAJAPAITA="CAJAPAITA",n.CAJASANTA="CAJASANTA",n.CAJASULLANA="CAJASULLANA",n.CAJATRUJILLO="CAJATRUJILLO",n.EDPYME="EDPYME",n.KASNET="KASNET",n.NORANDINO="NORANDINO",n.QAPAQ="QAPAQ",n.RAIZ="RAIZ",n.PAYSER="PAYSER",n.WUNION="WUNION",n.BANCOCONTINENTAL="BANCOCONTINENTAL",n.GMONEY="GMONEY",n.GOPAY="GOPAY",n.WU="WU",n.PUNTOSHEY="PUNTOSHEY",n.AMPM="AMPM",n.JUMBOMARKET="JUMBOMARKET",n.SMELPUEBLO="SMELPUEBLO",n.BAM="BAM",n.REFACIL="REFACIL",n.ACYVALORES="ACYVALORES"}(r||(r={}));const s={inputStyles:{base:{border:"1px solid #e0e0e0",padding:"10px 7px",borderRadius:"5px",color:"#1d1d1d",marginTop:"2px",backgroundColor:"white",fontFamily:'"Inter", sans-serif',fontSize:"16px","&::placeholder":{color:"#ccc"}},cardIcon:{position:"absolute",left:"6px",bottom:"calc(50% - 12px)"},complete:{color:"#4caf50"},empty:{},focus:{},invalid:{border:"1px solid #f44336"},global:{"@import":'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")'}},labelStyles:{base:{fontSize:"12px",fontWeight:"500",fontFamily:'"Inter", sans-serif'}},errorTextStyles:{base:{fontSize:"12px",fontWeight:"500",color:"#f44336",fontFamily:'"Inter", sans-serif'}},labels:{nameLabel:"Titular de la tarjeta",cardLabel:"Número de tarjeta",cvvLabel:"CVC/CVV",expiryDateLabel:"Fecha de expiración"},placeholders:{namePlaceholder:"Nombre como aparece en la tarjeta",cardPlaceholder:"1234 1234 1234 1234",cvvPlaceholder:"3-4 dígitos",expiryMonthPlaceholder:"MM",expiryYearPlaceholder:"AA"}};function d(n,t=null,e="msgError",o="msgErrorText"){try{const i=t&&"new"!==t;let l=document.getElementById(`${e}${i?t:""}`),a=document.getElementById(`${o}${i?t:""}`);a.innerHTML="",a.innerHTML=n,l.style.display="flex",setTimeout((function(){l.style.display="none",a.innerHTML=""}),3e4)}catch(n){console.warn("Error showing message error",n)}}const c=n=>"Visa"===n?"https://d35a75syrgujp0.cloudfront.net/cards/visa.png":"Mastercard"===n?"https://d35a75syrgujp0.cloudfront.net/cards/mastercard.png":"American Express"===n?"https://d35a75syrgujp0.cloudfront.net/cards/american_express.png":"https://d35a75syrgujp0.cloudfront.net/cards/default_card.png",p=n=>{const t=Object.assign({},n.fields),e=t.card_number.split("-"),o=e[e.length-1];return t.card_number=`••••${o}`,t},u=n=>n.trim().replace(/\s+/g,"");const h=(n={isEnrollmentCard:!1,collectorIds:{}})=>{var t,e,o,i,l,a,r,d,p,u,h,m,v,b,f,g,x,C,A,E,I,S,w,_,O,P,k,L,M,N,j,T,B,R,$,D,z,F,U,Y,H,G,X,W,K,V,q,J,Z,Q,nn,tn,en,on,ln,an,rn,sn,dn,cn,pn,un,hn,mn,vn,yn,bn,fn,gn,xn,Cn,An;return`\n<div class="container-tonder">\n  ${(null===(e=null===(t=n.customization)||void 0===t?void 0:t.saveCards)||void 0===e?void 0:e.showSaved)?`<div id="${n.collectorIds.cardsListContainer}" class="cards-list-container"></div>`:""}\n  ${n.isEnrollmentCard?"":`\n    <div class="pay-new-card">\n      <input checked id="new" class="card_selected" name="card_selected" type="radio"/>\n      <label class="card-item-label-new" for="new">\n        <img class="card-image" src="${c("XXXX")}" />\n        <div class="card-number">Pagar con tarjeta</div>\n      </label>\n    </div>\n  `}\n  <div class="container-form">\n    <div id="${n.collectorIds.holderName}" class="empty-div empty-div-card"></div>\n    <div id="${n.collectorIds.cardNumber}" class="empty-div empty-div-card"></div>\n    <div class="collect-row">\n      <div id="${n.collectorIds.expirationMonth}" class="empty-div empty-div-card"></div>\n      <div id="${n.collectorIds.expirationYear}" class="expiration-year"></div>\n      <div id="${n.collectorIds.cvv}" class="empty-div empty-div-card"></div>\n    </div>\n    ${!n.isEnrollmentCard&&(null===(i=null===(o=n.customization)||void 0===o?void 0:o.saveCards)||void 0===i?void 0:i.showSaveCardOption)?'\n      <div class="checkbox">\n        <input id="save-checkout-card" type="checkbox">\n        <label for="save-checkout-card">\n          Guardar tarjeta para futuros pagos\n        </label>\n      </div>\n    ':""}\n    ${y({showButton:n.isEnrollmentCard?n.renderSaveCardButton||!1:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:n.isEnrollmentCard?n.collectorIds.tonderSaveCardButton:n.collectorIds.tonderPayButton,classButton:n.isEnrollmentCard?"tndr-button save-card-button":"tndr-button pay-button hidden",msgErrorId:n.collectorIds.msgError,msgErrorTextId:n.collectorIds.msgErrorText,msgNotificationId:n.collectorIds.msgNotification,msgNotificationTextId:n.collectorIds.msgNotificationText,buttonText:n.isEnrollmentCard?"Guardar":null===(a=null===(l=n.customization)||void 0===l?void 0:l.paymentButton)||void 0===a?void 0:a.text})}\n  </div>\n  ${n.isEnrollmentCard?"":'\n    <div id="apmsListContainer" class="apms-list-container"></div>\n  '}\n  \n  <iframe class="tds-iframe" allowtransparency="true" id="${n.collectorIds.tdsIframe}"></iframe>\n</div>\n\n<style>\n\n@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n\n.tds-iframe {\n  border: none;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: transparent;\n}\n\n.error-custom-inputs-tonder {\n  background-color: white;\n  position: absolute;\n  left: 0px;\n  bottom: -1px;\n  width: 100%;\n  font-size: 12px;\n  color: red;\n  font-family: "Inter", sans-serif !important;\n}\n\n.container-form {\n  padding: 25px 30px 0px 30px;\n}\n\n#${n.collectorIds.tdsIframe} {\n  display: none;\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  inset: 0px;\n}\n\n.expiration-year .error-custom-inputs-tonder {\n  background-color: white;\n  position: absolute;\n  left: 0px;\n  bottom: 3px;\n  width: 100%;\n  font-size: 12px;\n  color: red;\n  font-family: "Inter", sans-serif !important;\n}\n\n.container-tonder {\n  background-color: #F9F9F9;\n  margin: 0 auto !important;\n  padding: 30px 0px 30px 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-out;\n  max-width: 600px;\n  border: solid 1px #e3e3e3;\n}\n\n.container-pay-button{\n  padding-top: ${n.renderPaymentButton?"10px":""};\n  padding-bottom: ${n.renderPaymentButton?"10px":""};\n  position: relative;\n}\n\n.collect-row {\n  display: flex !important;\n  justify-content: space-between !important;\n  width: 100% !important;\n  gap: 16px;\n}\n\n.collect-row > :first-child {\n  min-width: 120px; !important\n}\n\n.expiration-year {\n  position: relative !important;\n  padding-top: 24px !important;\n  max-height: 85px;\n  overflow: hidden;\n}\n\n.empty-div {\n  position: relative !important;\n  margin-top: 2px;\n  margin-bottom: 4px;\n  max-height: 85px;\n  overflow: hidden;\n}\n.empty-div-card {\n}\n.error-container{\n    display: none;\n    color: #832828 !important;\n    background-color: #FDE7E7 !important;\n    margin-bottom: 13px !important;\n    font-size: 14px !important;\n    padding: 10px 10px !important;\n    border-radius: 5px !important;\n    text-align: left !important;\n    align-items: center;\n    gap: 8px;\n    margin-top: 5px;\n}\n\n.message-container{\n    display: none;\n    color: #28832C !important;\n    background-color: #ECFDE7 !important;\n    margin-bottom: 13px !important;\n    font-size: 14px !important;\n    padding: 10px 10px !important;\n    border-radius: 5px !important;\n    text-align: left !important;\n    align-items: center;\n    gap: 8px;\n    margin-top: ${n.renderPaymentButton||n.renderSaveCardButton?"0px":"5px"};\n}\n.error-container p,\n.message-container p {\n  margin: 0;\n}\n.pay-button {\n  font-size: 16px;\n  font-weight: bold;\n  min-height: 2.3rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  width: 100%;\n  padding: 1rem;\n  text-align: center;\n  border: none;\n  background-color: #000;\n  color: #fff;\n  margin-bottom: 10px;\n  font-family: "Inter", sans-serif !important;\n}\n.hidden{\n  display: none;\n}\n.pay-button:disabled, pay-button[disabled] {\n  background-color: #B9B9B9;\n}\n\n.save-card-button {\n  font-size: 16px;\n  font-weight: bold;\n  min-height: 2.3rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  width: 100%;\n  padding: 1rem;\n  text-align: center;\n  border: none;\n  background-color: #000;\n  color: #fff;\n  margin-bottom: 10px;\n  margin-top: 25px;\n  display: none;\n  font-family: "Inter", sans-serif !important;\n}\n\n.save-card-button:disabled, save-card-button[disabled] {\n  background-color: #B9B9B9;\n}\n\n  .tndr-simulate-input-cvv-container{\n      height: 100%;\n      width: 100%;\n      position: absolute;\n      pointer-events: none;\n      \n  }\n  .tndr-simulate-input-cvv {\n      width: 100%;\n      pointer-events: none;\n      position: relative;\n  }\n  .tndr-simulate-input-cvv-container label{\n    line-height: ${(null===(p=null===(d=null===(r=null==n?void 0:n.customStyles)||void 0===r?void 0:r.labelStyles)||void 0===d?void 0:d.base)||void 0===p?void 0:p.lineHeight)?null===(m=null===(h=null===(u=null==n?void 0:n.customStyles)||void 0===u?void 0:u.labelStyles)||void 0===h?void 0:h.base)||void 0===m?void 0:m.lineHeight:""};\n    color: transparent;\n    font-size: ${(null===(f=null===(b=null===(v=null==n?void 0:n.customStyles)||void 0===v?void 0:v.labelStyles)||void 0===b?void 0:b.base)||void 0===f?void 0:f.fontSize)?null===(C=null===(x=null===(g=null==n?void 0:n.customStyles)||void 0===g?void 0:g.labelStyles)||void 0===x?void 0:x.base)||void 0===C?void 0:C.fontSize:s.labelStyles.base.fontSize};\n    font-family: ${(null===(I=null===(E=null===(A=null==n?void 0:n.customStyles)||void 0===A?void 0:A.labelStyles)||void 0===E?void 0:E.base)||void 0===I?void 0:I.fontFamily)?null===(_=null===(w=null===(S=null==n?void 0:n.customStyles)||void 0===S?void 0:S.labelStyles)||void 0===w?void 0:w.base)||void 0===_?void 0:_.fontFamily:s.labelStyles.base.fontFamily};\n    font-weight: ${(null===(k=null===(P=null===(O=null==n?void 0:n.customStyles)||void 0===O?void 0:O.labelStyles)||void 0===P?void 0:P.base)||void 0===k?void 0:k.fontWeight)?null===(N=null===(M=null===(L=null==n?void 0:n.customStyles)||void 0===L?void 0:L.labelStyles)||void 0===M?void 0:M.base)||void 0===N?void 0:N.fontWeight:s.labelStyles.base.fontWeight};\n    text-align: ${(null===(B=null===(T=null===(j=null==n?void 0:n.customStyles)||void 0===j?void 0:j.labelStyles)||void 0===T?void 0:T.base)||void 0===B?void 0:B.textAlign)?null===(D=null===($=null===(R=null==n?void 0:n.customStyles)||void 0===R?void 0:R.labelStyles)||void 0===$?void 0:$.base)||void 0===D?void 0:D.textAlign:s.labelStyles.base.textAlign};\n    pointer-events: none;\n  }\n  .tndr-simulate-input-cvv input {\n      width: 100%;\n      margin: 0;\n      padding: 0;\n      border: 0;\n      min-height: 44px;\n      background-color: transparent;\n      pointer-events: none;\n  }\n  .tndr-form-label{\n    line-height: ${(null===(U=null===(F=null===(z=null==n?void 0:n.customStyles)||void 0===z?void 0:z.labelStyles)||void 0===F?void 0:F.base)||void 0===U?void 0:U.lineHeight)?null===(G=null===(H=null===(Y=null==n?void 0:n.customStyles)||void 0===Y?void 0:Y.labelStyles)||void 0===H?void 0:H.base)||void 0===G?void 0:G.lineHeight:"22px"};\n    color: ${(null===(K=null===(W=null===(X=null==n?void 0:n.customStyles)||void 0===X?void 0:X.labelStyles)||void 0===W?void 0:W.base)||void 0===K?void 0:K.color)?null===(J=null===(q=null===(V=null==n?void 0:n.customStyles)||void 0===V?void 0:V.labelStyles)||void 0===q?void 0:q.base)||void 0===J?void 0:J.color:s.labelStyles.base.color};\n    font-size: ${(null===(nn=null===(Q=null===(Z=null==n?void 0:n.customStyles)||void 0===Z?void 0:Z.labelStyles)||void 0===Q?void 0:Q.base)||void 0===nn?void 0:nn.fontSize)?null===(on=null===(en=null===(tn=null==n?void 0:n.customStyles)||void 0===tn?void 0:tn.labelStyles)||void 0===en?void 0:en.base)||void 0===on?void 0:on.fontSize:s.labelStyles.base.fontSize};\n    font-family: ${(null===(rn=null===(an=null===(ln=null==n?void 0:n.customStyles)||void 0===ln?void 0:ln.labelStyles)||void 0===an?void 0:an.base)||void 0===rn?void 0:rn.fontFamily)?null===(cn=null===(dn=null===(sn=null==n?void 0:n.customStyles)||void 0===sn?void 0:sn.labelStyles)||void 0===dn?void 0:dn.base)||void 0===cn?void 0:cn.fontFamily:s.labelStyles.base.fontFamily};\n    font-weight: ${(null===(hn=null===(un=null===(pn=null==n?void 0:n.customStyles)||void 0===pn?void 0:pn.labelStyles)||void 0===un?void 0:un.base)||void 0===hn?void 0:hn.fontWeight)?null===(yn=null===(vn=null===(mn=null==n?void 0:n.customStyles)||void 0===mn?void 0:mn.labelStyles)||void 0===vn?void 0:vn.base)||void 0===yn?void 0:yn.fontWeight:s.labelStyles.base.fontWeight};\n    text-align: ${(null===(gn=null===(fn=null===(bn=null==n?void 0:n.customStyles)||void 0===bn?void 0:bn.labelStyles)||void 0===fn?void 0:fn.base)||void 0===gn?void 0:gn.textAlign)?null===(An=null===(Cn=null===(xn=null==n?void 0:n.customStyles)||void 0===xn?void 0:xn.labelStyles)||void 0===Cn?void 0:Cn.base)||void 0===An?void 0:An.textAlign:s.labelStyles.base.textAlign};\n  }\n.lds-dual-ring {\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n}\n\n.lds-dual-ring:after {\n  content: " ";\n  display: block;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 6px solid #fff;\n  border-color: #fff transparent #fff transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .payment_method_zplit {\n    font-size: 16px !important;\n    width: 100% !important;\n  }\n\n  .payment_method_zplit  label img {\n    display: none !important;\n  }\n}\n\n.cards-list-container {\n  display: flex;\n  flex-direction: column;\n  padding: 0px;\n  gap: 33% 20px;\n}\n\n.apms-list-container {\n  display: flex;\n  flex-direction: column;\n  gap: 33% 20px;\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.checkbox label {\n  margin-left: 10px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1D1D1D;\n  font-family: "Inter", sans-serif !important;\n}\n\n.checkbox {\n  margin-top: 10px;\n  margin-bottom: 20px;\n  margin-left: 0px !important;\n  margin-right: 10px !important;\n  width: 100%;\n  text-align: left;\n}\n\n.pay-new-card {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  color: #1D1D1D;\n  gap: 33% 15px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  padding: 0px 30px;\n  width: 100%;\n  position: relative;\n}\n\n.pay-new-card .card-number {\n  font-size: 16px;\n  font-family: "Inter", sans-serif !important;\n}\n\n.card-image {\n  width: 39px;\n  height: 24px;\n  text-align: left;\n}\n\n.card-item-label-new {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  color: #1D1D1D;\n  gap: 33% 20px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  width: 100%;\n}\n\n.card_selected {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 100%;\n  border: 1px #3bc635 solid;\n  color: #3bc635;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:before {\n  width: 8px;\n  height: 8px;\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  opacity: 0;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:checked {\n  border: 1px #3bc635 solid;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 100%;\n  color: #3bc635;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:checked:before {\n  content: "";\n  border: 1px #3bc635 solid;\n  width: 8px;\n  height: 8px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  opacity: 50;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:hover:before {\n  width: 8px;\n  height: 8px;\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  opacity: 10;\n}\n\n</style>\n`},m=t=>`\n  <div class="accordion-container">\n    ${t.cards.reduce(((e,o)=>{var i,l;const{cvvLabel:a}=(r=t.customStyles,{labels:{nameLabel:n(r,"labels.nameLabel",s.labels.nameLabel),cardLabel:n(r,"labels.cardLabel",s.labels.cardLabel),cvvLabel:n(r,"labels.cvvLabel",s.labels.cvvLabel),expiryDateLabel:n(r,"labels.expiryDateLabel",s.labels.expiryDateLabel)},placeholders:{namePlaceholder:n(r,"placeholders.namePlaceholder",s.placeholders.namePlaceholder),cardPlaceholder:n(r,"placeholders.cardPlaceholder",s.placeholders.cardPlaceholder),cvvPlaceholder:n(r,"placeholders.cvvPlaceholder",s.placeholders.cvvPlaceholder),expiryMonthPlaceholder:n(r,"placeholders.expiryMonthPlaceholder",s.placeholders.expiryMonthPlaceholder),expiryYearPlaceholder:n(r,"placeholders.expiryYearPlaceholder",s.placeholders.expiryYearPlaceholder)}}).labels;var r;return`${e}\n    <div class="ac" id="option_container-${o.skyflow_id}">\n      <div class="card-item">\n          <input id="${o.skyflow_id}" class="cards card_selected" name="card_selected" type="radio"/>\n          <label class="card-item-label" for="${o.skyflow_id}">\n            <img class="card-image" src="${c(o.card_scheme)}" />\n            <div class="card-number">${o.card_number}</div>\n            <div class="card-expiration">Exp. ${o.expiration_month}/${o.expiration_year}</div>\n            <div class="card-delete-icon">\n              <button id="delete_button_${o.skyflow_id}" class="card-delete-button">\n                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">\n                  <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>\n                </svg>\n              </button>\n            </div>\n          </label>\n      </div>\n      <div class="ac-panel">\n        <div class="ac-option-panel-container" id="acContainer${o.skyflow_id}">\n\n           ${o.subscription_id?"":`\n           <div class="cvvContainer" id="cvvContainer${o.skyflow_id}">\n             <label class="tndr-form-label label-cvv-cards">${a}</label>\n              <div id="${t.collectorIds.cvv}${o.skyflow_id}" class="empty-div">\n                <div class="tndr-simulate-input-cvv-container">\n                   <div class="tndr-simulate-input-cvv">\n                      <svg class="cvvIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="24" viewBox="0 0 270 178">\n                        <defs>\n                          <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n                            <stop offset="0" stop-color="#386bbf"/>\n                            <stop offset="1" stop-color="#032ea3"/>\n                          </linearGradient>\n                          <linearGradient id="linear-gradient-2" x1="0.5" y1="0.115" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n                            <stop offset="0" stop-color="#1c1c1c"/>\n                            <stop offset="1" stop-color="#151515"/>\n                          </linearGradient>\n                        </defs>\n                        <g id="Grupo_3" data-name="Grupo 3" transform="translate(-69 -312)">\n                          <g id="Grupo_2" data-name="Grupo 2">\n                            <rect id="Rectángulo_58" data-name="Rectángulo 58" width="253" height="165" rx="25" transform="translate(69 312)" fill="url(#linear-gradient)"/>\n                            <rect id="Rectángulo_61" data-name="Rectángulo 61" width="68" height="8" rx="4" transform="translate(86 437)" fill="#fff" opacity="0.877"/>\n                            <rect id="Rectángulo_66" data-name="Rectángulo 66" width="253" height="24" transform="translate(69 347)" fill="url(#linear-gradient-2)"/>\n                            <g id="Elipse_4" data-name="Elipse 4" transform="translate(221 374)" fill="#fff" stroke="#191919" stroke-width="1">\n                              <ellipse cx="59" cy="58" rx="59" ry="58" stroke="none"/>\n                              <ellipse cx="59" cy="58" rx="58.5" ry="57.5" fill="none"/>\n                            </g>\n                          </g>\n                          <text id="_123" data-name="123" transform="translate(240 448)" font-size="45" font-family="Menlo-Regular, Menlo"><tspan x="0" y="0">123</tspan></text>\n                        </g>\n                      </svg>\n                      <input tabindex="-1"/>\n                   </div>\n                 </div>\n\n              </div>\n           </div>\n           `}\n           ${y({showButton:t.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${t.collectorIds.tonderPayButton}${o.skyflow_id}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${t.collectorIds.msgError}${o.skyflow_id}`,msgErrorTextId:`${t.collectorIds.msgErrorText}${o.skyflow_id}`,msgNotificationId:`${t.collectorIds.msgNotification}${o.skyflow_id}`,msgNotificationTextId:`${t.collectorIds.msgNotificationText}${o.skyflow_id}`,buttonText:null===(l=null===(i=t.customization)||void 0===i?void 0:i.paymentButton)||void 0===l?void 0:l.text})}\n        </div>\n      </div>\n    </div>`}),"")}\n  </div>\n  ${`\n    <style>\n      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n      .ac {\n        border: none;\n        background-color: transparent;\n        box-sizing: border-box;\n        margin-bottom: 0;\n        border-bottom: 1px solid #e2e8f0;\n      }\n      .ac-option-panel-container{\n        padding: ${(null==t?void 0:t.renderPaymentButton)?"20px 32px 0px 32px":"20px 32px 20px 32px"};\n      }\n      .cvvContainer{\n       max-width: 60%; \n       overflow: hidden;\n       max-height: 90px;\n       position: relative;\n       padding: 0 0 0 29px;\n      }\n      .cvvIcon {\n        position: absolute;\n        right: 8px;\n        top: 12px;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: opacity 0.3s ease, transform 0.3s ease;\n      }\n      .label-cvv-cards {\n        opacity: 0;\n      }\n      .cvvContainer.show .label-cvv-cards{\n        opacity: 1;\n        transition-delay: 0.3s;\n      }\n      .cvvContainer.show .cvvIcon,\n      .ac-option-panel-container.show .card-pay-button {\n        opacity: 1;\n        transform: translateY(0);\n        transition-delay: 0.3s;\n      }\n      .error-custom-inputs-tonder-cards{\n        bottom: 2px !important;\n      }\n      .container-card-pay-button{\n        margin: 20px 0px;\n      }\n      .card-pay-button{\n        display: block;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: opacity 0.3s ease, transform 0.3s ease;\n      }\n      \n      .ac .ac-header {\n        margin: 0;\n        padding: 0;\n      }\n      \n      .ac .ac-trigger {\n        font:\n          bold 16px "Arial",\n          sans-serif;\n        color: var(--color-black);\n        text-align: left;\n        width: 100%;\n        padding: 8px 32px 8px 8px;\n        display: block;\n        cursor: pointer;\n        background-color: transparent;\n        transition: color 0.25s ease;\n        position: relative;\n        text-decoration: none;\n        margin: 0;\n        border: 0;\n      }\n      \n      .ac .ac-trigger::after {\n        content: "+";\n        text-align: center;\n        width: 15px;\n        transform: translate(0, -50%);\n        position: absolute;\n        right: 10px;\n        top: 50%;\n      }\n      \n      .ac .ac-trigger:focus {\n        color: var(--color-grey);\n      }\n      \n      .ac .ac-panel {\n        overflow: hidden;\n        transition-property: height, visibility;\n        transition-timing-function: ease;\n      }\n      \n      .ac .ac-panel .ac-text {\n        font:\n          15px/24px "Arial",\n          sans-serif;\n        color: var(--color-black);\n        padding: 8px;\n        margin: 0;\n      }\n      \n      .ac.js-enabled .ac-panel {\n        visibility: hidden;\n      }\n      \n      .ac.is-active .ac-panel {\n        visibility: visible;\n      }\n      \n      .ac.is-active > .ac-header .ac-trigger::after {\n        content: "\\2013";\n      }\n      \n      .card-item-label {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: #1D1D1D;\n        gap: 33% 20px;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        width: 100%;\n      }\n\n      .card-item {\n        position: relative;\n        display: flex;\n        justify-content: start;\n        align-items: center;\n        gap: 33% 15px;\n        padding: 0px 30px;\n      }\n\n      .card-item .card-number {\n        font-size: 16px;\n        font-family: "Inter", sans-serif !important;\n      }\n\n      .card-item .card-expiration {\n        font-size: 16px;\n        font-family: "Inter", sans-serif !important;\n      }\n\n      .card-image {\n        width: 39px;\n        height: 24px;\n        text-align: left;\n      }\n\n      .card-delete-button {\n        background-color: transparent !important;\n        color: #000000 !important;\n      }\n\n      .card-delete-button:hover {\n        background-color: transparent !important;\n        color: #D91C1C !important;\n      }\n\n      .card_selected {\n        position: relative;\n        width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        border: 1px #3bc635 solid;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 0;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked {\n        border: 1px #3bc635 solid;\n        position: relative;\n        width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked:before {\n        content: "";\n        border: 1px #3bc635 solid;\n        width: 8px;\n        height: 8px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 50;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:hover:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n        opacity: 10;\n      }\n      @media screen and (max-width: 768px) {\n        .cvvContainer {\n          max-width: 70%;\n        }\n      }\n    \n      @media screen and (max-width: 480px) {\n        .cvvContainer {\n          max-width: 100%;\n        }\n      }\n    </style>\n  `}\n  `,v=n=>`\n  <div class="accordion-container-apm">\n    ${n.apms.reduce(((t,e)=>{var o,i;const l=(n=>{const t=u(n.toUpperCase());return{[r.SORIANA]:{label:"Soriana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/soriana.png"},[r.OXXO]:{label:"Oxxo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxo.png"},[r.CODI]:{label:"CoDi",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/codi.png"},[r.SPEI]:{label:"SPEI",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/spei.png"},[r.PAYPAL]:{label:"Paypal",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/paypal.png"},[r.COMERCIALMEXICANA]:{label:"Comercial Mexicana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/comercial_exicana.png"},[r.BANCOMER]:{label:"Bancomer",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bancomer.png"},[r.WALMART]:{label:"Walmart",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/walmart.png"},[r.BODEGA]:{label:"Bodega Aurrera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bodega_aurrera.png"},[r.SAMSCLUB]:{label:"Sam´s Club",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/sams_club.png"},[r.SUPERAMA]:{label:"Superama",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/superama.png"},[r.CALIMAX]:{label:"Calimax",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/calimax.png"},[r.EXTRA]:{label:"Tiendas Extra",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/tiendas_extra.png"},[r.CIRCULOK]:{label:"Círculo K",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png"},[r.MERCADOPAGO]:{label:"Mercado Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png"},[r.OXXOPAY]:{label:"Oxxo Pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png"},[r.SEVEN11]:{label:"7 Eleven",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png"},[r.TELECOMM]:{label:"Telecomm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/telecomm.png"},[r.BANORTE]:{label:"Banorte",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/banorte.png"},[r.BENAVIDES]:{label:"Farmacias Benavides",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_benavides.png"},[r.DELAHORRO]:{label:"Farmacias del Ahorro",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_ahorro.png"},[r.ELASTURIANO]:{label:"El Asturiano",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/asturiano.png"},[r.WALDOS]:{label:"Waldos",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/waldos.png"},[r.ALSUPER]:{label:"Alsuper",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/al_super.png"},[r.KIOSKO]:{label:"Kiosko",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/kiosko.png"},[r.STAMARIA]:{label:"Farmacias Santa María",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_santa_maria.png"},[r.LAMASBARATA]:{label:"Farmacias la más barata",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_barata.png"},[r.FARMROMA]:{label:"Farmacias Roma",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_roma.png"},[r.FARMUNION]:{label:"Pago en Farmacias Unión",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_union.png"},[r.FARMATODO]:{label:"Pago en Farmacias Farmatodo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_farmatodo.png\t"},[r.SFDEASIS]:{label:"Pago en Farmacias San Francisco de Asís",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_san_francisco.png"},[r.FARM911]:{label:"Farmacias 911",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.FARMECONOMICAS]:{label:"Farmacias Economicas",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.FARMMEDICITY]:{label:"Farmacias Medicity",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.RIANXEIRA]:{label:"Rianxeira",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WESTERNUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.ZONAPAGO]:{label:"Zona Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJALOSANDES]:{label:"Caja Los Andes",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJAPAITA]:{label:"Caja Paita",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJASANTA]:{label:"Caja Santa",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJASULLANA]:{label:"Caja Sullana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJATRUJILLO]:{label:"Caja Trujillo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.EDPYME]:{label:"Edpyme",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.KASNET]:{label:"KasNet",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.NORANDINO]:{label:"Norandino",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.QAPAQ]:{label:"Qapaq",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.RAIZ]:{label:"Raiz",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.PAYSER]:{label:"Paysera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.BANCOCONTINENTAL]:{label:"Banco Continental",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.GMONEY]:{label:"Go money",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.GOPAY]:{label:"Go pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WU]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.PUNTOSHEY]:{label:"Puntoshey",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.AMPM]:{label:"Ampm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.JUMBOMARKET]:{label:"Jumbomarket",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.SMELPUEBLO]:{label:"Smelpueblo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.BAM]:{label:"Bam",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.REFACIL]:{label:"Refacil",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.ACYVALORES]:{label:"Acyvalores",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"}}[t]||{icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",label:""}})(e.payment_method);return`\n    ${t}\n    <div class="ac ac-paymentMethods" id="option_container-${e.pk}">\n      <div class="apm-item">\n          <input id="${e.pk}" class="paymentMethods card_selected" name="card_selected" type="radio"/>\n          <label class="apm-item-label" for="${e.pk}">\n            <div class="apm-image">\n              <div class="apm-image-border"></div>\n              <img src="${l.icon}" />\n            </div>\n            <div class="apm-name">${l.label}</div>\n          </label>\n      </div>\n      <div class="ac-panel">\n        <div class="ac-option-panel-container tndr-pm-item-container" id="acContainer${e.pk}">\n         ${y({showButton:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${n.collectorIds.tonderPayButton}${e.pk}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${n.collectorIds.msgError}${e.pk}`,msgErrorTextId:`${n.collectorIds.msgErrorText}${e.pk}`,msgNotificationId:`${n.collectorIds.msgNotification}${e.pk}`,msgNotificationTextId:`${n.collectorIds.msgNotificationText}${e.pk}`,buttonText:null===(i=null===(o=n.customization)||void 0===o?void 0:o.paymentButton)||void 0===i?void 0:i.text})}\n        </div>\n      </div>\n    </div>\n`}),"")}\n  </div>\n  \n    <style>\n      .apm-item-label {\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        color: #1D1D1D;\n        gap: 33% 10px;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        width: 100%;\n      }\n      .ac-option-panel-container.tndr-pm-item-container{\n        padding-top: 0;\n      }\n      .apm-item {\n        position: relative;\n        display: flex;\n        justify-content: start;\n        align-items: center;\n        gap: 33% 15px;\n        padding: 0px 30px;\n      }\n\n      .apm-item:first-child {\n        border-top: 1px solid #e2e8f0;\n      }\n\n      .apm-item .apm-name {\n        font-size: 16px;\n      }\n      .apm-image {\n        width: 30px;\n        height: 30px;\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .apm-image img {\n        width: auto;\n        height: 30px;\n      }\n      .apm-image-border{\n        position: absolute;\n        border: 1px solid #bababa36;\n        border-radius: 4px;\n        pointer-events: none;\n        box-sizing: border-box;\n        width: 100%;\n        height: 97%;\n      }\n\n      .card_selected {\n        position: relative;\n        width: 16px;\n        min-width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        border: 1px #bababa solid;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 0;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked {\n        border: 1px #3bc635 solid;\n        position: relative;\n        width: 16px;\n        height: 16px;\n        min-width: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked:before {\n        content: "";\n        border: 1px #3bc635 solid;\n        width: 8px;\n        height: 8px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 50;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:hover:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n        opacity: 10;\n      }\n\n    </style>\n  \n  `,y=n=>`\n      ${n.showButton?`\n         <div class="${n.classContainerButton}">\n          <button id="${n.tonderButtonId}" class="${n.classButton}">${n.buttonText}</button>\n        </div>\n        `:""}\n        <div id="${n.msgErrorId}" class="error-container">\n            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">\n              <path id="Cancel_Icon" data-name="Cancel Icon" d="M89.04-859.129l5.085-5.009,5.085,5.009,1.978-1.948L96.1-866.086l5.085-5.009-1.978-1.948-5.085,5.009-5.085-5.009L87.063-871.1l5.085,5.009-5.085,5.009Zm5.085,6.957a13.935,13.935,0,0,1-5.509-1.1,14.276,14.276,0,0,1-4.485-2.974,14.04,14.04,0,0,1-3.019-4.418A13.375,13.375,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.277,14.277,0,0,1,4.485-2.974,13.932,13.932,0,0,1,5.509-1.1,13.933,13.933,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.375,13.375,0,0,1-1.112,5.426,14.04,14.04,0,0,1-3.019,4.418,14.276,14.276,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#832828"/>\n            </svg>\n            <p id="${n.msgErrorTextId}"></p>\n          </div>\n          <div id="${n.msgNotificationId}" class="message-container">\n            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">\n              <path id="Check_Circle_Icon" data-name="Check Circle Icon" d="M92.147-859.686l9.958-9.809-1.977-1.948-7.981,7.861-4.026-3.965L86.144-865.6Zm1.978,7.513a13.935,13.935,0,0,1-5.509-1.1,14.278,14.278,0,0,1-4.485-2.974,14.041,14.041,0,0,1-3.019-4.418A13.374,13.374,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.278,14.278,0,0,1,4.485-2.974,13.935,13.935,0,0,1,5.509-1.1,13.935,13.935,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.374,13.374,0,0,1-1.112,5.426,14.041,14.041,0,0,1-3.019,4.418,14.278,14.278,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#28832c"/>\n            </svg>\n            <p id="${n.msgNotificationTextId}"></p>\n          </div> \n  `;function b(n,e,o,l){return i(this,arguments,void 0,(function*(n,e,o,i,l={},a,r,d){var c,p,u,h,m,v,y,b,x,E,I,S,w,_,O,P,k,L,M,N,j,T,B,R,$,D,z,F,U,Y,H,G,X,W,K,V,q,J;const Z=(yield f(n,e,o,r,i)).container(t.ContainerType.COLLECT);var Q=0===Object.keys(l).length?s:Object.assign(Object.assign({},l),{labels:{nameLabel:(null===(c=null==l?void 0:l.labels)||void 0===c?void 0:c.nameLabel)&&""!==(null===(p=null==l?void 0:l.labels)||void 0===p?void 0:p.nameLabel)?null===(u=null==l?void 0:l.labels)||void 0===u?void 0:u.nameLabel:s.labels.nameLabel,cardLabel:(null===(h=null==l?void 0:l.labels)||void 0===h?void 0:h.cardLabel)&&""!==(null===(m=null==l?void 0:l.labels)||void 0===m?void 0:m.cardLabel)?null===(v=null==l?void 0:l.labels)||void 0===v?void 0:v.cardLabel:s.labels.cardLabel,cvvLabel:(null===(y=null==l?void 0:l.labels)||void 0===y?void 0:y.cvvLabel)&&""!==(null===(b=null==l?void 0:l.labels)||void 0===b?void 0:b.cvvLabel)?null===(x=null==l?void 0:l.labels)||void 0===x?void 0:x.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(E=null==l?void 0:l.labels)||void 0===E?void 0:E.expiryDateLabel)&&""!==(null===(I=null==l?void 0:l.labels)||void 0===I?void 0:I.expiryDateLabel)?null===(S=null==l?void 0:l.labels)||void 0===S?void 0:S.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(w=null==l?void 0:l.placeholders)||void 0===w?void 0:w.namePlaceholder)&&""!==(null===(_=null==l?void 0:l.placeholders)||void 0===_?void 0:_.namePlaceholder)?null===(O=null==l?void 0:l.placeholders)||void 0===O?void 0:O.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(P=null==l?void 0:l.placeholders)||void 0===P?void 0:P.cardPlaceholder)&&""!==(null===(k=null==l?void 0:l.placeholders)||void 0===k?void 0:k.cardPlaceholder)?null===(L=null==l?void 0:l.placeholders)||void 0===L?void 0:L.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(M=null==l?void 0:l.placeholders)||void 0===M?void 0:M.cvvPlaceholder)&&""!==(null===(N=null==l?void 0:l.placeholders)||void 0===N?void 0:N.cvvPlaceholder)?null===(j=null==l?void 0:l.placeholders)||void 0===j?void 0:j.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(T=null==l?void 0:l.placeholders)||void 0===T?void 0:T.expiryMonthPlaceholder)&&""!==(null===(B=null==l?void 0:l.placeholders)||void 0===B?void 0:B.expiryMonthPlaceholder)?null===(R=null==l?void 0:l.placeholders)||void 0===R?void 0:R.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===($=null==l?void 0:l.placeholders)||void 0===$?void 0:$.expiryYearPlaceholder)&&""!==(null===(D=null==l?void 0:l.placeholders)||void 0===D?void 0:D.expiryYearPlaceholder)?null===(z=null==l?void 0:l.placeholders)||void 0===z?void 0:z.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const nn=Object.assign({},Q.inputStyles.base);nn.textIndent="44px";const tn={type:t.ValidationRuleType.LENGTH_MATCH_RULE,params:{max:70,error:"El campo nombre del titular debe tener menos de 70 caracteres"}},en=Z.create(Object.assign(Object.assign({table:"cards",column:"cardholder_name"},Q),{label:null===(F=null==Q?void 0:Q.labels)||void 0===F?void 0:F.nameLabel,placeholder:null===(U=null==Q?void 0:Q.placeholders)||void 0===U?void 0:U.namePlaceholder,type:t.ElementType.CARDHOLDER_NAME,validations:[tn,C]}));A({element:en,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:null===(Y=null==Q?void 0:Q.labels)||void 0===Y?void 0:Y.nameLabel,events:null==d?void 0:d.cardHolderEvents});const on=Z.create(Object.assign(Object.assign({table:"cards",column:"card_number"},Q),{inputStyles:Object.assign(Object.assign({},Q.inputStyles),{base:nn}),label:null===(H=Q.labels)||void 0===H?void 0:H.cardLabel,placeholder:null===(G=Q.placeholders)||void 0===G?void 0:G.cardPlaceholder,type:t.ElementType.CARD_NUMBER,validations:[C]}));A({element:on,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:null===(X=null==Q?void 0:Q.labels)||void 0===X?void 0:X.cardLabel,events:null==d?void 0:d.cardNumberEvents});const ln=Z.create(Object.assign(Object.assign({table:"cards",column:"cvv"},Q),{label:null===(W=Q.labels)||void 0===W?void 0:W.cvvLabel,placeholder:null===(K=Q.placeholders)||void 0===K?void 0:K.cvvPlaceholder,type:t.ElementType.CVV,validations:[C]}));A({element:ln,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.cvvEvents});const an=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_month"},Q),{label:null===(V=Q.labels)||void 0===V?void 0:V.expiryDateLabel,placeholder:null===(q=Q.placeholders)||void 0===q?void 0:q.expiryMonthPlaceholder,type:t.ElementType.EXPIRATION_MONTH,validations:[C]}));A({element:an,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.monthEvents});const rn=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_year"},Q),{label:"",placeholder:null===(J=Q.placeholders)||void 0===J?void 0:J.expiryYearPlaceholder,type:t.ElementType.EXPIRATION_YEAR,validations:[C]}));A({element:rn,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.yearEvents});const sn={cardNumber:{element:on,container:`#${a.cardNumber}`},cvv:{element:ln,container:`#${a.cvv}`},expiryMonth:{element:an,container:`#${a.expirationMonth}`},expiryYear:{element:rn,container:`#${a.expirationYear}`},cardHolderName:{element:en,container:`#${a.holderName}`}};return yield g(sn),{container:Z,elements:{cardHolderNameElement:en,cardNumberElement:on,cvvElement:ln,expiryMonthElement:an,expiryYearElement:rn}}}))}function f(n,e,o,l,a){return i(this,void 0,void 0,(function*(){return t.init({vaultID:n,vaultURL:e,getBearerToken:()=>i(this,void 0,void 0,(function*(){const n=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${l}`},signal:a});if(n.ok){return(yield n.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:t.LogLevel.ERROR,env:t.Env.DEV}})}))}function g(n){return i(this,void 0,void 0,(function*(){if("object"!=typeof n||null===n)throw new Error("Invalid configuration object");for(const[t,{element:e,container:o}]of Object.entries(n))e&&o?e.mount(o):console.warn(`Skipping mount for '${t}' due to missing element or container.`)}))}const x=RegExp("^(?!s*$).+"),C={type:t.ValidationRuleType.REGEX_MATCH_RULE,params:{regex:x,error:"Campo requerido"}};function A(n){const{element:e,fieldMessage:o="",errorStyles:i={},requiredMessage:l="Campo requerido",invalidMessage:a="Campo no válido",events:r}=n;"on"in e&&(e.on(t.EventName.CHANGE,(n=>{I({eventName:"onChange",data:n,events:r}),E({element:e,errorStyles:i,color:"transparent"})})),e.on(t.EventName.BLUR,(n=>{if(I({eventName:"onBlur",data:n,events:r}),!n.isValid){const t=n.isEmpty?l:""!=o?`El campo ${o} no es válido`:a;e.setError(t)}E({element:e,errorStyles:i})})),e.on(t.EventName.FOCUS,(n=>{I({eventName:"onFocus",data:n,events:r}),E({element:e,errorStyles:i,color:"transparent"}),e.resetError()})))}function E(n){const{element:t,errorStyles:e={},color:o=""}=n;Object.keys(e).length>0&&t.update({errorTextStyles:Object.assign(Object.assign({},e),{base:Object.assign(Object.assign({},e.base&&Object.assign({},e.base)),""!=o&&{color:o})})})}const I=t=>{const{eventName:e,data:o,events:i}=t;if(i&&e in i){const t=i[e];"function"==typeof t&&t({elementType:n(o,"elementType",""),isEmpty:n(o,"isEmpty",!1),isFocused:n(o,"isFocused",!1),isValid:n(o,"isValid",!1)})}};var S,w,_,O,P,k,L,M,N,j,T,B,R,$,D,z,F,U,Y,H,G,X,W,K,V,q,J,Z;class Q extends e{constructor({apiKey:n,returnUrl:t,renderPaymentButton:e=!1,callBack:o=()=>{},styles:i,containerId:r,collectorIds:s,isOpenPaySandbox:d,isEnrollmentCard:c,renderSaveCardButton:p,mode:u="stage",customization:h,events:m}){var v,y;super({apiKey:n,returnUrl:t,mode:u,callBack:o,customization:h,tdsIframeId:s&&"tdsIframe"in s?null==s?void 0:s.tdsIframe:"tdsIframe",tonderPayButtonId:s?null==s?void 0:s.tonderPayButton:"tonderPayButton"}),S.add(this),this.paymentData={},this.deletingCards=[],w.set(this,[]),this.accordionCards=null,this.accordionPaymentMethods=null,this.apmsInjected=!1,this.apmsData=[],this.isOpenPaySandbox=!0,this.isEnrollmentCard=!1,_.set(this,{paymentButton:{show:!1,text:"Pagar",showAmount:!0}}),O.set(this,void 0),this.renderPaymentButton=e||!1,this.renderSaveCardButton=p,this.customStyles=i,a(this,O,m,"f"),this.abortRefreshCardsController=new AbortController,this.containerId=r||"tonder-checkout",this.injected=!1,this.cardsInjected=!1,this.collectorIds={cardsListContainer:"cardsListContainer",holderName:"collectCardholderName",cardNumber:"collectCardNumber",expirationMonth:"collectExpirationMonth",expirationYear:"collectExpirationYear",cvv:"collectCvv",tonderPayButton:"tonderPayButton",msgError:"msgError",msgErrorText:"msgErrorText",msgNotification:"msgNotification",tonderSaveCardButton:"tonderSaveCardButton",apmsListContainer:"apmsListContainer",msgNotificationText:"msgNotificationText",tdsIframe:"tdsIframe"},this.collectorIds=s?Object.assign(Object.assign({},this.collectorIds),s):this.collectorIds,this.radioChecked="new",this.collectContainer=null,this.updateCollectContainer=null,this.isOpenPaySandbox=void 0===d||d,this.isEnrollmentCard=void 0!==c&&c,this.customization=Object.assign(Object.assign(Object.assign({},this.customization),h||{}),{paymentButton:Object.assign(Object.assign(Object.assign({},l(this,_,"f").paymentButton),(null==h?void 0:h.paymentButton)||{}),{show:(null===(v=null==h?void 0:h.paymentButton)||void 0===v?void 0:v.show)||this.renderPaymentButton||(null===(y=l(this,_,"f").paymentButton)||void 0===y?void 0:y.show)})})}setCustomerEmail(n){this.customer=Object.assign(Object.assign({},this.customer),{email:n})}setPaymentData(n){var t;n&&(this.paymentData=n,this.setCartTotal((null===(t=n.cart)||void 0===t?void 0:t.total)||"0"))}injectCheckout(){return i(this,void 0,void 0,(function*(){if(this.injected)return;const n=document.querySelector(`#${this.containerId}`);if(n)return n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderPaymentButton:this.renderPaymentButton,customization:this.customization,renderSaveCardButton:this.renderSaveCardButton}),yield l(this,S,"m",G).call(this),void(this.injected=!0);const t=new MutationObserver(((n,t)=>i(this,void 0,void 0,(function*(){const n=document.querySelector(`#${this.containerId}`);n&&(n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderSaveCardButton:this.renderSaveCardButton,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),yield l(this,S,"m",G).call(this),this.injected=!0,t.disconnect())}))));t.observe(document.body,{childList:!0,subtree:!0,attributeFilter:["id"]})}))}removeCheckout(){this.injected=!1,this.cardsInjected=!1,this.apmsInjected=!1,this.abortController.abort(),this.abortController=new AbortController,clearInterval(this.injectInterval),console.log("InlineCheckout removed from DOM and cleaned up.")}saveCard(){return i(this,void 0,void 0,(function*(){return new Promise(((n,t)=>i(this,void 0,void 0,(function*(){try{yield l(this,S,"m",V).call(this,!0,"Guardando..."),yield l(this,S,"m",q).call(this),n("Tarjeta registrada con éxito")}catch(n){t(n)}finally{yield l(this,S,"m",V).call(this)}}))))}))}_setCartTotal(n){this.cartTotal=n,l(this,S,"m",$).call(this)}setCartTotal(n){this.cartTotal=n,l(this,S,"m",$).call(this)}_checkout(){return i(this,void 0,void 0,(function*(){var n;try{if(l(this,S,"m",$).call(this,{cardId:this.radioChecked,textContent:"Cargando...",disabled:!0}),this.merchantData){const{business:t}=this.merchantData;let e,o=!1;const i="new"===this.radioChecked||void 0===this.radioChecked;let a=null;if(i){if(e=yield l(this,S,"m",K).call(this,this.collectorIds.tonderPayButton,this.radioChecked),this._hasCardOnFileKeys()&&e){const n={records:[{fields:e}]};a=yield l(this,S,"m",J).call(this,n),o=!0}}else{const t=l(this,w,"f").find((n=>{var t;return(null===(t=n.fields)||void 0===t?void 0:t.skyflow_id)===this.radioChecked}));(null===(n=null==t?void 0:t.fields)||void 0===n?void 0:n.subscription_id)?a={subscriptionId:t.fields.subscription_id}:yield l(this,S,"m",K).call(this,this.collectorIds.tonderPayButton,this.radioChecked),e={skyflow_id:this.radioChecked}}const r=yield this._getCustomer(),{auth_token:s}=r;if(!o){const n="skyflow_id"in e?e.skyflow_id:"";yield l(this,S,"m",Z).call(this,s,t.pk,{skyflow_id:n})}const c=this.apmsData?this.apmsData.find((n=>n.pk===this.radioChecked)):null,p=Object.assign(Object.assign({},c&&Object.keys(c).length>0?{payment_method:c.payment_method}:{card:e}),{enable_card_on_file:!!(null==a?void 0:a.subscriptionId),customer:r}),u=yield this._handleCheckout(p);return l(this,S,"m",$).call(this,{cardId:this.radioChecked,disabled:!1}),u||(d("No se ha podido procesar el pago",this.radioChecked,this.collectorIds.msgError),!1)}d("No se han configurado los datos del proveedor de servicio",this.radioChecked,this.collectorIds.msgError)}catch(n){throw console.log(n),d("Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),n}finally{l(this,S,"m",$).call(this,{cardId:this.radioChecked,disabled:!1})}}))}}w=new WeakMap,_=new WeakMap,O=new WeakMap,S=new WeakSet,P=function(t){return i(this,void 0,void 0,(function*(){var e;if(this.cardsInjected||!(null===(e=this.customization.saveCards)||void 0===e?void 0:e.showSaved)||this.isEnrollmentCard)return;this.cardsInjected=!1;const o=yield this._getCustomerCards(t,this.merchantData.business.pk);a(this,w,n(o,"cards",[]),"f");let i=[];if("cards"in o){i=o.cards.map(p);const n=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.cardsListContainer}`);e&&this.injected&&(e.innerHTML=m({cards:i,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customStyles:this.customStyles,customization:this.customization}),clearInterval(n),l(this,S,"m",k).call(this),l(this,S,"m",D).call(this,t),this.cardsInjected=!0)}),500)}}))},k=function(n="cards"){const t={cards:{accClass:"accordion-container",triggerClass:"card-item-label"},paymentMethods:{accClass:"accordion-container-apm",triggerClass:"apm-item-label"}},e=new o("."+t[n].accClass,{triggerClass:t[n].triggerClass,duration:300,collapse:!0,showMultiple:!1,onOpen:t=>i(this,void 0,void 0,(function*(){yield l(this,S,"m",N).call(this,t,n)}))});"cards"===n?this.accordionCards=e:"paymentMethods"===n&&(this.accordionPaymentMethods=e)},L=function(n="",t=null,e=!1,o=!1){[{type:"cards",accordion:this.accordionCards},{type:"paymentMethods",accordion:this.accordionPaymentMethods}].forEach((({accordion:i,type:a})=>{i&&(e&&"closeAll"in i&&i.closeAll(),o&&a!==n&&i.closeAll&&i.closeAll(),null!==t&&a===n&&i.open&&i.open("paymentMethods"!==a?t:t-(l(this,w,"f").length+1)))}))},M=function(n=[],t="show"){n.forEach((n=>{document.querySelectorAll("."+n).forEach((n=>{n.classList.remove(t)}))}))},N=function(n){return i(this,arguments,void 0,(function*(n,e="cards"){var o,a,r;const{vault_id:d,vault_url:c}=this.merchantData,p=n.id.replace("option_container-","");this.updateCollectContainer&&"unmount"in(null===(a=null===(o=this.updateCollectContainer)||void 0===o?void 0:o.elements)||void 0===a?void 0:a.cvvElement)&&this.updateCollectContainer.elements.cvvElement.unmount(),l(this,S,"m",M).call(this,["cvvContainer"]);const u=document.getElementById(p);u&&(u.checked=!0);const h=l(this,w,"f").find((n=>{var t;return(null===(t=n.fields)||void 0===t?void 0:t.skyflow_id)===p})),m=!!(null===(r=null==h?void 0:h.fields)||void 0===r?void 0:r.subscription_id);try{"cards"!==e||m||(this.updateCollectContainer=yield function(n,e,o,l,a){return i(this,arguments,void 0,(function*(n,e,o,i,l,a={},r,d,c){var p,u,h,m,v,y,b,x,E,I,S,w,_,O,P,k,L,M,N,j,T,B,R,$,D,z,F,U;const Y=yield f(e,o,i,d,l);var H=0===Object.keys(a).length?s:Object.assign(Object.assign({},a),{labels:{nameLabel:(null===(p=null==a?void 0:a.labels)||void 0===p?void 0:p.nameLabel)&&""!==(null===(u=null==a?void 0:a.labels)||void 0===u?void 0:u.nameLabel)?null===(h=null==a?void 0:a.labels)||void 0===h?void 0:h.nameLabel:s.labels.nameLabel,cardLabel:(null===(m=null==a?void 0:a.labels)||void 0===m?void 0:m.cardLabel)&&""!==(null===(v=null==a?void 0:a.labels)||void 0===v?void 0:v.cardLabel)?null===(y=null==a?void 0:a.labels)||void 0===y?void 0:y.cardLabel:s.labels.cardLabel,cvvLabel:(null===(b=null==a?void 0:a.labels)||void 0===b?void 0:b.cvvLabel)&&""!==(null===(x=null==a?void 0:a.labels)||void 0===x?void 0:x.cvvLabel)?null===(E=null==a?void 0:a.labels)||void 0===E?void 0:E.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(I=null==a?void 0:a.labels)||void 0===I?void 0:I.expiryDateLabel)&&""!==(null===(S=null==a?void 0:a.labels)||void 0===S?void 0:S.expiryDateLabel)?null===(w=null==a?void 0:a.labels)||void 0===w?void 0:w.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(_=null==a?void 0:a.placeholders)||void 0===_?void 0:_.namePlaceholder)&&""!==(null===(O=null==a?void 0:a.placeholders)||void 0===O?void 0:O.namePlaceholder)?null===(P=null==a?void 0:a.placeholders)||void 0===P?void 0:P.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(k=null==a?void 0:a.placeholders)||void 0===k?void 0:k.cardPlaceholder)&&""!==(null===(L=null==a?void 0:a.placeholders)||void 0===L?void 0:L.cardPlaceholder)?null===(M=null==a?void 0:a.placeholders)||void 0===M?void 0:M.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(N=null==a?void 0:a.placeholders)||void 0===N?void 0:N.cvvPlaceholder)&&""!==(null===(j=null==a?void 0:a.placeholders)||void 0===j?void 0:j.cvvPlaceholder)?null===(T=null==a?void 0:a.placeholders)||void 0===T?void 0:T.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(B=null==a?void 0:a.placeholders)||void 0===B?void 0:B.expiryMonthPlaceholder)&&""!==(null===(R=null==a?void 0:a.placeholders)||void 0===R?void 0:R.expiryMonthPlaceholder)?null===($=null==a?void 0:a.placeholders)||void 0===$?void 0:$.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===(D=null==a?void 0:a.placeholders)||void 0===D?void 0:D.expiryYearPlaceholder)&&""!==(null===(z=null==a?void 0:a.placeholders)||void 0===z?void 0:z.expiryYearPlaceholder)?null===(F=null==a?void 0:a.placeholders)||void 0===F?void 0:F.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const G=Y.container(t.ContainerType.COLLECT),X=G.create(Object.assign(Object.assign({table:"cards",column:"cvv"},H),{label:"",placeholder:null===(U=H.placeholders)||void 0===U?void 0:U.cvvPlaceholder,type:t.ElementType.CVV,validations:[C],skyflowID:n}));A({element:X,errorStyles:null==H?void 0:H.errorTextStyles,fieldMessage:"",events:null==c?void 0:c.cvvEvents});const W={cvv:{element:X,container:`#${r.cvv}${n}`}};return yield g(W),{container:G,elements:{cvvElement:X}}}))}(p,d,c,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,O,"f")),setTimeout((()=>{const n=document.querySelector(`#cvvContainer${p}`);n&&n.classList.add("show")}),5)),l(this,S,"m",j).call(this,p)}catch(n){console.error("Ha ocurrido un error",n)}yield l(this,S,"m",U).call(this,u,null,e)}))},j=function(n=""){var t,e,o;if(!this.renderPaymentButton)return;const a=`#${this.collectorIds.tonderPayButton}${n}`;let r=document.querySelector(a);r||(r=document.querySelector(`#${this.collectorIds.tonderPayButton}`));const s=`#acContainer${n}`,d=document.querySelector(s);if(!r)return void console.error("Pay button not found");if(""!==n){const n=document.querySelector(`#${this.collectorIds.tonderPayButton}`);n&&(n.style.display="none")}r.style.display="block";const c=Intl.NumberFormat("en-Latn-US",{minimumFractionDigits:2}).format(Number(this.cartTotal||0));r.textContent=`${null===(e=null===(t=this.customization)||void 0===t?void 0:t.paymentButton)||void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${c}`:""}`,document.querySelectorAll(".ac-option-panel-container").forEach((n=>{n.classList.remove("show")})),d&&d.classList.add("show"),r.onclick=n=>i(this,void 0,void 0,(function*(){n.preventDefault(),yield l(this,S,"m",T).call(this)}))},T=function(){return i(this,void 0,void 0,(function*(){try{yield this.payment({})}catch(n){console.error("Payment error:",n)}}))},B=function(){if(!this.renderSaveCardButton)return;const n=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);n?(n.style.display="block",n.textContent="Guardar",n.onclick=t=>i(this,void 0,void 0,(function*(){t.preventDefault(),yield l(this,S,"m",R).call(this,n)}))):console.error("Save button not found")},R=function(n){return i(this,void 0,void 0,(function*(){const t=n.innerHTML;n.innerHTML='<div class="lds-dual-ring"></div>';try{const n=yield this.saveCard();this.callBack({message:n})}catch(n){console.error("Save card error:",n)}finally{n.innerHTML=t}}))},$=function(n){var t,e,o;try{const i=(null==n?void 0:n.cardId)&&"new"!==(null==n?void 0:n.cardId)?`#${this.collectorIds.tonderPayButton}${n.cardId}`:`#${this.collectorIds.tonderPayButton}`,l=(null==n?void 0:n.updatedTextContent)||!0,a=(null==n?void 0:n.textContent)||`${null===(e=null===(t=this.customization)||void 0===t?void 0:t.paymentButton)||void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,r=null==n?void 0:n.disabled,s=document.querySelector(i);if(!s)return;l&&(s.textContent=a),void 0!==r&&"disabled"in s&&(s.disabled=r)}catch(n){console.error("Pay button not found due to update",n)}},D=function(n=""){const t=document.getElementsByName("card_selected");for(const n of t)n.style.display="block",n.onclick=e=>i(this,void 0,void 0,(function*(){const e=n.classList[0],o=Array.from(t).indexOf(n);yield l(this,S,"m",U).call(this,n,o,e)}));const e=document.getElementsByClassName("card-delete-button");for(const t of e)t.addEventListener("click",(e=>i(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation(),yield l(this,S,"m",z).call(this,n,t)}))),!1)},z=function(n,t){return i(this,void 0,void 0,(function*(){var e,o;const i=t.attributes.getNamedItem("id"),a=null===(o=null===(e=null==i?void 0:i.value)||void 0===e?void 0:e.split("_"))||void 0===o?void 0:o[2];if(a){const t=document.querySelector(`#card_container-${a}`);t&&(t.style.display="none");try{this.deletingCards.push(a),this.abortRefreshCardsController&&(this.abortRefreshCardsController.abort(),this.abortRefreshCardsController=new AbortController),yield this._removeCustomerCard(n,this.merchantData.business.pk,a)}catch(n){}finally{this.deletingCards=this.deletingCards.filter((n=>n!==a)),yield l(this,S,"m",F).call(this,n)}}}))},F=function(n){return i(this,void 0,void 0,(function*(){this.deletingCards.length>0||(this.cardsInjected=!1,yield l(this,S,"m",P).call(this,n))}))},U=function(n){return i(this,arguments,void 0,(function*(n,t=null,e=""){var o,i;if(n.id===this.radioChecked||"new"===n.id&&void 0===this.radioChecked)return;const a=document.querySelector(".container-form");a&&(a.style.display="new"===n.id?"block":"none"),"new"===n.id?(l(this,S,"m",M).call(this,["cvvContainer"]),this.updateCollectContainer&&"unmount"in(null===(i=null===(o=this.updateCollectContainer)||void 0===o?void 0:o.elements)||void 0===i?void 0:i.cvvElement)&&this.updateCollectContainer.elements.cvvElement.unmount(),l(this,S,"m",L).call(this,"",null,!0),this.radioChecked!==n.id&&(yield l(this,S,"m",W).call(this),l(this,S,"m",j).call(this))):(l(this,S,"m",L).call(this,e,null,!1,!0),null!==t&&l(this,S,"m",L).call(this,e,t,!0),l(this,S,"m",X).call(this)),this.radioChecked=n.id}))},Y=function(){return i(this,void 0,void 0,(function*(){try{const n=yield this._fetchCustomerPaymentMethods();n&&n.results&&n.results.length>0&&(this.apmsData=n.results,l(this,S,"m",H).call(this,n.results))}catch(n){console.warn("Error getting APMS")}}))},H=function(n){if(this.apmsInjected)return;const t=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.apmsListContainer}`);e&&this.injected&&(e.innerHTML=v({apms:n,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),clearInterval(t),l(this,S,"m",k).call(this,"paymentMethods"),l(this,S,"m",D).call(this),this.apmsInjected=!0)}),500)},G=function(){return i(this,void 0,void 0,(function*(){if(this.isEnrollmentCard?l(this,S,"m",B).call(this):l(this,S,"m",j).call(this),yield this._initializeCheckout(),this._hasCardOnFileKeys()){const n=document.getElementById("save-checkout-card");(null==n?void 0:n.parentElement)&&(n.parentElement.style.display="none")}const{vault_id:n,vault_url:t}=this.merchantData;if(n){if(this.customer.email&&!this.isEnrollmentCard){const n=yield this._getCustomer();if("auth_token"in n){const{auth_token:t}=n;yield l(this,S,"m",P).call(this,t)}}this.isEnrollmentCard||(yield l(this,S,"m",Y).call(this)),this.collectContainer=yield b(n,t,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,O,"f"))}}))},X=function(){this.injected=!1,this.collectContainer&&("unmount"in this.collectContainer.elements.cardHolderNameElement&&this.collectContainer.elements.cardHolderNameElement.unmount(),"unmount"in this.collectContainer.elements.cardNumberElement&&this.collectContainer.elements.cardNumberElement.unmount(),"unmount"in this.collectContainer.elements.expiryYearElement&&this.collectContainer.elements.expiryYearElement.unmount(),"unmount"in this.collectContainer.elements.expiryMonthElement&&this.collectContainer.elements.expiryMonthElement.unmount(),"unmount"in this.collectContainer.elements.cvvElement&&this.collectContainer.elements.cvvElement.unmount())},W=function(){return i(this,void 0,void 0,(function*(){yield this._initializeCheckout();const{vault_id:n,vault_url:t}=this.merchantData;n&&(this.collectContainer=yield b(n,t,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,O,"f")))}))},K=function(n){return i(this,arguments,void 0,(function*(n,t=null){var e,o;try{const n=t&&"new"!==t?null===(e=this.updateCollectContainer)||void 0===e?void 0:e.container:null===(o=this.collectContainer)||void 0===o?void 0:o.container;if(n&&"collect"in n){const t=yield n.collect();return yield t.records[0].fields}d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(n){throw d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError),n}}))},V=function(){return i(this,arguments,void 0,(function*(n=!1,t="Guardar"){try{const e=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);e&&(e.disabled=n,e.innerHTML=t)}catch(n){}}))},q=function(){return i(this,void 0,void 0,(function*(){if(this.customer.email)try{if(this.merchantData){const n=yield l(this,S,"m",K).call(this,this.collectorIds.tonderSaveCardButton),t=yield this._getCustomer();if("auth_token"in t&&this.secureToken){const{auth_token:e,first_name:o="",last_name:i="",email:a}=t;if(console.log("this._hasCardOnFileKeys()",this._hasCardOnFileKeys()),this._hasCardOnFileKeys()){const t=yield l(this,S,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0}),r=null==t?void 0:t.card_bin;if(!r)throw new Error("Card BIN not returned from save card");const s=yield this._initializeCardOnFile(),d=yield s.process({cardTokens:{name:n.cardholder_name,number:n.card_number,expiryMonth:n.expiration_month,expiryYear:n.expiration_year,cvv:n.cvv},cardBin:r,contactDetails:{firstName:o||"",lastName:i||"",email:a||""},customerId:e,currency:this.currency||"MXN"});yield l(this,S,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id,subscription_id:d.subscriptionId},{forceSave:!0,showNotification:!0})}else yield l(this,S,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id},{forceSave:!0,showNotification:!0})}else d("No se han configurado los datos de seguridad para guardar tarjeta",this.radioChecked,this.collectorIds.msgError)}else d("No se han configurado los datos del proveedor de servicio",this.radioChecked,this.collectorIds.msgError)}catch(n){throw d("object"==typeof n&&null!==n&&"message"in n?null==n?void 0:n.message:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),n}}))},J=function(n){return i(this,void 0,void 0,(function*(){var t,e;const o=yield this._initializeCardOnFile(),i=null===(e=null===(t=n.records)||void 0===t?void 0:t[0])||void 0===e?void 0:e.fields;if(!i)throw new Error("No card data returned from collect");const a=yield this._getCustomer(),{auth_token:r,first_name:s="",last_name:d="",email:c}=a,p=yield l(this,S,"m",Z).call(this,r,this.merchantData.business.pk,{skyflow_id:i.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0}),u=null==p?void 0:p.card_bin;if(!u)throw new Error("Card BIN not returned from save card");const h=yield o.process({cardTokens:{name:i.cardholder_name,number:i.card_number,expiryMonth:i.expiration_month,expiryYear:i.expiration_year,cvv:i.cvv},cardBin:u,contactDetails:{firstName:s||"",lastName:d||"",email:c||""},customerId:r,currency:this.currency||"MXN"});return yield l(this,S,"m",Z).call(this,r,this.merchantData.business.pk,{skyflow_id:i.skyflow_id,subscription_id:h.subscriptionId},{forceSave:!0,showNotification:!1}),{subscriptionId:h.subscriptionId}}))},Z=function(n,t,e){return i(this,arguments,void 0,(function*(n,t,e,o={}){var i,a;if(!n||!(null===(i=this.customer)||void 0===i?void 0:i.email))return;const{forceSave:r=!1,showNotification:s=!0,appOrigin:c=!1}=o,p=document.getElementById("save-checkout-card");if(r||p&&"checked"in p&&p.checked||!!(null===(a=this.customization.saveCards)||void 0===a?void 0:a.autoSave))try{if(this.secureToken){const o=yield this._saveCustomerCard(n,t,e,c);return this.cardsInjected=!1,yield l(this,S,"m",P).call(this,n),s&&function(n,t=null,e="msgNotification",o="msgNotificationText"){try{const i=t&&"new"!==t,l=document.getElementById(`${e}${i?t:""}`);if(l){let e=document.getElementById(`${o}${i?t:""}`);l.style.display="flex",e.innerHTML="",e.innerHTML=n,setTimeout((function(){l.style.display="none",e.innerHTML=""}),3e4)}}catch(n){console.error("Error showing message",n)}}("Tarjeta registrada con éxito",this.radioChecked,this.collectorIds.msgNotification),o}d("No se han configurado los datos de seguridad para guardar tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(n){throw"object"==typeof n&&null!==n&&"message"in n&&"Error"!==(null==n?void 0:n.message)&&d(null==n?void 0:n.message,this.radioChecked,this.collectorIds.msgError),n}}))};export{Q as InlineCheckout};
+import n from"lodash.get";import t from"skyflow-js";import{BaseInlineCheckout as e}from"@tonder.io/ionic-lite-sdk";import o from"accordion-js";function i(n,t,e,o){return new(e||(e=Promise))((function(i,a){function l(n){try{s(o.next(n))}catch(n){a(n)}}function r(n){try{s(o.throw(n))}catch(n){a(n)}}function s(n){var t;n.done?i(n.value):(t=n.value,t instanceof e?t:new e((function(n){n(t)}))).then(l,r)}s((o=o.apply(n,t||[])).next())}))}function a(n,t,e,o){if("a"===e&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?n!==t||!o:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?o:"a"===e?o.call(n):o?o.value:t.get(n)}function l(n,t,e,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,e):i?i.value=e:t.set(n,e),e}var r;"function"==typeof SuppressedError&&SuppressedError,function(n){n.SORIANA="SORIANA",n.OXXO="OXXO",n.SPEI="SPEI",n.CODI="CODI",n.OXXOPAY="OXXOPAY",n.MERCADOPAGO="MERCADOPAGO",n.PAYPAL="PAYPAL",n.COMERCIALMEXICANA="COMERCIALMEXICANA",n.BANCOMER="BANCOMER",n.WALMART="WALMART",n.BODEGA="BODEGA",n.SAMSCLUB="SAMSCLUB",n.SUPERAMA="SUPERAMA",n.CALIMAX="CALIMAX",n.EXTRA="EXTRA",n.CIRCULOK="CIRCULOK",n.SEVEN11="7ELEVEN",n.TELECOMM="TELECOMM",n.BANORTE="BANORTE",n.BENAVIDES="BENAVIDES",n.DELAHORRO="DELAHORRO",n.ELASTURIANO="ELASTURIANO",n.WALDOS="WALDOS",n.ALSUPER="ALSUPER",n.KIOSKO="KIOSKO",n.STAMARIA="STAMARIA",n.LAMASBARATA="LAMASBARATA",n.FARMROMA="FARMROMA",n.FARMUNION="FARMUNION",n.FARMATODO="FARMATODO",n.SFDEASIS="SFDEASIS",n.FARM911="FARM911",n.FARMECONOMICAS="FARMECONOMICAS",n.FARMMEDICITY="FARMMEDICITY",n.RIANXEIRA="RIANXEIRA",n.WESTERNUNION="WESTERNUNION",n.ZONAPAGO="ZONAPAGO",n.CAJALOSANDES="CAJALOSANDES",n.CAJAPAITA="CAJAPAITA",n.CAJASANTA="CAJASANTA",n.CAJASULLANA="CAJASULLANA",n.CAJATRUJILLO="CAJATRUJILLO",n.EDPYME="EDPYME",n.KASNET="KASNET",n.NORANDINO="NORANDINO",n.QAPAQ="QAPAQ",n.RAIZ="RAIZ",n.PAYSER="PAYSER",n.WUNION="WUNION",n.BANCOCONTINENTAL="BANCOCONTINENTAL",n.GMONEY="GMONEY",n.GOPAY="GOPAY",n.WU="WU",n.PUNTOSHEY="PUNTOSHEY",n.AMPM="AMPM",n.JUMBOMARKET="JUMBOMARKET",n.SMELPUEBLO="SMELPUEBLO",n.BAM="BAM",n.REFACIL="REFACIL",n.ACYVALORES="ACYVALORES",n.SAFETYPAYCASH="SAFETYPAYCASH",n.SAFETYPAYTRANSFER="SAFETYPAYTRANSFER",n.NEOSURF="NEOSURF"}(r||(r={}));const s={inputStyles:{base:{border:"1px solid #e0e0e0",padding:"10px 7px",borderRadius:"5px",color:"#1d1d1d",marginTop:"2px",backgroundColor:"white",fontFamily:'"Inter", sans-serif',fontSize:"16px","&::placeholder":{color:"#ccc"}},cardIcon:{position:"absolute",left:"6px",bottom:"calc(50% - 12px)"},complete:{color:"#4caf50"},empty:{},focus:{},invalid:{border:"1px solid #f44336"},global:{"@import":'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")'}},labelStyles:{base:{fontSize:"12px",fontWeight:"500",fontFamily:'"Inter", sans-serif'}},errorTextStyles:{base:{fontSize:"12px",fontWeight:"500",color:"#f44336",fontFamily:'"Inter", sans-serif'}},labels:{nameLabel:"Titular de la tarjeta",cardLabel:"Número de tarjeta",cvvLabel:"CVC/CVV",expiryDateLabel:"Fecha de expiración"},placeholders:{namePlaceholder:"Nombre como aparece en la tarjeta",cardPlaceholder:"1234 1234 1234 1234",cvvPlaceholder:"3-4 dígitos",expiryMonthPlaceholder:"MM",expiryYearPlaceholder:"AA"}};function d(n,t=null,e="msgError",o="msgErrorText"){try{const i=t&&"new"!==t;let a=document.getElementById(`${e}${i?t:""}`),l=document.getElementById(`${o}${i?t:""}`);l.innerHTML="",l.innerHTML=n,a.style.display="flex",setTimeout((function(){a.style.display="none",l.innerHTML=""}),3e4)}catch(n){console.warn("Error showing message error",n)}}const c=n=>"Visa"===n?"https://d35a75syrgujp0.cloudfront.net/cards/visa.png":"Mastercard"===n?"https://d35a75syrgujp0.cloudfront.net/cards/mastercard.png":"American Express"===n?"https://d35a75syrgujp0.cloudfront.net/cards/american_express.png":"https://d35a75syrgujp0.cloudfront.net/cards/default_card.png",p=n=>{const t=Object.assign({},n.fields),e=t.card_number.split("-"),o=e[e.length-1];return t.card_number=`••••${o}`,t},u=n=>n.trim().replace(/\s+/g,"");const h=(n={isEnrollmentCard:!1,collectorIds:{}})=>{var t,e,o,i,a,l,r,d,p,u,h,m,v,b,f,g,x,C,A,E,S,I,w,_,O,P,k,N,L,M,j,T,B,R,$,D,F,z,Y,U,H,G,X,W,K,V,q,J,Z,Q,nn,tn,en,on,an,ln,rn,sn,dn,cn,pn,un,hn,mn,vn,yn,bn,fn,gn,xn,Cn,An;return`\n<div class="container-tonder">\n  ${(null===(e=null===(t=n.customization)||void 0===t?void 0:t.saveCards)||void 0===e?void 0:e.showSaved)?`<div id="${n.collectorIds.cardsListContainer}" class="cards-list-container"></div>`:""}\n  ${n.isEnrollmentCard?"":`\n    <div class="pay-new-card">\n      <input checked id="new" class="card_selected" name="card_selected" type="radio"/>\n      <label class="card-item-label-new" for="new">\n        <img class="card-image" src="${c("XXXX")}" />\n        <div class="card-number">Pagar con tarjeta</div>\n      </label>\n    </div>\n  `}\n  <div class="container-form">\n    <div id="${n.collectorIds.holderName}" class="empty-div empty-div-card"></div>\n    <div id="${n.collectorIds.cardNumber}" class="empty-div empty-div-card"></div>\n    <div class="collect-row">\n      <div id="${n.collectorIds.expirationMonth}" class="empty-div empty-div-card"></div>\n      <div id="${n.collectorIds.expirationYear}" class="expiration-year"></div>\n      <div id="${n.collectorIds.cvv}" class="empty-div empty-div-card"></div>\n    </div>\n    ${!n.isEnrollmentCard&&(null===(i=null===(o=n.customization)||void 0===o?void 0:o.saveCards)||void 0===i?void 0:i.showSaveCardOption)?'\n      <div class="checkbox">\n        <input id="save-checkout-card" type="checkbox">\n        <label for="save-checkout-card">\n          Guardar tarjeta para futuros pagos\n        </label>\n      </div>\n    ':""}\n    ${y({showButton:n.isEnrollmentCard?n.renderSaveCardButton||!1:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:n.isEnrollmentCard?n.collectorIds.tonderSaveCardButton:n.collectorIds.tonderPayButton,classButton:n.isEnrollmentCard?"tndr-button save-card-button":"tndr-button pay-button hidden",msgErrorId:n.collectorIds.msgError,msgErrorTextId:n.collectorIds.msgErrorText,msgNotificationId:n.collectorIds.msgNotification,msgNotificationTextId:n.collectorIds.msgNotificationText,buttonText:n.isEnrollmentCard?"Guardar":null===(l=null===(a=n.customization)||void 0===a?void 0:a.paymentButton)||void 0===l?void 0:l.text})}\n  </div>\n  ${n.isEnrollmentCard?"":'\n    <div id="apmsListContainer" class="apms-list-container"></div>\n  '}\n  \n  <iframe class="tds-iframe" allowtransparency="true" id="${n.collectorIds.tdsIframe}"></iframe>\n</div>\n\n<style>\n\n@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n\n.tds-iframe {\n  border: none;\n  width: 100vw;\n  height: 100vh;\n  z-index: 30;\n  background-color: transparent;\n}\n\n.error-custom-inputs-tonder {\n  background-color: white;\n  position: absolute;\n  left: 0px;\n  bottom: -1px;\n  width: 100%;\n  font-size: 12px;\n  color: red;\n  font-family: "Inter", sans-serif !important;\n}\n\n.container-form {\n  padding: 25px 30px 0px 30px;\n}\n\n#${n.collectorIds.tdsIframe} {\n  display: none;\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  inset: 0px;\n}\n\n.expiration-year .error-custom-inputs-tonder {\n  background-color: white;\n  position: absolute;\n  left: 0px;\n  bottom: 3px;\n  width: 100%;\n  font-size: 12px;\n  color: red;\n  font-family: "Inter", sans-serif !important;\n}\n\n.container-tonder {\n  background-color: #F9F9F9;\n  margin: 0 auto !important;\n  padding: 30px 0px 30px 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-out;\n  max-width: 600px;\n  border: solid 1px #e3e3e3;\n}\n\n.container-pay-button{\n  padding-top: ${n.renderPaymentButton?"10px":""};\n  padding-bottom: ${n.renderPaymentButton?"10px":""};\n  position: relative;\n}\n\n.collect-row {\n  display: flex !important;\n  justify-content: space-between !important;\n  width: 100% !important;\n  gap: 16px;\n}\n\n.collect-row > :first-child {\n  min-width: 120px; !important\n}\n\n.expiration-year {\n  position: relative !important;\n  padding-top: 24px !important;\n  max-height: 85px;\n  overflow: hidden;\n}\n\n.empty-div {\n  position: relative !important;\n  margin-top: 2px;\n  margin-bottom: 4px;\n  max-height: 85px;\n  overflow: hidden;\n}\n.empty-div-card {\n}\n.error-container{\n    display: none;\n    color: #832828 !important;\n    background-color: #FDE7E7 !important;\n    margin-bottom: 13px !important;\n    font-size: 14px !important;\n    padding: 10px 10px !important;\n    border-radius: 5px !important;\n    text-align: left !important;\n    align-items: center;\n    gap: 8px;\n    margin-top: 5px;\n}\n\n.message-container{\n    display: none;\n    color: #28832C !important;\n    background-color: #ECFDE7 !important;\n    margin-bottom: 13px !important;\n    font-size: 14px !important;\n    padding: 10px 10px !important;\n    border-radius: 5px !important;\n    text-align: left !important;\n    align-items: center;\n    gap: 8px;\n    margin-top: ${n.renderPaymentButton||n.renderSaveCardButton?"0px":"5px"};\n}\n.error-container p,\n.message-container p {\n  margin: 0;\n}\n.pay-button {\n  font-size: 16px;\n  font-weight: bold;\n  min-height: 2.3rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  width: 100%;\n  padding: 1rem;\n  text-align: center;\n  border: none;\n  background-color: #000;\n  color: #fff;\n  margin-bottom: 10px;\n  font-family: "Inter", sans-serif !important;\n}\n.hidden{\n  display: none;\n}\n.pay-button:disabled, pay-button[disabled] {\n  background-color: #B9B9B9;\n}\n\n.save-card-button {\n  font-size: 16px;\n  font-weight: bold;\n  min-height: 2.3rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  width: 100%;\n  padding: 1rem;\n  text-align: center;\n  border: none;\n  background-color: #000;\n  color: #fff;\n  margin-bottom: 10px;\n  margin-top: 25px;\n  display: none;\n  font-family: "Inter", sans-serif !important;\n}\n\n.save-card-button:disabled, save-card-button[disabled] {\n  background-color: #B9B9B9;\n}\n\n  .tndr-simulate-input-cvv-container{\n      height: 100%;\n      width: 100%;\n      position: absolute;\n      pointer-events: none;\n      \n  }\n  .tndr-simulate-input-cvv {\n      width: 100%;\n      pointer-events: none;\n      position: relative;\n  }\n  .tndr-simulate-input-cvv-container label{\n    line-height: ${(null===(p=null===(d=null===(r=null==n?void 0:n.customStyles)||void 0===r?void 0:r.labelStyles)||void 0===d?void 0:d.base)||void 0===p?void 0:p.lineHeight)?null===(m=null===(h=null===(u=null==n?void 0:n.customStyles)||void 0===u?void 0:u.labelStyles)||void 0===h?void 0:h.base)||void 0===m?void 0:m.lineHeight:""};\n    color: transparent;\n    font-size: ${(null===(f=null===(b=null===(v=null==n?void 0:n.customStyles)||void 0===v?void 0:v.labelStyles)||void 0===b?void 0:b.base)||void 0===f?void 0:f.fontSize)?null===(C=null===(x=null===(g=null==n?void 0:n.customStyles)||void 0===g?void 0:g.labelStyles)||void 0===x?void 0:x.base)||void 0===C?void 0:C.fontSize:s.labelStyles.base.fontSize};\n    font-family: ${(null===(S=null===(E=null===(A=null==n?void 0:n.customStyles)||void 0===A?void 0:A.labelStyles)||void 0===E?void 0:E.base)||void 0===S?void 0:S.fontFamily)?null===(_=null===(w=null===(I=null==n?void 0:n.customStyles)||void 0===I?void 0:I.labelStyles)||void 0===w?void 0:w.base)||void 0===_?void 0:_.fontFamily:s.labelStyles.base.fontFamily};\n    font-weight: ${(null===(k=null===(P=null===(O=null==n?void 0:n.customStyles)||void 0===O?void 0:O.labelStyles)||void 0===P?void 0:P.base)||void 0===k?void 0:k.fontWeight)?null===(M=null===(L=null===(N=null==n?void 0:n.customStyles)||void 0===N?void 0:N.labelStyles)||void 0===L?void 0:L.base)||void 0===M?void 0:M.fontWeight:s.labelStyles.base.fontWeight};\n    text-align: ${(null===(B=null===(T=null===(j=null==n?void 0:n.customStyles)||void 0===j?void 0:j.labelStyles)||void 0===T?void 0:T.base)||void 0===B?void 0:B.textAlign)?null===(D=null===($=null===(R=null==n?void 0:n.customStyles)||void 0===R?void 0:R.labelStyles)||void 0===$?void 0:$.base)||void 0===D?void 0:D.textAlign:s.labelStyles.base.textAlign};\n    pointer-events: none;\n  }\n  .tndr-simulate-input-cvv input {\n      width: 100%;\n      margin: 0;\n      padding: 0;\n      border: 0;\n      min-height: 44px;\n      background-color: transparent;\n      pointer-events: none;\n  }\n  .tndr-form-label{\n    line-height: ${(null===(Y=null===(z=null===(F=null==n?void 0:n.customStyles)||void 0===F?void 0:F.labelStyles)||void 0===z?void 0:z.base)||void 0===Y?void 0:Y.lineHeight)?null===(G=null===(H=null===(U=null==n?void 0:n.customStyles)||void 0===U?void 0:U.labelStyles)||void 0===H?void 0:H.base)||void 0===G?void 0:G.lineHeight:"22px"};\n    color: ${(null===(K=null===(W=null===(X=null==n?void 0:n.customStyles)||void 0===X?void 0:X.labelStyles)||void 0===W?void 0:W.base)||void 0===K?void 0:K.color)?null===(J=null===(q=null===(V=null==n?void 0:n.customStyles)||void 0===V?void 0:V.labelStyles)||void 0===q?void 0:q.base)||void 0===J?void 0:J.color:s.labelStyles.base.color};\n    font-size: ${(null===(nn=null===(Q=null===(Z=null==n?void 0:n.customStyles)||void 0===Z?void 0:Z.labelStyles)||void 0===Q?void 0:Q.base)||void 0===nn?void 0:nn.fontSize)?null===(on=null===(en=null===(tn=null==n?void 0:n.customStyles)||void 0===tn?void 0:tn.labelStyles)||void 0===en?void 0:en.base)||void 0===on?void 0:on.fontSize:s.labelStyles.base.fontSize};\n    font-family: ${(null===(rn=null===(ln=null===(an=null==n?void 0:n.customStyles)||void 0===an?void 0:an.labelStyles)||void 0===ln?void 0:ln.base)||void 0===rn?void 0:rn.fontFamily)?null===(cn=null===(dn=null===(sn=null==n?void 0:n.customStyles)||void 0===sn?void 0:sn.labelStyles)||void 0===dn?void 0:dn.base)||void 0===cn?void 0:cn.fontFamily:s.labelStyles.base.fontFamily};\n    font-weight: ${(null===(hn=null===(un=null===(pn=null==n?void 0:n.customStyles)||void 0===pn?void 0:pn.labelStyles)||void 0===un?void 0:un.base)||void 0===hn?void 0:hn.fontWeight)?null===(yn=null===(vn=null===(mn=null==n?void 0:n.customStyles)||void 0===mn?void 0:mn.labelStyles)||void 0===vn?void 0:vn.base)||void 0===yn?void 0:yn.fontWeight:s.labelStyles.base.fontWeight};\n    text-align: ${(null===(gn=null===(fn=null===(bn=null==n?void 0:n.customStyles)||void 0===bn?void 0:bn.labelStyles)||void 0===fn?void 0:fn.base)||void 0===gn?void 0:gn.textAlign)?null===(An=null===(Cn=null===(xn=null==n?void 0:n.customStyles)||void 0===xn?void 0:xn.labelStyles)||void 0===Cn?void 0:Cn.base)||void 0===An?void 0:An.textAlign:s.labelStyles.base.textAlign};\n  }\n.lds-dual-ring {\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n}\n\n.lds-dual-ring:after {\n  content: " ";\n  display: block;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 6px solid #fff;\n  border-color: #fff transparent #fff transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .payment_method_zplit {\n    font-size: 16px !important;\n    width: 100% !important;\n  }\n\n  .payment_method_zplit  label img {\n    display: none !important;\n  }\n}\n\n.cards-list-container {\n  display: flex;\n  flex-direction: column;\n  padding: 0px;\n  gap: 33% 20px;\n}\n\n.apms-list-container {\n  display: flex;\n  flex-direction: column;\n  gap: 33% 20px;\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.checkbox label {\n  margin-left: 10px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1D1D1D;\n  font-family: "Inter", sans-serif !important;\n}\n\n.checkbox {\n  margin-top: 10px;\n  margin-bottom: 20px;\n  margin-left: 0px !important;\n  margin-right: 10px !important;\n  width: 100%;\n  text-align: left;\n  display: flex;\n}\n\n.pay-new-card {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  color: #1D1D1D;\n  gap: 33% 15px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  padding: 0px 30px;\n  width: 100%;\n  position: relative;\n}\n\n.pay-new-card .card-number {\n  font-size: 16px;\n  font-family: "Inter", sans-serif !important;\n}\n\n.card-image {\n  width: 39px;\n  height: 24px;\n  text-align: left;\n}\n\n.card-item-label-new {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  color: #1D1D1D;\n  gap: 33% 20px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  width: 100%;\n}\n\n.card_selected {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 100%;\n  border: 1px #3bc635 solid;\n  color: #3bc635;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:before {\n  width: 8px;\n  height: 8px;\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  opacity: 0;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:checked {\n  border: 1px #3bc635 solid;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 100%;\n  color: #3bc635;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:checked:before {\n  content: "";\n  border: 1px #3bc635 solid;\n  width: 8px;\n  height: 8px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  opacity: 50;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.card_selected:hover:before {\n  width: 8px;\n  height: 8px;\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: block;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n  background-color: #3bc635;\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  opacity: 10;\n}\n\n</style>\n`},m=t=>`\n  <div class="accordion-container">\n    ${t.cards.reduce(((e,o)=>{var i,a;const{cvvLabel:l}=(r=t.customStyles,{labels:{nameLabel:n(r,"labels.nameLabel",s.labels.nameLabel),cardLabel:n(r,"labels.cardLabel",s.labels.cardLabel),cvvLabel:n(r,"labels.cvvLabel",s.labels.cvvLabel),expiryDateLabel:n(r,"labels.expiryDateLabel",s.labels.expiryDateLabel)},placeholders:{namePlaceholder:n(r,"placeholders.namePlaceholder",s.placeholders.namePlaceholder),cardPlaceholder:n(r,"placeholders.cardPlaceholder",s.placeholders.cardPlaceholder),cvvPlaceholder:n(r,"placeholders.cvvPlaceholder",s.placeholders.cvvPlaceholder),expiryMonthPlaceholder:n(r,"placeholders.expiryMonthPlaceholder",s.placeholders.expiryMonthPlaceholder),expiryYearPlaceholder:n(r,"placeholders.expiryYearPlaceholder",s.placeholders.expiryYearPlaceholder)}}).labels;var r;return console.log("data.hasCOF",t.hasCOF),`${e}\n    <div class="ac" id="option_container-${o.skyflow_id}">\n      <div class="card-item">\n          <input id="${o.skyflow_id}" class="cards card_selected" name="card_selected" type="radio"/>\n          <label class="card-item-label" for="${o.skyflow_id}">\n            <img class="card-image" src="${c(o.card_scheme)}" />\n            <div class="card-number">${o.card_number}</div>\n            <div class="card-expiration">Exp. ${o.expiration_month}/${o.expiration_year}</div>\n            <div class="card-delete-icon">\n              <button id="delete_button_${o.skyflow_id}" class="card-delete-button">\n                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">\n                  <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>\n                </svg>\n              </button>\n            </div>\n          </label>\n      </div>\n      <div class="ac-panel">\n        <div class="ac-option-panel-container" id="acContainer${o.skyflow_id}">\n\n           ${o.subscription_id&&t.hasCOF?"":`\n           <div class="cvvContainer" id="cvvContainer${o.skyflow_id}">\n             <label class="tndr-form-label label-cvv-cards">${l}</label>\n              <div id="${t.collectorIds.cvv}${o.skyflow_id}" class="empty-div">\n                <div class="tndr-simulate-input-cvv-container">\n                   <div class="tndr-simulate-input-cvv">\n                      <svg class="cvvIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="24" viewBox="0 0 270 178">\n                        <defs>\n                          <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n                            <stop offset="0" stop-color="#386bbf"/>\n                            <stop offset="1" stop-color="#032ea3"/>\n                          </linearGradient>\n                          <linearGradient id="linear-gradient-2" x1="0.5" y1="0.115" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n                            <stop offset="0" stop-color="#1c1c1c"/>\n                            <stop offset="1" stop-color="#151515"/>\n                          </linearGradient>\n                        </defs>\n                        <g id="Grupo_3" data-name="Grupo 3" transform="translate(-69 -312)">\n                          <g id="Grupo_2" data-name="Grupo 2">\n                            <rect id="Rectángulo_58" data-name="Rectángulo 58" width="253" height="165" rx="25" transform="translate(69 312)" fill="url(#linear-gradient)"/>\n                            <rect id="Rectángulo_61" data-name="Rectángulo 61" width="68" height="8" rx="4" transform="translate(86 437)" fill="#fff" opacity="0.877"/>\n                            <rect id="Rectángulo_66" data-name="Rectángulo 66" width="253" height="24" transform="translate(69 347)" fill="url(#linear-gradient-2)"/>\n                            <g id="Elipse_4" data-name="Elipse 4" transform="translate(221 374)" fill="#fff" stroke="#191919" stroke-width="1">\n                              <ellipse cx="59" cy="58" rx="59" ry="58" stroke="none"/>\n                              <ellipse cx="59" cy="58" rx="58.5" ry="57.5" fill="none"/>\n                            </g>\n                          </g>\n                          <text id="_123" data-name="123" transform="translate(240 448)" font-size="45" font-family="Menlo-Regular, Menlo"><tspan x="0" y="0">123</tspan></text>\n                        </g>\n                      </svg>\n                      <input tabindex="-1"/>\n                   </div>\n                 </div>\n\n              </div>\n           </div>\n           `}\n           ${y({showButton:t.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${t.collectorIds.tonderPayButton}${o.skyflow_id}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${t.collectorIds.msgError}${o.skyflow_id}`,msgErrorTextId:`${t.collectorIds.msgErrorText}${o.skyflow_id}`,msgNotificationId:`${t.collectorIds.msgNotification}${o.skyflow_id}`,msgNotificationTextId:`${t.collectorIds.msgNotificationText}${o.skyflow_id}`,buttonText:null===(a=null===(i=t.customization)||void 0===i?void 0:i.paymentButton)||void 0===a?void 0:a.text})}\n        </div>\n      </div>\n    </div>`}),"")}\n  </div>\n  ${`\n    <style>\n      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n      .ac {\n        border: none;\n        background-color: transparent;\n        box-sizing: border-box;\n        margin-bottom: 0;\n        border-bottom: 1px solid #e2e8f0;\n      }\n      .ac-option-panel-container{\n        padding: ${(null==t?void 0:t.renderPaymentButton)?"20px 32px 0px 32px":"20px 32px 20px 32px"};\n      }\n      .cvvContainer{\n       max-width: 60%; \n       overflow: hidden;\n       max-height: 90px;\n       position: relative;\n       padding: 0 0 0 29px;\n      }\n      .cvvIcon {\n        position: absolute;\n        right: 8px;\n        top: 12px;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: opacity 0.3s ease, transform 0.3s ease;\n      }\n      .label-cvv-cards {\n        opacity: 0;\n      }\n      .cvvContainer.show .label-cvv-cards{\n        opacity: 1;\n        transition-delay: 0.3s;\n      }\n      .cvvContainer.show .cvvIcon,\n      .ac-option-panel-container.show .card-pay-button {\n        opacity: 1;\n        transform: translateY(0);\n        transition-delay: 0.3s;\n      }\n      .error-custom-inputs-tonder-cards{\n        bottom: 2px !important;\n      }\n      .container-card-pay-button{\n        margin: 20px 0px;\n      }\n      .card-pay-button{\n        display: block;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: opacity 0.3s ease, transform 0.3s ease;\n      }\n      \n      .ac .ac-header {\n        margin: 0;\n        padding: 0;\n      }\n      \n      .ac .ac-trigger {\n        font:\n          bold 16px "Arial",\n          sans-serif;\n        color: var(--color-black);\n        text-align: left;\n        width: 100%;\n        padding: 8px 32px 8px 8px;\n        display: block;\n        cursor: pointer;\n        background-color: transparent;\n        transition: color 0.25s ease;\n        position: relative;\n        text-decoration: none;\n        margin: 0;\n        border: 0;\n      }\n      \n      .ac .ac-trigger::after {\n        content: "+";\n        text-align: center;\n        width: 15px;\n        transform: translate(0, -50%);\n        position: absolute;\n        right: 10px;\n        top: 50%;\n      }\n      \n      .ac .ac-trigger:focus {\n        color: var(--color-grey);\n      }\n      \n      .ac .ac-panel {\n        overflow: hidden;\n        transition-property: height, visibility;\n        transition-timing-function: ease;\n      }\n      \n      .ac .ac-panel .ac-text {\n        font:\n          15px/24px "Arial",\n          sans-serif;\n        color: var(--color-black);\n        padding: 8px;\n        margin: 0;\n      }\n      \n      .ac.js-enabled .ac-panel {\n        visibility: hidden;\n      }\n      \n      .ac.is-active .ac-panel {\n        visibility: visible;\n      }\n      \n      .ac.is-active > .ac-header .ac-trigger::after {\n        content: "\\2013";\n      }\n      \n      .card-item-label {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: #1D1D1D;\n        gap: 33% 20px;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        width: 100%;\n      }\n\n      .card-item {\n        position: relative;\n        display: flex;\n        justify-content: start;\n        align-items: center;\n        gap: 33% 15px;\n        padding: 0px 30px;\n      }\n\n      .card-item .card-number {\n        font-size: 16px;\n        font-family: "Inter", sans-serif !important;\n      }\n\n      .card-item .card-expiration {\n        font-size: 16px;\n        font-family: "Inter", sans-serif !important;\n      }\n\n      .card-image {\n        width: 39px;\n        height: 24px;\n        text-align: left;\n      }\n\n      .card-delete-button {\n        background-color: transparent !important;\n        color: #000000 !important;\n      }\n\n      .card-delete-button:hover {\n        background-color: transparent !important;\n        color: #D91C1C !important;\n      }\n\n      .card_selected {\n        position: relative;\n        width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        border: 1px #3bc635 solid;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 0;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked {\n        border: 1px #3bc635 solid;\n        position: relative;\n        width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked:before {\n        content: "";\n        border: 1px #3bc635 solid;\n        width: 8px;\n        height: 8px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 50;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:hover:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n        opacity: 10;\n      }\n      @media screen and (max-width: 768px) {\n        .cvvContainer {\n          max-width: 70%;\n        }\n      }\n    \n      @media screen and (max-width: 480px) {\n        .cvvContainer {\n          max-width: 100%;\n        }\n      }\n    </style>\n  `}\n  `,v=n=>`\n  <div class="accordion-container-apm">\n    ${n.apms.reduce(((t,e)=>{var o,i;const a=(n=>{const t=u(n.toUpperCase());return{[r.SORIANA]:{label:"Soriana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/soriana.png"},[r.OXXO]:{label:"Oxxo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxo.png"},[r.CODI]:{label:"CoDi",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/codi.png"},[r.SPEI]:{label:"SPEI",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/spei.png"},[r.PAYPAL]:{label:"Paypal",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/paypal.png"},[r.COMERCIALMEXICANA]:{label:"Comercial Mexicana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/comercial_exicana.png"},[r.BANCOMER]:{label:"Bancomer",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bancomer.png"},[r.WALMART]:{label:"Walmart",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/walmart.png"},[r.BODEGA]:{label:"Bodega Aurrera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bodega_aurrera.png"},[r.SAMSCLUB]:{label:"Sam´s Club",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/sams_club.png"},[r.SUPERAMA]:{label:"Superama",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/superama.png"},[r.CALIMAX]:{label:"Calimax",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/calimax.png"},[r.EXTRA]:{label:"Tiendas Extra",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/tiendas_extra.png"},[r.CIRCULOK]:{label:"Círculo K",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png"},[r.MERCADOPAGO]:{label:"Mercado Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png"},[r.OXXOPAY]:{label:"Oxxo Pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png"},[r.SEVEN11]:{label:"7 Eleven",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png"},[r.TELECOMM]:{label:"Telecomm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/telecomm.png"},[r.BANORTE]:{label:"Banorte",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/banorte.png"},[r.BENAVIDES]:{label:"Farmacias Benavides",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_benavides.png"},[r.DELAHORRO]:{label:"Farmacias del Ahorro",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_ahorro.png"},[r.ELASTURIANO]:{label:"El Asturiano",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/asturiano.png"},[r.WALDOS]:{label:"Waldos",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/waldos.png"},[r.ALSUPER]:{label:"Alsuper",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/al_super.png"},[r.KIOSKO]:{label:"Kiosko",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/kiosko.png"},[r.STAMARIA]:{label:"Farmacias Santa María",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_santa_maria.png"},[r.LAMASBARATA]:{label:"Farmacias la más barata",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_barata.png"},[r.FARMROMA]:{label:"Farmacias Roma",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_roma.png"},[r.FARMUNION]:{label:"Pago en Farmacias Unión",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_union.png"},[r.FARMATODO]:{label:"Pago en Farmacias Farmatodo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_farmatodo.png\t"},[r.SFDEASIS]:{label:"Pago en Farmacias San Francisco de Asís",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_san_francisco.png"},[r.FARM911]:{label:"Farmacias 911",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.FARMECONOMICAS]:{label:"Farmacias Economicas",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.FARMMEDICITY]:{label:"Farmacias Medicity",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.RIANXEIRA]:{label:"Rianxeira",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WESTERNUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.ZONAPAGO]:{label:"Zona Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJALOSANDES]:{label:"Caja Los Andes",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJAPAITA]:{label:"Caja Paita",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJASANTA]:{label:"Caja Santa",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJASULLANA]:{label:"Caja Sullana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.CAJATRUJILLO]:{label:"Caja Trujillo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.EDPYME]:{label:"Edpyme",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.KASNET]:{label:"KasNet",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.NORANDINO]:{label:"Norandino",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.QAPAQ]:{label:"Qapaq",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.RAIZ]:{label:"Raiz",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.PAYSER]:{label:"Paysera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.BANCOCONTINENTAL]:{label:"Banco Continental",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.GMONEY]:{label:"Go money",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.GOPAY]:{label:"Go pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.WU]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.PUNTOSHEY]:{label:"Puntoshey",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.AMPM]:{label:"Ampm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.JUMBOMARKET]:{label:"Jumbomarket",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.SMELPUEBLO]:{label:"Smelpueblo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.BAM]:{label:"Bam",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.REFACIL]:{label:"Refacil",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.ACYVALORES]:{label:"Acyvalores",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[r.SAFETYPAYCASH]:{label:"Paga en Efectivo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/cash_apm_sp.png"},[r.SAFETYPAYTRANSFER]:{label:"Paga por Transferencia",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/transfer_apm_sp.png"},[r.NEOSURF]:{label:"Neosurf",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/neosurf.png"}}[t]||{icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",label:""}})(e.payment_method);return`\n    ${t}\n    <div class="ac ac-paymentMethods" id="option_container-${e.pk}">\n      <div class="apm-item">\n          <input id="${e.pk}" class="paymentMethods card_selected" name="card_selected" type="radio"/>\n          <label class="apm-item-label" for="${e.pk}">\n            <div class="apm-image">\n              <div class="apm-image-border"></div>\n              <img src="${a.icon}" />\n            </div>\n            <div class="apm-name">${a.label}</div>\n          </label>\n      </div>\n      <div class="ac-panel">\n        <div class="ac-option-panel-container tndr-pm-item-container" id="acContainer${e.pk}">\n         ${y({showButton:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${n.collectorIds.tonderPayButton}${e.pk}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${n.collectorIds.msgError}${e.pk}`,msgErrorTextId:`${n.collectorIds.msgErrorText}${e.pk}`,msgNotificationId:`${n.collectorIds.msgNotification}${e.pk}`,msgNotificationTextId:`${n.collectorIds.msgNotificationText}${e.pk}`,buttonText:null===(i=null===(o=n.customization)||void 0===o?void 0:o.paymentButton)||void 0===i?void 0:i.text})}\n        </div>\n      </div>\n    </div>\n`}),"")}\n  </div>\n  \n    <style>\n      .apm-item-label {\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        color: #1D1D1D;\n        gap: 33% 10px;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        width: 100%;\n      }\n      .ac-option-panel-container.tndr-pm-item-container{\n        padding-top: 0;\n      }\n      .apm-item {\n        position: relative;\n        display: flex;\n        justify-content: start;\n        align-items: center;\n        gap: 33% 15px;\n        padding: 0px 30px;\n      }\n\n      .apm-item:first-child {\n        border-top: 1px solid #e2e8f0;\n      }\n\n      .apm-item .apm-name {\n        font-size: 16px;\n      }\n      .apm-image {\n        width: 30px;\n        height: 30px;\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .apm-image img {\n        width: auto;\n        height: 30px;\n      }\n      .apm-image-border{\n        position: absolute;\n        border: 1px solid #bababa36;\n        border-radius: 4px;\n        pointer-events: none;\n        box-sizing: border-box;\n        width: 100%;\n        height: 97%;\n      }\n\n      .card_selected {\n        position: relative;\n        width: 16px;\n        min-width: 16px;\n        height: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        border: 1px #bababa solid;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 0;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked {\n        border: 1px #3bc635 solid;\n        position: relative;\n        width: 16px;\n        height: 16px;\n        min-width: 16px;\n        appearance: none;\n        cursor: pointer;\n        border-radius: 100%;\n        color: #3bc635;\n        transition-property: all;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:checked:before {\n        content: "";\n        border: 1px #3bc635 solid;\n        width: 8px;\n        height: 8px;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        opacity: 50;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n      }\n      \n      .card_selected:hover:before {\n        width: 8px;\n        height: 8px;\n        content: "";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: block;\n        transform: translate(-50%, -50%);\n        border-radius: 100%;\n        background-color: #3bc635;\n        transition-property: opacity;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 150ms;\n        opacity: 10;\n      }\n\n    </style>\n  \n  `,y=n=>`\n      ${n.showButton?`\n         <div class="${n.classContainerButton}">\n          <button id="${n.tonderButtonId}" class="${n.classButton}">${n.buttonText}</button>\n        </div>\n        `:""}\n        <div id="${n.msgErrorId}" class="error-container">\n            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">\n              <path id="Cancel_Icon" data-name="Cancel Icon" d="M89.04-859.129l5.085-5.009,5.085,5.009,1.978-1.948L96.1-866.086l5.085-5.009-1.978-1.948-5.085,5.009-5.085-5.009L87.063-871.1l5.085,5.009-5.085,5.009Zm5.085,6.957a13.935,13.935,0,0,1-5.509-1.1,14.276,14.276,0,0,1-4.485-2.974,14.04,14.04,0,0,1-3.019-4.418A13.375,13.375,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.277,14.277,0,0,1,4.485-2.974,13.932,13.932,0,0,1,5.509-1.1,13.933,13.933,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.375,13.375,0,0,1-1.112,5.426,14.04,14.04,0,0,1-3.019,4.418,14.276,14.276,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#832828"/>\n            </svg>\n            <p id="${n.msgErrorTextId}"></p>\n          </div>\n          <div id="${n.msgNotificationId}" class="message-container">\n            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">\n              <path id="Check_Circle_Icon" data-name="Check Circle Icon" d="M92.147-859.686l9.958-9.809-1.977-1.948-7.981,7.861-4.026-3.965L86.144-865.6Zm1.978,7.513a13.935,13.935,0,0,1-5.509-1.1,14.278,14.278,0,0,1-4.485-2.974,14.041,14.041,0,0,1-3.019-4.418A13.374,13.374,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.278,14.278,0,0,1,4.485-2.974,13.935,13.935,0,0,1,5.509-1.1,13.935,13.935,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.374,13.374,0,0,1-1.112,5.426,14.041,14.041,0,0,1-3.019,4.418,14.278,14.278,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#28832c"/>\n            </svg>\n            <p id="${n.msgNotificationTextId}"></p>\n          </div> \n  `;function b(n,e,o,a){return i(this,arguments,void 0,(function*(n,e,o,i,a={},l,r,d){var c,p,u,h,m,v,y,b,x,E,S,I,w,_,O,P,k,N,L,M,j,T,B,R,$,D,F,z,Y,U,H,G,X,W,K,V,q,J;const Z=(yield f(n,e,o,r,i)).container(t.ContainerType.COLLECT);var Q=0===Object.keys(a).length?s:Object.assign(Object.assign({},a),{labels:{nameLabel:(null===(c=null==a?void 0:a.labels)||void 0===c?void 0:c.nameLabel)&&""!==(null===(p=null==a?void 0:a.labels)||void 0===p?void 0:p.nameLabel)?null===(u=null==a?void 0:a.labels)||void 0===u?void 0:u.nameLabel:s.labels.nameLabel,cardLabel:(null===(h=null==a?void 0:a.labels)||void 0===h?void 0:h.cardLabel)&&""!==(null===(m=null==a?void 0:a.labels)||void 0===m?void 0:m.cardLabel)?null===(v=null==a?void 0:a.labels)||void 0===v?void 0:v.cardLabel:s.labels.cardLabel,cvvLabel:(null===(y=null==a?void 0:a.labels)||void 0===y?void 0:y.cvvLabel)&&""!==(null===(b=null==a?void 0:a.labels)||void 0===b?void 0:b.cvvLabel)?null===(x=null==a?void 0:a.labels)||void 0===x?void 0:x.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(E=null==a?void 0:a.labels)||void 0===E?void 0:E.expiryDateLabel)&&""!==(null===(S=null==a?void 0:a.labels)||void 0===S?void 0:S.expiryDateLabel)?null===(I=null==a?void 0:a.labels)||void 0===I?void 0:I.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(w=null==a?void 0:a.placeholders)||void 0===w?void 0:w.namePlaceholder)&&""!==(null===(_=null==a?void 0:a.placeholders)||void 0===_?void 0:_.namePlaceholder)?null===(O=null==a?void 0:a.placeholders)||void 0===O?void 0:O.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(P=null==a?void 0:a.placeholders)||void 0===P?void 0:P.cardPlaceholder)&&""!==(null===(k=null==a?void 0:a.placeholders)||void 0===k?void 0:k.cardPlaceholder)?null===(N=null==a?void 0:a.placeholders)||void 0===N?void 0:N.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(L=null==a?void 0:a.placeholders)||void 0===L?void 0:L.cvvPlaceholder)&&""!==(null===(M=null==a?void 0:a.placeholders)||void 0===M?void 0:M.cvvPlaceholder)?null===(j=null==a?void 0:a.placeholders)||void 0===j?void 0:j.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(T=null==a?void 0:a.placeholders)||void 0===T?void 0:T.expiryMonthPlaceholder)&&""!==(null===(B=null==a?void 0:a.placeholders)||void 0===B?void 0:B.expiryMonthPlaceholder)?null===(R=null==a?void 0:a.placeholders)||void 0===R?void 0:R.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===($=null==a?void 0:a.placeholders)||void 0===$?void 0:$.expiryYearPlaceholder)&&""!==(null===(D=null==a?void 0:a.placeholders)||void 0===D?void 0:D.expiryYearPlaceholder)?null===(F=null==a?void 0:a.placeholders)||void 0===F?void 0:F.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const nn=Object.assign({},Q.inputStyles.base);nn.textIndent="44px";const tn={type:t.ValidationRuleType.LENGTH_MATCH_RULE,params:{max:70,error:"El campo nombre del titular debe tener menos de 70 caracteres"}},en=Z.create(Object.assign(Object.assign({table:"cards",column:"cardholder_name"},Q),{label:null===(z=null==Q?void 0:Q.labels)||void 0===z?void 0:z.nameLabel,placeholder:null===(Y=null==Q?void 0:Q.placeholders)||void 0===Y?void 0:Y.namePlaceholder,type:t.ElementType.CARDHOLDER_NAME,validations:[tn,C]}));A({element:en,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:null===(U=null==Q?void 0:Q.labels)||void 0===U?void 0:U.nameLabel,events:null==d?void 0:d.cardHolderEvents});const on=Z.create(Object.assign(Object.assign({table:"cards",column:"card_number"},Q),{inputStyles:Object.assign(Object.assign({},Q.inputStyles),{base:nn}),label:null===(H=Q.labels)||void 0===H?void 0:H.cardLabel,placeholder:null===(G=Q.placeholders)||void 0===G?void 0:G.cardPlaceholder,type:t.ElementType.CARD_NUMBER,validations:[C]}));A({element:on,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:null===(X=null==Q?void 0:Q.labels)||void 0===X?void 0:X.cardLabel,events:null==d?void 0:d.cardNumberEvents});const an=Z.create(Object.assign(Object.assign({table:"cards",column:"cvv"},Q),{label:null===(W=Q.labels)||void 0===W?void 0:W.cvvLabel,placeholder:null===(K=Q.placeholders)||void 0===K?void 0:K.cvvPlaceholder,type:t.ElementType.CVV,validations:[C]}));A({element:an,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.cvvEvents});const ln=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_month"},Q),{label:null===(V=Q.labels)||void 0===V?void 0:V.expiryDateLabel,placeholder:null===(q=Q.placeholders)||void 0===q?void 0:q.expiryMonthPlaceholder,type:t.ElementType.EXPIRATION_MONTH,validations:[C]}));A({element:ln,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.monthEvents});const rn=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_year"},Q),{label:"",placeholder:null===(J=Q.placeholders)||void 0===J?void 0:J.expiryYearPlaceholder,type:t.ElementType.EXPIRATION_YEAR,validations:[C]}));A({element:rn,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.yearEvents});const sn={cardNumber:{element:on,container:`#${l.cardNumber}`},cvv:{element:an,container:`#${l.cvv}`},expiryMonth:{element:ln,container:`#${l.expirationMonth}`},expiryYear:{element:rn,container:`#${l.expirationYear}`},cardHolderName:{element:en,container:`#${l.holderName}`}};return yield g(sn),{container:Z,elements:{cardHolderNameElement:en,cardNumberElement:on,cvvElement:an,expiryMonthElement:ln,expiryYearElement:rn}}}))}function f(n,e,o,a,l){return i(this,void 0,void 0,(function*(){return t.init({vaultID:n,vaultURL:e,getBearerToken:()=>i(this,void 0,void 0,(function*(){const n=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${a}`},signal:l});if(n.ok){return(yield n.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:t.LogLevel.ERROR,env:t.Env.DEV}})}))}function g(n){return i(this,void 0,void 0,(function*(){if("object"!=typeof n||null===n)throw new Error("Invalid configuration object");for(const[t,{element:e,container:o}]of Object.entries(n))e&&o?e.mount(o):console.warn(`Skipping mount for '${t}' due to missing element or container.`)}))}const x=RegExp("^(?!s*$).+"),C={type:t.ValidationRuleType.REGEX_MATCH_RULE,params:{regex:x,error:"Campo requerido"}};function A(n){const{element:e,fieldMessage:o="",errorStyles:i={},requiredMessage:a="Campo requerido",invalidMessage:l="Campo no válido",events:r}=n;"on"in e&&(e.on(t.EventName.CHANGE,(n=>{S({eventName:"onChange",data:n,events:r}),E({element:e,errorStyles:i,color:"transparent"})})),e.on(t.EventName.BLUR,(n=>{if(S({eventName:"onBlur",data:n,events:r}),!n.isValid){const t=n.isEmpty?a:""!=o?`El campo ${o} no es válido`:l;e.setError(t)}E({element:e,errorStyles:i})})),e.on(t.EventName.FOCUS,(n=>{S({eventName:"onFocus",data:n,events:r}),E({element:e,errorStyles:i,color:"transparent"}),e.resetError()})))}function E(n){const{element:t,errorStyles:e={},color:o=""}=n;Object.keys(e).length>0&&t.update({errorTextStyles:Object.assign(Object.assign({},e),{base:Object.assign(Object.assign({},e.base&&Object.assign({},e.base)),""!=o&&{color:o})})})}const S=t=>{const{eventName:e,data:o,events:i}=t;if(i&&e in i){const t=i[e];"function"==typeof t&&t({elementType:n(o,"elementType",""),isEmpty:n(o,"isEmpty",!1),isFocused:n(o,"isFocused",!1),isValid:n(o,"isValid",!1)})}};var I,w,_,O,P,k,N,L,M,j,T,B,R,$,D,F,z,Y,U,H,G,X,W,K,V,q,J,Z;class Q extends e{constructor({apiKey:n,returnUrl:t,renderPaymentButton:e=!1,callBack:o=()=>{},styles:i,containerId:r,collectorIds:s,isOpenPaySandbox:d,isEnrollmentCard:c,renderSaveCardButton:p,mode:u="stage",customization:h,events:m}){var v,y;super({apiKey:n,returnUrl:t,mode:u,callBack:o,customization:h,tdsIframeId:s&&"tdsIframe"in s?null==s?void 0:s.tdsIframe:"tdsIframe",tonderPayButtonId:s?null==s?void 0:s.tonderPayButton:"tonderPayButton"}),I.add(this),this.paymentData={},this.deletingCards=[],w.set(this,[]),this.accordionCards=null,this.accordionPaymentMethods=null,this.apmsInjected=!1,this.apmsData=[],this.isOpenPaySandbox=!0,this.isEnrollmentCard=!1,_.set(this,{paymentButton:{show:!1,text:"Pagar",showAmount:!0}}),O.set(this,void 0),this.renderPaymentButton=e||!1,this.renderSaveCardButton=p,this.customStyles=i,l(this,O,m,"f"),this.abortRefreshCardsController=new AbortController,this.containerId=r||"tonder-checkout",this.injected=!1,this.cardsInjected=!1,this.collectorIds={cardsListContainer:"cardsListContainer",holderName:"collectCardholderName",cardNumber:"collectCardNumber",expirationMonth:"collectExpirationMonth",expirationYear:"collectExpirationYear",cvv:"collectCvv",tonderPayButton:"tonderPayButton",msgError:"msgError",msgErrorText:"msgErrorText",msgNotification:"msgNotification",tonderSaveCardButton:"tonderSaveCardButton",apmsListContainer:"apmsListContainer",msgNotificationText:"msgNotificationText",tdsIframe:"tdsIframe"},this.collectorIds=s?Object.assign(Object.assign({},this.collectorIds),s):this.collectorIds,this.radioChecked="new",this.collectContainer=null,this.updateCollectContainer=null,this.isOpenPaySandbox=void 0===d||d,this.isEnrollmentCard=void 0!==c&&c,this.customization=Object.assign(Object.assign(Object.assign({},this.customization),h||{}),{paymentButton:Object.assign(Object.assign(Object.assign({},a(this,_,"f").paymentButton),(null==h?void 0:h.paymentButton)||{}),{show:(null===(v=null==h?void 0:h.paymentButton)||void 0===v?void 0:v.show)||this.renderPaymentButton||(null===(y=a(this,_,"f").paymentButton)||void 0===y?void 0:y.show)})})}setCustomerEmail(n){this.customer=Object.assign(Object.assign({},this.customer),{email:n})}setPaymentData(n){var t;n&&(this.paymentData=n,this.setCartTotal((null===(t=n.cart)||void 0===t?void 0:t.total)||"0"))}injectCheckout(){return i(this,void 0,void 0,(function*(){if(this.injected)return;const n=document.querySelector(`#${this.containerId}`);if(n)return n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderPaymentButton:this.renderPaymentButton,customization:this.customization,renderSaveCardButton:this.renderSaveCardButton}),yield a(this,I,"m",G).call(this),void(this.injected=!0);const t=new MutationObserver(((n,t)=>i(this,void 0,void 0,(function*(){const n=document.querySelector(`#${this.containerId}`);n&&(n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderSaveCardButton:this.renderSaveCardButton,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),yield a(this,I,"m",G).call(this),this.injected=!0,t.disconnect())}))));t.observe(document.body,{childList:!0,subtree:!0,attributeFilter:["id"]})}))}removeCheckout(){this.injected=!1,this.cardsInjected=!1,this.apmsInjected=!1,this.abortController.abort(),this.abortController=new AbortController,clearInterval(this.injectInterval),console.log("InlineCheckout removed from DOM and cleaned up.")}saveCard(){return i(this,void 0,void 0,(function*(){return new Promise(((n,t)=>i(this,void 0,void 0,(function*(){try{yield a(this,I,"m",V).call(this,!0,"Guardando..."),yield a(this,I,"m",q).call(this),n("Tarjeta registrada con éxito")}catch(n){t(n)}finally{yield a(this,I,"m",V).call(this)}}))))}))}_setCartTotal(n){this.cartTotal=n,a(this,I,"m",$).call(this)}setCartTotal(n){this.cartTotal=n,a(this,I,"m",$).call(this)}_checkout(){return i(this,void 0,void 0,(function*(){var n;try{if(a(this,I,"m",$).call(this,{cardId:this.radioChecked,textContent:"Cargando...",disabled:!0}),this.merchantData){const{business:t}=this.merchantData;let e,o=!1;const i="new"===this.radioChecked||void 0===this.radioChecked;let l=null;const r=this.apmsData?this.apmsData.find((n=>n.pk===this.radioChecked)):null;if(i){if(e=yield a(this,I,"m",K).call(this,this.collectorIds.tonderPayButton,this.radioChecked),this._hasCardOnFileKeys()&&e){const n={records:[{fields:e}]};l=yield a(this,I,"m",J).call(this,n),o=!0}}else if(!r){const t=a(this,w,"f").find((n=>{var t;return(null===(t=n.fields)||void 0===t?void 0:t.skyflow_id)===this.radioChecked}));(null===(n=null==t?void 0:t.fields)||void 0===n?void 0:n.subscription_id)&&this._hasCardOnFileKeys()?l={subscriptionId:t.fields.subscription_id}:yield a(this,I,"m",K).call(this,this.collectorIds.tonderPayButton,this.radioChecked),e={skyflow_id:this.radioChecked}}const s=yield this._getCustomer(),{auth_token:c}=s;if(!o&&e){const n="skyflow_id"in e?e.skyflow_id:"";yield a(this,I,"m",Z).call(this,c,t.pk,{skyflow_id:n})}const p=Object.assign(Object.assign({},r&&Object.keys(r).length>0?{payment_method:r.payment_method}:{card:e}),{enable_card_on_file:!!(null==l?void 0:l.subscriptionId)&&this._hasCardOnFileKeys(),customer:s}),u=yield this._handleCheckout(p);return a(this,I,"m",$).call(this,{cardId:this.radioChecked,disabled:!1}),u||(d("No se ha podido procesar el pago",this.radioChecked,this.collectorIds.msgError),!1)}d("No se han configurado los datos del proveedor de servicio",this.radioChecked,this.collectorIds.msgError)}catch(n){throw console.log(n),d("Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),n}finally{a(this,I,"m",$).call(this,{cardId:this.radioChecked,disabled:!1})}}))}}w=new WeakMap,_=new WeakMap,O=new WeakMap,I=new WeakSet,P=function(t){return i(this,void 0,void 0,(function*(){var e;if(this.cardsInjected||!(null===(e=this.customization.saveCards)||void 0===e?void 0:e.showSaved)||this.isEnrollmentCard)return;this.cardsInjected=!1;const o=yield this._getCustomerCards(t,this.merchantData.business.pk);l(this,w,n(o,"cards",[]),"f");let i=[];if("cards"in o){i=o.cards.map(p);const n=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.cardsListContainer}`);e&&this.injected&&(e.innerHTML=m({cards:i,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customStyles:this.customStyles,customization:this.customization,hasCOF:this._hasCardOnFileKeys()}),clearInterval(n),a(this,I,"m",k).call(this),a(this,I,"m",D).call(this,t),this.cardsInjected=!0)}),500)}}))},k=function(n="cards"){const t={cards:{accClass:"accordion-container",triggerClass:"card-item-label"},paymentMethods:{accClass:"accordion-container-apm",triggerClass:"apm-item-label"}},e=new o("."+t[n].accClass,{triggerClass:t[n].triggerClass,duration:300,collapse:!0,showMultiple:!1,onOpen:t=>i(this,void 0,void 0,(function*(){yield a(this,I,"m",M).call(this,t,n)}))});"cards"===n?this.accordionCards=e:"paymentMethods"===n&&(this.accordionPaymentMethods=e)},N=function(n="",t=null,e=!1,o=!1){[{type:"cards",accordion:this.accordionCards},{type:"paymentMethods",accordion:this.accordionPaymentMethods}].forEach((({accordion:i,type:l})=>{i&&(e&&"closeAll"in i&&i.closeAll(),o&&l!==n&&i.closeAll&&i.closeAll(),null!==t&&l===n&&i.open&&i.open("paymentMethods"!==l?t:t-(a(this,w,"f").length+1)))}))},L=function(n=[],t="show"){n.forEach((n=>{document.querySelectorAll("."+n).forEach((n=>{n.classList.remove(t)}))}))},M=function(n){return i(this,arguments,void 0,(function*(n,e="cards"){var o,l,r;const{vault_id:d,vault_url:c}=this.merchantData,p=n.id.replace("option_container-","");this.updateCollectContainer&&"unmount"in(null===(l=null===(o=this.updateCollectContainer)||void 0===o?void 0:o.elements)||void 0===l?void 0:l.cvvElement)&&this.updateCollectContainer.elements.cvvElement.unmount(),a(this,I,"m",L).call(this,["cvvContainer"]);const u=document.getElementById(p);u&&(u.checked=!0);const h=a(this,w,"f").find((n=>{var t;return(null===(t=n.fields)||void 0===t?void 0:t.skyflow_id)===p})),m=!!(null===(r=null==h?void 0:h.fields)||void 0===r?void 0:r.subscription_id);try{"cards"!==e||m&&this._hasCardOnFileKeys()||(this.updateCollectContainer=yield function(n,e,o,a,l){return i(this,arguments,void 0,(function*(n,e,o,i,a,l={},r,d,c){var p,u,h,m,v,y,b,x,E,S,I,w,_,O,P,k,N,L,M,j,T,B,R,$,D,F,z,Y;const U=yield f(e,o,i,d,a);var H=0===Object.keys(l).length?s:Object.assign(Object.assign({},l),{labels:{nameLabel:(null===(p=null==l?void 0:l.labels)||void 0===p?void 0:p.nameLabel)&&""!==(null===(u=null==l?void 0:l.labels)||void 0===u?void 0:u.nameLabel)?null===(h=null==l?void 0:l.labels)||void 0===h?void 0:h.nameLabel:s.labels.nameLabel,cardLabel:(null===(m=null==l?void 0:l.labels)||void 0===m?void 0:m.cardLabel)&&""!==(null===(v=null==l?void 0:l.labels)||void 0===v?void 0:v.cardLabel)?null===(y=null==l?void 0:l.labels)||void 0===y?void 0:y.cardLabel:s.labels.cardLabel,cvvLabel:(null===(b=null==l?void 0:l.labels)||void 0===b?void 0:b.cvvLabel)&&""!==(null===(x=null==l?void 0:l.labels)||void 0===x?void 0:x.cvvLabel)?null===(E=null==l?void 0:l.labels)||void 0===E?void 0:E.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(S=null==l?void 0:l.labels)||void 0===S?void 0:S.expiryDateLabel)&&""!==(null===(I=null==l?void 0:l.labels)||void 0===I?void 0:I.expiryDateLabel)?null===(w=null==l?void 0:l.labels)||void 0===w?void 0:w.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(_=null==l?void 0:l.placeholders)||void 0===_?void 0:_.namePlaceholder)&&""!==(null===(O=null==l?void 0:l.placeholders)||void 0===O?void 0:O.namePlaceholder)?null===(P=null==l?void 0:l.placeholders)||void 0===P?void 0:P.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(k=null==l?void 0:l.placeholders)||void 0===k?void 0:k.cardPlaceholder)&&""!==(null===(N=null==l?void 0:l.placeholders)||void 0===N?void 0:N.cardPlaceholder)?null===(L=null==l?void 0:l.placeholders)||void 0===L?void 0:L.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(M=null==l?void 0:l.placeholders)||void 0===M?void 0:M.cvvPlaceholder)&&""!==(null===(j=null==l?void 0:l.placeholders)||void 0===j?void 0:j.cvvPlaceholder)?null===(T=null==l?void 0:l.placeholders)||void 0===T?void 0:T.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(B=null==l?void 0:l.placeholders)||void 0===B?void 0:B.expiryMonthPlaceholder)&&""!==(null===(R=null==l?void 0:l.placeholders)||void 0===R?void 0:R.expiryMonthPlaceholder)?null===($=null==l?void 0:l.placeholders)||void 0===$?void 0:$.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===(D=null==l?void 0:l.placeholders)||void 0===D?void 0:D.expiryYearPlaceholder)&&""!==(null===(F=null==l?void 0:l.placeholders)||void 0===F?void 0:F.expiryYearPlaceholder)?null===(z=null==l?void 0:l.placeholders)||void 0===z?void 0:z.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const G=U.container(t.ContainerType.COLLECT),X=G.create(Object.assign(Object.assign({table:"cards",column:"cvv"},H),{label:"",placeholder:null===(Y=H.placeholders)||void 0===Y?void 0:Y.cvvPlaceholder,type:t.ElementType.CVV,validations:[C],skyflowID:n}));A({element:X,errorStyles:null==H?void 0:H.errorTextStyles,fieldMessage:"",events:null==c?void 0:c.cvvEvents});const W={cvv:{element:X,container:`#${r.cvv}${n}`}};return yield g(W),{container:G,elements:{cvvElement:X}}}))}(p,d,c,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,a(this,O,"f")),setTimeout((()=>{const n=document.querySelector(`#cvvContainer${p}`);n&&n.classList.add("show")}),5)),a(this,I,"m",j).call(this,p)}catch(n){console.error("Ha ocurrido un error",n)}yield a(this,I,"m",Y).call(this,u,null,e)}))},j=function(n=""){var t,e,o;if(!this.renderPaymentButton)return;const l=`#${this.collectorIds.tonderPayButton}${n}`;let r=document.querySelector(l);r||(r=document.querySelector(`#${this.collectorIds.tonderPayButton}`));const s=`#acContainer${n}`,d=document.querySelector(s);if(!r)return void console.error("Pay button not found");if(""!==n){const n=document.querySelector(`#${this.collectorIds.tonderPayButton}`);n&&(n.style.display="none")}r.style.display="block";const c=Intl.NumberFormat("en-Latn-US",{minimumFractionDigits:2}).format(Number(this.cartTotal||0));r.textContent=`${null===(e=null===(t=this.customization)||void 0===t?void 0:t.paymentButton)||void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${c}`:""}`,document.querySelectorAll(".ac-option-panel-container").forEach((n=>{n.classList.remove("show")})),d&&d.classList.add("show"),r.onclick=n=>i(this,void 0,void 0,(function*(){n.preventDefault(),yield a(this,I,"m",T).call(this)}))},T=function(){return i(this,void 0,void 0,(function*(){try{yield this.payment({})}catch(n){console.error("Payment error:",n)}}))},B=function(){if(!this.renderSaveCardButton)return;const n=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);n?(n.style.display="block",n.textContent="Guardar",n.onclick=t=>i(this,void 0,void 0,(function*(){t.preventDefault(),yield a(this,I,"m",R).call(this,n)}))):console.error("Save button not found")},R=function(n){return i(this,void 0,void 0,(function*(){const t=n.innerHTML;n.innerHTML='<div class="lds-dual-ring"></div>';try{const n=yield this.saveCard();this.callBack({message:n})}catch(n){console.error("Save card error:",n)}finally{n.innerHTML=t}}))},$=function(n){var t,e,o;try{const i=(null==n?void 0:n.cardId)&&"new"!==(null==n?void 0:n.cardId)?`#${this.collectorIds.tonderPayButton}${n.cardId}`:`#${this.collectorIds.tonderPayButton}`,a=(null==n?void 0:n.updatedTextContent)||!0,l=(null==n?void 0:n.textContent)||`${null===(e=null===(t=this.customization)||void 0===t?void 0:t.paymentButton)||void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,r=null==n?void 0:n.disabled,s=document.querySelector(i);if(!s)return;a&&(s.textContent=l),void 0!==r&&"disabled"in s&&(s.disabled=r)}catch(n){console.error("Pay button not found due to update",n)}},D=function(n=""){const t=document.getElementsByName("card_selected");for(const n of t)n.style.display="block",n.onclick=e=>i(this,void 0,void 0,(function*(){const e=n.classList[0],o=Array.from(t).indexOf(n);yield a(this,I,"m",Y).call(this,n,o,e)}));const e=document.getElementsByClassName("card-delete-button");for(const t of e)t.addEventListener("click",(e=>i(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation(),yield a(this,I,"m",F).call(this,n,t)}))),!1)},F=function(n,t){return i(this,void 0,void 0,(function*(){var e,o;const i=t.attributes.getNamedItem("id"),l=null===(o=null===(e=null==i?void 0:i.value)||void 0===e?void 0:e.split("_"))||void 0===o?void 0:o[2];if(l){const t=document.querySelector(`#card_container-${l}`);t&&(t.style.display="none");try{this.deletingCards.push(l),this.abortRefreshCardsController&&(this.abortRefreshCardsController.abort(),this.abortRefreshCardsController=new AbortController),yield this._removeCustomerCard(n,this.merchantData.business.pk,l)}catch(n){}finally{this.deletingCards=this.deletingCards.filter((n=>n!==l)),yield a(this,I,"m",z).call(this,n)}}}))},z=function(n){return i(this,void 0,void 0,(function*(){this.deletingCards.length>0||(this.cardsInjected=!1,yield a(this,I,"m",P).call(this,n))}))},Y=function(n){return i(this,arguments,void 0,(function*(n,t=null,e=""){var o,i;if(n.id===this.radioChecked||"new"===n.id&&void 0===this.radioChecked)return;const l=document.querySelector(".container-form");l&&(l.style.display="new"===n.id?"block":"none"),"new"===n.id?(a(this,I,"m",L).call(this,["cvvContainer"]),this.updateCollectContainer&&"unmount"in(null===(i=null===(o=this.updateCollectContainer)||void 0===o?void 0:o.elements)||void 0===i?void 0:i.cvvElement)&&this.updateCollectContainer.elements.cvvElement.unmount(),a(this,I,"m",N).call(this,"",null,!0),this.radioChecked!==n.id&&(yield a(this,I,"m",W).call(this),a(this,I,"m",j).call(this))):(a(this,I,"m",N).call(this,e,null,!1,!0),null!==t&&a(this,I,"m",N).call(this,e,t,!0),a(this,I,"m",X).call(this)),this.radioChecked=n.id}))},U=function(){return i(this,void 0,void 0,(function*(){try{const n=yield this._fetchCustomerPaymentMethods();n&&n.results&&n.results.length>0&&(this.apmsData=n.results,a(this,I,"m",H).call(this,n.results))}catch(n){console.warn("Error getting APMS")}}))},H=function(n){if(this.apmsInjected)return;const t=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.apmsListContainer}`);e&&this.injected&&(e.innerHTML=v({apms:n,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),clearInterval(t),a(this,I,"m",k).call(this,"paymentMethods"),a(this,I,"m",D).call(this),this.apmsInjected=!0)}),500)},G=function(){return i(this,void 0,void 0,(function*(){if(this.isEnrollmentCard?a(this,I,"m",B).call(this):a(this,I,"m",j).call(this),yield this._initializeCheckout(),this._hasCardOnFileKeys()){const n=document.getElementById("save-checkout-card");(null==n?void 0:n.parentElement)&&(n.parentElement.style.display="none")}const{vault_id:n,vault_url:t}=this.merchantData;if(n){if(this.customer.email&&!this.isEnrollmentCard){const n=yield this._getCustomer();if("auth_token"in n){const{auth_token:t}=n;yield a(this,I,"m",P).call(this,t)}}this.isEnrollmentCard||(yield a(this,I,"m",U).call(this)),this.collectContainer=yield b(n,t,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,a(this,O,"f"))}}))},X=function(){this.injected=!1,this.collectContainer&&("unmount"in this.collectContainer.elements.cardHolderNameElement&&this.collectContainer.elements.cardHolderNameElement.unmount(),"unmount"in this.collectContainer.elements.cardNumberElement&&this.collectContainer.elements.cardNumberElement.unmount(),"unmount"in this.collectContainer.elements.expiryYearElement&&this.collectContainer.elements.expiryYearElement.unmount(),"unmount"in this.collectContainer.elements.expiryMonthElement&&this.collectContainer.elements.expiryMonthElement.unmount(),"unmount"in this.collectContainer.elements.cvvElement&&this.collectContainer.elements.cvvElement.unmount())},W=function(){return i(this,void 0,void 0,(function*(){yield this._initializeCheckout();const{vault_id:n,vault_url:t}=this.merchantData;n&&(this.collectContainer=yield b(n,t,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,a(this,O,"f")))}))},K=function(n){return i(this,arguments,void 0,(function*(n,t=null){var e,o;try{const n=t&&"new"!==t?null===(e=this.updateCollectContainer)||void 0===e?void 0:e.container:null===(o=this.collectContainer)||void 0===o?void 0:o.container;if(n&&"collect"in n){const t=yield n.collect();return yield t.records[0].fields}d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(n){throw d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError),n}}))},V=function(){return i(this,arguments,void 0,(function*(n=!1,t="Guardar"){try{const e=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);e&&(e.disabled=n,e.innerHTML=t)}catch(n){}}))},q=function(){return i(this,void 0,void 0,(function*(){if(this.customer.email)try{if(this.merchantData){const n=yield a(this,I,"m",K).call(this,this.collectorIds.tonderSaveCardButton),t=yield this._getCustomer();if("auth_token"in t&&this.secureToken){const{auth_token:e,first_name:o="",last_name:i="",email:l}=t;if(this._hasCardOnFileKeys()){const t=yield a(this,I,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0}),r=null==t?void 0:t.card_bin;if(!r)throw new Error("Card BIN not returned from save card");const s=yield this._initializeCardOnFile(),d=yield s.process({cardTokens:{name:n.cardholder_name,number:n.card_number,expiryMonth:n.expiration_month,expiryYear:n.expiration_year,cvv:n.cvv},cardBin:r,contactDetails:{firstName:o||"",lastName:i||"",email:l||""},customerId:e,currency:this.currency||"MXN"});yield a(this,I,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id,subscription_id:d.subscriptionId},{forceSave:!0,showNotification:!0})}else yield a(this,I,"m",Z).call(this,e,this.merchantData.business.pk,{skyflow_id:n.skyflow_id},{forceSave:!0,showNotification:!0})}else d("No se han configurado los datos de seguridad para guardar tarjeta",this.radioChecked,this.collectorIds.msgError)}else d("No se han configurado los datos del proveedor de servicio",this.radioChecked,this.collectorIds.msgError)}catch(n){throw d("object"==typeof n&&null!==n&&"message"in n?null==n?void 0:n.message:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),n}}))},J=function(n){return i(this,void 0,void 0,(function*(){var t,e;const o=yield this._initializeCardOnFile(),i=null===(e=null===(t=n.records)||void 0===t?void 0:t[0])||void 0===e?void 0:e.fields;if(!i)throw new Error("No card data returned from collect");const l=yield this._getCustomer(),{auth_token:r,first_name:s="",last_name:d="",email:c}=l,p=yield a(this,I,"m",Z).call(this,r,this.merchantData.business.pk,{skyflow_id:i.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0}),u=null==p?void 0:p.card_bin;if(!u)throw new Error("Card BIN not returned from save card");const h=yield o.process({cardTokens:{name:i.cardholder_name,number:i.card_number,expiryMonth:i.expiration_month,expiryYear:i.expiration_year,cvv:i.cvv},cardBin:u,contactDetails:{firstName:s||"",lastName:d||"",email:c||""},customerId:r,currency:this.currency||"MXN"});return yield a(this,I,"m",Z).call(this,r,this.merchantData.business.pk,{skyflow_id:i.skyflow_id,subscription_id:h.subscriptionId},{forceSave:!0,showNotification:!1}),{subscriptionId:h.subscriptionId}}))},Z=function(n,t,e){return i(this,arguments,void 0,(function*(n,t,e,o={}){var i,l;if(!n||!(null===(i=this.customer)||void 0===i?void 0:i.email))return;const{forceSave:r=!1,showNotification:s=!0,appOrigin:c=!1}=o,p=document.getElementById("save-checkout-card");if(r||p&&"checked"in p&&p.checked||!!(null===(l=this.customization.saveCards)||void 0===l?void 0:l.autoSave))try{if(this.secureToken){const o=yield this._saveCustomerCard(n,t,e,c);return this.cardsInjected=!1,yield a(this,I,"m",P).call(this,n),s&&function(n,t=null,e="msgNotification",o="msgNotificationText"){try{const i=t&&"new"!==t,a=document.getElementById(`${e}${i?t:""}`);if(a){let e=document.getElementById(`${o}${i?t:""}`);a.style.display="flex",e.innerHTML="",e.innerHTML=n,setTimeout((function(){a.style.display="none",e.innerHTML=""}),3e4)}}catch(n){console.error("Error showing message",n)}}("Tarjeta registrada con éxito",this.radioChecked,this.collectorIds.msgNotification),o}d("No se han configurado los datos de seguridad para guardar tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(n){throw"object"==typeof n&&null!==n&&"message"in n&&"Error"!==(null==n?void 0:n.message)&&d(null==n?void 0:n.message,this.radioChecked,this.collectorIds.msgError),n}}))};export{Q as InlineCheckout};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.58",
+  "version": "0.0.59-beta.develop.b30cdb2",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.64",
+    "@tonder.io/ionic-lite-sdk": "^0.0.65",
     "accordion-js": "^3.4.0",
     "crypto-js": "^4.1.1",
     "lodash.get": "^4.4.2",

package/src/classes/inlineCheckout.ts

@@ -225,6 +225,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
             renderPaymentButton: this.renderPaymentButton,
             customStyles: this.customStyles,
             customization: this.customization,
+            hasCOF: this._hasCardOnFileKeys()
           })
           clearInterval(injectInterval)
           this.#generateAccordion()
@@ -312,7 +313,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     const hasSubscriptionId = !!savedCard?.fields?.subscription_id;
 
     try{
-      if(type === "cards" && !hasSubscriptionId){
+      if(type === "cards" && (!hasSubscriptionId || !this._hasCardOnFileKeys())){
         this.updateCollectContainer = await initUpdateSkyflow(
             container_radio_id,
             vault_id,
@@ -681,7 +682,6 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
             // @ts-ignore
             const { auth_token, first_name = "", last_name = "", email } = customerResponse;
 
-            console.log("this._hasCardOnFileKeys()", this._hasCardOnFileKeys())
             // Check if card-on-file flow should be used
             if (this._hasCardOnFileKeys()) {
               // 1. Save card and get bin
@@ -821,6 +821,8 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           let cardOnFileProcessed = false;
           const isNewCard = this.radioChecked === "new" || this.radioChecked === undefined;
           let subscriptionCard = null;
+          const selected_apm: ITonderPaymentMethod | undefined | null = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):null;
+
           if (isNewCard) {
             cardTokensSkyflowTonder = await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked);
 
@@ -832,13 +834,13 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
                 subscriptionCard = await this.#processCardOnFilePayment(collectResponse);
                 cardOnFileProcessed = true;
             }
-          } else {
+          } else if(!selected_apm) {
             // For saved cards, check if card has subscription_id
             const savedCard = this.#cardsData.find(
               (card: any) => card.fields?.skyflow_id === this.radioChecked
             );
 
-            if (savedCard?.fields?.subscription_id) {
+            if (savedCard?.fields?.subscription_id && this._hasCardOnFileKeys()) {
               // Card has subscription_id, skip CVV collection
               subscriptionCard = { subscriptionId: savedCard.fields.subscription_id };
             } else {
@@ -855,17 +857,16 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           const { auth_token } = customerResponse;
 
           // Only save card here if card-on-file flow wasn't processed (it handles its own save)
-          if (!cardOnFileProcessed) {
+          if (!cardOnFileProcessed && cardTokensSkyflowTonder) {
             const skyflowId = 'skyflow_id' in cardTokensSkyflowTonder ? cardTokensSkyflowTonder.skyflow_id : '';
             await this.#handleSaveCard(auth_token, business.pk, { skyflow_id: skyflowId });
           }
 
-          const selected_apm: ITonderPaymentMethod | undefined | null = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):null;
           const payloadCheckout = {
               ...(selected_apm && Object.keys(selected_apm).length > 0
                   ? { payment_method: selected_apm.payment_method }
                   : { card: cardTokensSkyflowTonder }),
-              enable_card_on_file: !!subscriptionCard?.subscriptionId,
+              enable_card_on_file: !!subscriptionCard?.subscriptionId && this._hasCardOnFileKeys(),
               customer: customerResponse
           }
           const jsonResponseRouter = await this._handleCheckout(payloadCheckout);

package/src/helpers/constants.ts

@@ -58,7 +58,10 @@ enum PAYMENT_METHOD {
     SMELPUEBLO= "SMELPUEBLO",
     BAM= "BAM",
     REFACIL= "REFACIL",
-    ACYVALORES= "ACYVALORES"
+    ACYVALORES= "ACYVALORES",
+    SAFETYPAYCASH= "SAFETYPAYCASH",
+    SAFETYPAYTRANSFER= "SAFETYPAYTRANSFER",
+    NEOSURF= "NEOSURF"
   }
   
   export { PAYMENT_METHOD }

package/src/helpers/template.ts

@@ -357,6 +357,7 @@ export const cardTemplate = (data: {
   margin-right: 10px !important;
   width: 100%;
   text-align: left;
+  display: flex;
 }
 
 .pay-new-card {
@@ -484,11 +485,12 @@ export const cardItemsTemplate = (data: {
   renderPaymentButton: boolean;
   customStyles: any;
   customization?: IInlineCustomizationOptions;
+  hasCOF?: boolean;
 }) => {
   
   const cardItemsHTML = data.cards.reduce((total: string, card: Card) => {
     const { cvvLabel } = getCardFormLabels(data.customStyles).labels;
-
+    console.log("data.hasCOF", data.hasCOF)
     return `${total}
     <div class="ac" id="option_container-${card.skyflow_id}">
       <div class="card-item">
@@ -509,7 +511,7 @@ export const cardItemsTemplate = (data: {
       <div class="ac-panel">
         <div class="ac-option-panel-container" id="acContainer${card.skyflow_id}">
 
-           ${!card.subscription_id ? `
+           ${!card.subscription_id || !data.hasCOF ? `
            <div class="cvvContainer" id="cvvContainer${card.skyflow_id}">
              <label class="tndr-form-label label-cvv-cards">${cvvLabel}</label>
               <div id="${data.collectorIds.cvv}${card.skyflow_id}" class="empty-div">

package/src/helpers/utils.ts

@@ -420,6 +420,18 @@ export const getPaymentMethodDetails = (scheme_data: string): {icon: string; lab
       label: "Acyvalores",
       icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",
     },
+      [PAYMENT_METHOD.SAFETYPAYCASH]: {
+          label: "Paga en Efectivo",
+          icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/cash_apm_sp.png",
+      },
+      [PAYMENT_METHOD.SAFETYPAYTRANSFER]: {
+          label: "Paga por Transferencia",
+          icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/transfer_apm_sp.png",
+      },
+      [PAYMENT_METHOD.NEOSURF]: {
+          label: "Neosurf",
+          icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/neosurf.png",
+      },
   };
 
   const _default = {