@tonder.io/ionic-full-sdk 0.0.62 → 1.0.0-beta.develop.fcbbea8

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/classes/inlineCheckout.d.ts

@@ -2,7 +2,7 @@ import { CollectorIds } from '../helpers/template';
 import { BaseInlineCheckout } from "@tonder.io/ionic-lite-sdk";
 import { IProcessPaymentRequest } from "@tonder.io/ionic-lite-sdk/dist/types/checkout";
 import { ITonderPaymentMethod } from "@tonder.io/ionic-lite-sdk/dist/types/paymentMethod";
-import { IInlineCheckoutOptions, IInlineCustomizationOptions, InCollectorContainer } from "../types/commons";
+import { ICardStyles, IInlineCheckoutOptions, IInlineCustomizationOptions, InCollectorContainer } from "../types/commons";
 import { IInlineCheckout } from "../types/inlineCheckout";
 export declare class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptions> implements IInlineCheckout {
     #private;
@@ -12,7 +12,7 @@ export declare class InlineCheckout extends BaseInlineCheckout<IInlineCustomizat
     deletingCards: string[];
     renderPaymentButton: boolean;
     renderSaveCardButton?: boolean;
-    customStyles: Record<string, string> | undefined;
+    customStyles: ICardStyles | undefined;
     injectInterval: ReturnType<typeof setInterval> | undefined;
     abortRefreshCardsController: AbortController;
     containerId: string;

package/dist/helpers/skyflow.d.ts

@@ -1,8 +1,8 @@
 import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
 import { CollectorIds } from "./template";
-import { IEvents, InCollectorContainer } from "../types/commons";
-export declare function initSkyflow(vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string, events?: IEvents): Promise<InCollectorContainer>;
-export declare function initUpdateSkyflow(skyflowId: string, vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string, events?: IEvents): Promise<{
+import { IEvents, InCollectorContainer, ICardStyles } from "../types/commons";
+export declare function initSkyflow(vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: ICardStyles | any, collectorIds: CollectorIds, apiKey: string, events?: IEvents, mode?: string): Promise<InCollectorContainer>;
+export declare function initUpdateSkyflow(skyflowId: string, vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: ICardStyles | any, collectorIds: CollectorIds, apiKey: string, events?: IEvents, mode?: string): Promise<{
     container: import("skyflow-js").CollectContainer;
     elements: {
         cvvElement: CollectElement;

package/dist/index.js

@@ -1 +1 @@
-import n from"lodash.get";import e from"skyflow-js";import{BaseInlineCheckout as t}from"@tonder.io/ionic-lite-sdk";import o from"accordion-js";function i(n,e,t,o){return new(t||(t=Promise))((function(i,r){function a(n){try{s(o.next(n))}catch(n){r(n)}}function l(n){try{s(o.throw(n))}catch(n){r(n)}}function s(n){var e;n.done?i(n.value):(e=n.value,e instanceof t?e:new t((function(n){n(e)}))).then(a,l)}s((o=o.apply(n,e||[])).next())}))}function r(n,e,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?n!==e||!o:!e.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(n):o?o.value:e.get(n)}function a(n,e,t,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 e?n!==e||!i:!e.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,t):i?i.value=t:e.set(n,t),t}var l;"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"}(l||(l={}));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,e=null,t="msgError",o="msgErrorText"){try{const i=e&&"new"!==e;let r=document.getElementById(`${t}${i?e:""}`),a=document.getElementById(`${o}${i?e:""}`);a.innerHTML="",a.innerHTML=n,r.style.display="flex",setTimeout((function(){r.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",u=n=>{const e=Object.assign({},n.fields),t=e.card_number.split("-"),o=t[t.length-1];return e.card_number=`••••${o}`,e},p=n=>n.trim().replace(/\s+/g,"");const h=(n={isEnrollmentCard:!1,collectorIds:{}})=>{var e,t,o,i,r,a,l,d,u,p,h,m,v,b,f,g,x,C,E,A,_,I,S,w,O,N,k,P,L,R,M,j,T,B,D,$,F,z,Y,U,H,W,K,G,X,V,q,J,Z,Q,nn,en,tn,on,rn,an,ln,sn,dn,cn,un,pn,hn,mn,vn,yn,bn,fn,gn,xn,Cn,En;return`\n<div class="container-tonder">\n  ${(null===(t=null===(e=n.customization)||void 0===e?void 0:e.saveCards)||void 0===t?void 0:t.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===(r=n.customization)||void 0===r?void 0:r.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===(u=null===(d=null===(l=null==n?void 0:n.customStyles)||void 0===l?void 0:l.labelStyles)||void 0===d?void 0:d.base)||void 0===u?void 0:u.lineHeight)?null===(m=null===(h=null===(p=null==n?void 0:n.customStyles)||void 0===p?void 0:p.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===(_=null===(A=null===(E=null==n?void 0:n.customStyles)||void 0===E?void 0:E.labelStyles)||void 0===A?void 0:A.base)||void 0===_?void 0:_.fontFamily)?null===(w=null===(S=null===(I=null==n?void 0:n.customStyles)||void 0===I?void 0:I.labelStyles)||void 0===S?void 0:S.base)||void 0===w?void 0:w.fontFamily:s.labelStyles.base.fontFamily};\n    font-weight: ${(null===(k=null===(N=null===(O=null==n?void 0:n.customStyles)||void 0===O?void 0:O.labelStyles)||void 0===N?void 0:N.base)||void 0===k?void 0:k.fontWeight)?null===(R=null===(L=null===(P=null==n?void 0:n.customStyles)||void 0===P?void 0:P.labelStyles)||void 0===L?void 0:L.base)||void 0===R?void 0:R.fontWeight:s.labelStyles.base.fontWeight};\n    text-align: ${(null===(T=null===(j=null===(M=null==n?void 0:n.customStyles)||void 0===M?void 0:M.labelStyles)||void 0===j?void 0:j.base)||void 0===T?void 0:T.textAlign)?null===($=null===(D=null===(B=null==n?void 0:n.customStyles)||void 0===B?void 0:B.labelStyles)||void 0===D?void 0:D.base)||void 0===$?void 0:$.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===(W=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===W?void 0:W.lineHeight:"22px"};\n    color: ${(null===(X=null===(G=null===(K=null==n?void 0:n.customStyles)||void 0===K?void 0:K.labelStyles)||void 0===G?void 0:G.base)||void 0===X?void 0:X.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===(tn=null===(en=null==n?void 0:n.customStyles)||void 0===en?void 0:en.labelStyles)||void 0===tn?void 0:tn.base)||void 0===on?void 0:on.fontSize:s.labelStyles.base.fontSize};\n    font-family: ${(null===(ln=null===(an=null===(rn=null==n?void 0:n.customStyles)||void 0===rn?void 0:rn.labelStyles)||void 0===an?void 0:an.base)||void 0===ln?void 0:ln.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===(pn=null===(un=null==n?void 0:n.customStyles)||void 0===un?void 0:un.labelStyles)||void 0===pn?void 0:pn.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===(En=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===En?void 0:En.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=e=>`\n  <div class="accordion-container">\n    ${e.cards.reduce(((t,o)=>{var i,r;const{cvvLabel:a}=(l=e.customStyles,{labels:{nameLabel:n(l,"labels.nameLabel",s.labels.nameLabel),cardLabel:n(l,"labels.cardLabel",s.labels.cardLabel),cvvLabel:n(l,"labels.cvvLabel",s.labels.cvvLabel),expiryDateLabel:n(l,"labels.expiryDateLabel",s.labels.expiryDateLabel)},placeholders:{namePlaceholder:n(l,"placeholders.namePlaceholder",s.placeholders.namePlaceholder),cardPlaceholder:n(l,"placeholders.cardPlaceholder",s.placeholders.cardPlaceholder),cvvPlaceholder:n(l,"placeholders.cvvPlaceholder",s.placeholders.cvvPlaceholder),expiryMonthPlaceholder:n(l,"placeholders.expiryMonthPlaceholder",s.placeholders.expiryMonthPlaceholder),expiryYearPlaceholder:n(l,"placeholders.expiryYearPlaceholder",s.placeholders.expiryYearPlaceholder)}}).labels;var l;return`${t}\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&&e.hasCOF?"":`\n           <div class="cvvContainer" id="cvvContainer${o.skyflow_id}">\n             <label class="tndr-form-label label-cvv-cards">${a}</label>\n              <div id="${e.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:e.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${e.collectorIds.tonderPayButton}${o.skyflow_id}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${e.collectorIds.msgError}${o.skyflow_id}`,msgErrorTextId:`${e.collectorIds.msgErrorText}${o.skyflow_id}`,msgNotificationId:`${e.collectorIds.msgNotification}${o.skyflow_id}`,msgNotificationTextId:`${e.collectorIds.msgNotificationText}${o.skyflow_id}`,buttonText:null===(r=null===(i=e.customization)||void 0===i?void 0:i.paymentButton)||void 0===r?void 0:r.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==e?void 0:e.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(((e,t)=>{var o,i;const r=(n=>{const e=p(n.toUpperCase());return{[l.SORIANA]:{label:"Soriana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/soriana.png"},[l.OXXO]:{label:"Oxxo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxo.png"},[l.CODI]:{label:"CoDi",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/codi.png"},[l.SPEI]:{label:"SPEI",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/spei.png"},[l.PAYPAL]:{label:"Paypal",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/paypal.png"},[l.COMERCIALMEXICANA]:{label:"Comercial Mexicana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/comercial_exicana.png"},[l.BANCOMER]:{label:"Bancomer",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bancomer.png"},[l.WALMART]:{label:"Walmart",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/walmart.png"},[l.BODEGA]:{label:"Bodega Aurrera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bodega_aurrera.png"},[l.SAMSCLUB]:{label:"Sam´s Club",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/sams_club.png"},[l.SUPERAMA]:{label:"Superama",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/superama.png"},[l.CALIMAX]:{label:"Calimax",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/calimax.png"},[l.EXTRA]:{label:"Tiendas Extra",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/tiendas_extra.png"},[l.CIRCULOK]:{label:"Círculo K",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png"},[l.MERCADOPAGO]:{label:"Mercado Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png"},[l.OXXOPAY]:{label:"Oxxo Pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png"},[l.SEVEN11]:{label:"7 Eleven",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png"},[l.TELECOMM]:{label:"Telecomm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/telecomm.png"},[l.BANORTE]:{label:"Banorte",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/banorte.png"},[l.BENAVIDES]:{label:"Farmacias Benavides",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_benavides.png"},[l.DELAHORRO]:{label:"Farmacias del Ahorro",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_ahorro.png"},[l.ELASTURIANO]:{label:"El Asturiano",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/asturiano.png"},[l.WALDOS]:{label:"Waldos",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/waldos.png"},[l.ALSUPER]:{label:"Alsuper",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/al_super.png"},[l.KIOSKO]:{label:"Kiosko",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/kiosko.png"},[l.STAMARIA]:{label:"Farmacias Santa María",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_santa_maria.png"},[l.LAMASBARATA]:{label:"Farmacias la más barata",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_barata.png"},[l.FARMROMA]:{label:"Farmacias Roma",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_roma.png"},[l.FARMUNION]:{label:"Pago en Farmacias Unión",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_union.png"},[l.FARMATODO]:{label:"Pago en Farmacias Farmatodo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_farmatodo.png\t"},[l.SFDEASIS]:{label:"Pago en Farmacias San Francisco de Asís",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_san_francisco.png"},[l.FARM911]:{label:"Farmacias 911",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.FARMECONOMICAS]:{label:"Farmacias Economicas",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.FARMMEDICITY]:{label:"Farmacias Medicity",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.RIANXEIRA]:{label:"Rianxeira",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.WESTERNUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.ZONAPAGO]:{label:"Zona Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.CAJALOSANDES]:{label:"Caja Los Andes",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.CAJAPAITA]:{label:"Caja Paita",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.CAJASANTA]:{label:"Caja Santa",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.CAJASULLANA]:{label:"Caja Sullana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.CAJATRUJILLO]:{label:"Caja Trujillo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.EDPYME]:{label:"Edpyme",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.KASNET]:{label:"KasNet",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.NORANDINO]:{label:"Norandino",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.QAPAQ]:{label:"Qapaq",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.RAIZ]:{label:"Raiz",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.PAYSER]:{label:"Paysera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.WUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.BANCOCONTINENTAL]:{label:"Banco Continental",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.GMONEY]:{label:"Go money",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.GOPAY]:{label:"Go pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.WU]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.PUNTOSHEY]:{label:"Puntoshey",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.AMPM]:{label:"Ampm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.JUMBOMARKET]:{label:"Jumbomarket",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.SMELPUEBLO]:{label:"Smelpueblo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.BAM]:{label:"Bam",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.REFACIL]:{label:"Refacil",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.ACYVALORES]:{label:"Acyvalores",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[l.SAFETYPAYCASH]:{label:"Paga en Efectivo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/cash_apm_sp.png"},[l.SAFETYPAYTRANSFER]:{label:"Paga por Transferencia",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/transfer_apm_sp.png"},[l.NEOSURF]:{label:"Neosurf",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/neosurf.png"}}[e]||{icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",label:""}})(t.payment_method);return`\n    ${e}\n    <div class="ac ac-paymentMethods" id="option_container-${t.pk}">\n      <div class="apm-item">\n          <input id="${t.pk}" class="paymentMethods card_selected" name="card_selected" type="radio"/>\n          <label class="apm-item-label" for="${t.pk}">\n            <div class="apm-image">\n              <div class="apm-image-border"></div>\n              <img src="${r.icon}" />\n            </div>\n            <div class="apm-name">${r.label}</div>\n          </label>\n      </div>\n      <div class="ac-panel">\n        <div class="ac-option-panel-container tndr-pm-item-container" id="acContainer${t.pk}">\n         ${y({showButton:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${n.collectorIds.tonderPayButton}${t.pk}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${n.collectorIds.msgError}${t.pk}`,msgErrorTextId:`${n.collectorIds.msgErrorText}${t.pk}`,msgNotificationId:`${n.collectorIds.msgNotification}${t.pk}`,msgNotificationTextId:`${n.collectorIds.msgNotificationText}${t.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,t,o,r){return i(this,arguments,void 0,(function*(n,t,o,i,r={},a,l,d){var c,u,p,h,m,v,y,b,x,A,_,I,S,w,O,N,k,P,L,R,M,j,T,B,D,$,F,z,Y,U,H,W,K,G,X,V,q,J;const Z=(yield f(n,t,o,l,i)).container(e.ContainerType.COLLECT);var Q=0===Object.keys(r).length?s:Object.assign(Object.assign({},r),{labels:{nameLabel:(null===(c=null==r?void 0:r.labels)||void 0===c?void 0:c.nameLabel)&&""!==(null===(u=null==r?void 0:r.labels)||void 0===u?void 0:u.nameLabel)?null===(p=null==r?void 0:r.labels)||void 0===p?void 0:p.nameLabel:s.labels.nameLabel,cardLabel:(null===(h=null==r?void 0:r.labels)||void 0===h?void 0:h.cardLabel)&&""!==(null===(m=null==r?void 0:r.labels)||void 0===m?void 0:m.cardLabel)?null===(v=null==r?void 0:r.labels)||void 0===v?void 0:v.cardLabel:s.labels.cardLabel,cvvLabel:(null===(y=null==r?void 0:r.labels)||void 0===y?void 0:y.cvvLabel)&&""!==(null===(b=null==r?void 0:r.labels)||void 0===b?void 0:b.cvvLabel)?null===(x=null==r?void 0:r.labels)||void 0===x?void 0:x.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(A=null==r?void 0:r.labels)||void 0===A?void 0:A.expiryDateLabel)&&""!==(null===(_=null==r?void 0:r.labels)||void 0===_?void 0:_.expiryDateLabel)?null===(I=null==r?void 0:r.labels)||void 0===I?void 0:I.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(S=null==r?void 0:r.placeholders)||void 0===S?void 0:S.namePlaceholder)&&""!==(null===(w=null==r?void 0:r.placeholders)||void 0===w?void 0:w.namePlaceholder)?null===(O=null==r?void 0:r.placeholders)||void 0===O?void 0:O.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(N=null==r?void 0:r.placeholders)||void 0===N?void 0:N.cardPlaceholder)&&""!==(null===(k=null==r?void 0:r.placeholders)||void 0===k?void 0:k.cardPlaceholder)?null===(P=null==r?void 0:r.placeholders)||void 0===P?void 0:P.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(L=null==r?void 0:r.placeholders)||void 0===L?void 0:L.cvvPlaceholder)&&""!==(null===(R=null==r?void 0:r.placeholders)||void 0===R?void 0:R.cvvPlaceholder)?null===(M=null==r?void 0:r.placeholders)||void 0===M?void 0:M.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(j=null==r?void 0:r.placeholders)||void 0===j?void 0:j.expiryMonthPlaceholder)&&""!==(null===(T=null==r?void 0:r.placeholders)||void 0===T?void 0:T.expiryMonthPlaceholder)?null===(B=null==r?void 0:r.placeholders)||void 0===B?void 0:B.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===(D=null==r?void 0:r.placeholders)||void 0===D?void 0:D.expiryYearPlaceholder)&&""!==(null===($=null==r?void 0:r.placeholders)||void 0===$?void 0:$.expiryYearPlaceholder)?null===(F=null==r?void 0:r.placeholders)||void 0===F?void 0:F.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const nn=Object.assign({},Q.inputStyles.base);nn.textIndent="44px";const en={type:e.ValidationRuleType.LENGTH_MATCH_RULE,params:{max:70,error:"El campo nombre del titular debe tener menos de 70 caracteres"}},tn=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:e.ElementType.CARDHOLDER_NAME,validations:[en,C]}));E({element:tn,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===(W=Q.placeholders)||void 0===W?void 0:W.cardPlaceholder,type:e.ElementType.CARD_NUMBER,validations:[C]}));E({element:on,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:null===(K=null==Q?void 0:Q.labels)||void 0===K?void 0:K.cardLabel,events:null==d?void 0:d.cardNumberEvents});const rn=Z.create(Object.assign(Object.assign({table:"cards",column:"cvv"},Q),{label:null===(G=Q.labels)||void 0===G?void 0:G.cvvLabel,placeholder:null===(X=Q.placeholders)||void 0===X?void 0:X.cvvPlaceholder,type:e.ElementType.CVV,validations:[C]}));E({element:rn,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:e.ElementType.EXPIRATION_MONTH,validations:[C]}));E({element:an,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.monthEvents});const ln=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:e.ElementType.EXPIRATION_YEAR,validations:[C]}));E({element:ln,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:rn,container:`#${a.cvv}`},expiryMonth:{element:an,container:`#${a.expirationMonth}`},expiryYear:{element:ln,container:`#${a.expirationYear}`},cardHolderName:{element:tn,container:`#${a.holderName}`}};return yield g(sn),{container:Z,elements:{cardHolderNameElement:tn,cardNumberElement:on,cvvElement:rn,expiryMonthElement:an,expiryYearElement:ln}}}))}function f(n,t,o,r,a){return i(this,void 0,void 0,(function*(){return e.init({vaultID:n,vaultURL:t,getBearerToken:()=>i(this,void 0,void 0,(function*(){const n=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${r}`},signal:a});if(n.ok){return(yield n.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:e.LogLevel.ERROR,env:e.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[e,{element:t,container:o}]of Object.entries(n))t&&o?t.mount(o):console.warn(`Skipping mount for '${e}' due to missing element or container.`)}))}const x=RegExp("^(?!s*$).+"),C={type:e.ValidationRuleType.REGEX_MATCH_RULE,params:{regex:x,error:"Campo requerido"}};function E(n){const{element:t,fieldMessage:o="",errorStyles:i={},requiredMessage:r="Campo requerido",invalidMessage:a="Campo no válido",events:l}=n;"on"in t&&(t.on(e.EventName.CHANGE,(n=>{_({eventName:"onChange",data:n,events:l}),A({element:t,errorStyles:i,color:"transparent"})})),t.on(e.EventName.BLUR,(n=>{if(_({eventName:"onBlur",data:n,events:l}),!n.isValid){const e=n.isEmpty?r:""!=o?`El campo ${o} no es válido`:a;t.setError(e)}A({element:t,errorStyles:i})})),t.on(e.EventName.FOCUS,(n=>{_({eventName:"onFocus",data:n,events:l}),A({element:t,errorStyles:i,color:"transparent"}),t.resetError()})))}function A(n){const{element:e,errorStyles:t={},color:o=""}=n;Object.keys(t).length>0&&e.update({errorTextStyles:Object.assign(Object.assign({},t),{base:Object.assign(Object.assign({},t.base&&Object.assign({},t.base)),""!=o&&{color:o})})})}const _=e=>{const{eventName:t,data:o,events:i}=e;if(i&&t in i){const e=i[t];"function"==typeof e&&e({elementType:n(o,"elementType",""),isEmpty:n(o,"isEmpty",!1),isFocused:n(o,"isFocused",!1),isValid:n(o,"isValid",!1)})}};var I;!function(n){n.SAVE_CARD_ERROR="SAVE_CARD_ERROR",n.PAYMENT_PROCESS_ERROR="PAYMENT_PROCESS_ERROR",n.CARD_ON_FILE_DECLINED="CARD_ON_FILE_DECLINED",n.UNKNOWN_ERROR="UNKNOWN_ERROR"}(I||(I={}));const S={[I.CARD_ON_FILE_DECLINED]:"Transaction declined. Please verify your card details.",[I.UNKNOWN_ERROR]:"An unexpected error occurred."},w={[I.CARD_ON_FILE_DECLINED]:"Transaccion declinada. Verique los datos de su tarjeta.",[I.UNKNOWN_ERROR]:"Ocurrió un error inesperado."},O="__tonderLockErrorCode__";function N(n){return"object"==typeof n&&null!==n}class k extends Error{constructor(n){var e,t;const o=k.resolveStatusCode(n.statusCode,n.originalError),i=k.resolveMessage(n.errorCode,n.message),r=k.resolveSystemError(null===(e=n.details)||void 0===e?void 0:e.systemError,n.originalError);super(i),this.status="error",Object.setPrototypeOf(this,new.target.prototype),this.name="TonderError",this.code=n.errorCode,this.statusCode=o,this.originalError=n.originalError,this.details={code:n.errorCode,statusCode:o,systemError:r},n.lockErrorCode&&Object.defineProperty(this,O,{value:!0,enumerable:!1,configurable:!0}),null===(t=Error.captureStackTrace)||void 0===t||t.call(Error,this,k)}static isRecord(n){return"object"==typeof n&&null!==n}static parseStatusCode(n){const e=Number(n);return Number.isFinite(e)?e<100||e>599?500:Math.trunc(e):500}static resolveStatusCode(n,e){const t=[n];if(k.isRecord(e)){t.push(e.statusCode,e.status);const n=k.isRecord(e.body)?e.body:null;n&&t.push(n.statusCode,n.status)}for(const n of t)if(k.isHttpStatusCode(n))return Math.trunc(Number(n));return 500}static resolveMessage(n,e){return e||(S[n]||S[I.UNKNOWN_ERROR]||"An unexpected error occurred.")}static isHttpStatusCode(n){const e=Number(n);return Number.isFinite(e)&&e>=100&&e<=599}static normalizeSystemError(n){if("string"!=typeof n)return null;return n.trim()||null}static resolveSystemError(n,e){const t=[n];if(k.isRecord(e)){const n=k.isRecord(e.details)?e.details:null,o=k.isRecord(e.body)?e.body:null,i=o&&k.isRecord(o.details)?o.details:null;t.push(e.systemError,e.code,null==n?void 0:n.systemError,null==n?void 0:n.code,null==o?void 0:o.systemError,null==o?void 0:o.code,null==i?void 0:i.systemError,null==i?void 0:i.code)}for(const n of t){const e=k.normalizeSystemError(n);if(e)return e}return"APP_INTERNAL_001"}}function P(n){return N(n)&&!0===n[O]}function L(n){return n instanceof k&&void 0!==n.originalError?n.originalError:n}function R(n,e){var t;if(!(null==n?void 0:n.errorCode))throw new Error("buildPublicAppError requires errorCode");const o=null===(t=n.details)||void 0===t?void 0:t.systemError,i=!!n.message||void 0!==n.statusCode||void 0!==o;return!function(n){return N(n)&&"TonderError"===n.name&&"string"==typeof n.code}(e)||(n.lockErrorCode&&function(n){Object.defineProperty(n,O,{value:!0,enumerable:!1,configurable:!0})}(e),i||n.errorCode!==e.code&&!P(e))?new k({errorCode:n.errorCode,message:n.message,statusCode:n.statusCode,details:void 0!==o?{systemError:o}:void 0,originalError:L(e),lockErrorCode:n.lockErrorCode||P(e)}):e}function M(n){return i(this,void 0,void 0,(function*(){var e,t;const o=yield function(n){return i(this,void 0,void 0,(function*(){try{return yield n.clone().json()}catch(n){}try{return(yield n.text())||void 0}catch(n){return}}))}(n.response),r={status:n.response.status};return n.response.statusText&&(r.statusText=n.response.statusText),void 0!==o&&(r.body=o),new k({errorCode:n.errorCode,message:n.message,statusCode:null!==(e=n.statusCode)&&void 0!==e?e:n.response.status,details:void 0!==(null===(t=n.details)||void 0===t?void 0:t.systemError)?{systemError:n.details.systemError}:void 0,originalError:r,lockErrorCode:n.lockErrorCode})}))}function j(n,e){return(null==n?void 0:n.response)?M(n):R(n,e)}const T=Object.freeze({name:"@tonder.io/ionic-full-sdk",version:"0.0.62"});var B,D,$,F,z,Y,U,H,W,K,G,X,V,q,J,Z,Q,nn,en,tn,on,rn,an,ln,sn,dn,cn,un;class pn extends t{constructor({apiKey:n,returnUrl:e,renderPaymentButton:t=!1,callBack:o=()=>{},styles:i,containerId:l,collectorIds:s,isOpenPaySandbox:d,isEnrollmentCard:c,renderSaveCardButton:u,mode:p="stage",customization:h,events:m}){var v,y;super({apiKey:n,returnUrl:e,mode:p,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",sdkInfo:T}),B.add(this),this.paymentData={},this.deletingCards=[],D.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}}),F.set(this,void 0),this.renderPaymentButton=t||!1,this.renderSaveCardButton=u,this.customStyles=i,a(this,F,m,"f"),this.abortRefreshCardsController=new AbortController,this.containerId=l||"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({},r(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=r(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 e;n&&(this.paymentData=n,this.setCartTotal((null===(e=n.cart)||void 0===e?void 0:e.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 r(this,B,"m",on).call(this),void(this.injected=!0);const e=new MutationObserver(((n,e)=>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 r(this,B,"m",on).call(this),this.injected=!0,e.disconnect())}))));e.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,e)=>i(this,void 0,void 0,(function*(){try{yield r(this,B,"m",sn).call(this,!0,"Guardando..."),yield r(this,B,"m",dn).call(this),n("Tarjeta registrada con éxito")}catch(n){e(n)}finally{yield r(this,B,"m",sn).call(this)}}))))}))}_setCartTotal(n){this.cartTotal=n,r(this,B,"m",q).call(this)}setCartTotal(n){this.cartTotal=n,r(this,B,"m",q).call(this)}_checkout(){return i(this,void 0,void 0,(function*(){var n;let e,t=null;try{if(r(this,B,"m",q).call(this,{cardId:this.radioChecked,textContent:"Cargando...",disabled:!0}),this.merchantData){const{business:o}=this.merchantData;let i,a=!1;const l="new"===this.radioChecked||void 0===this.radioChecked;let s=null;const c=this.apmsData?this.apmsData.find((n=>n.pk===this.radioChecked)):null,u=yield this._getCustomer(),{auth_token:p}=u;if(e=p,l){if(i=yield r(this,B,"m",ln).call(this,this.collectorIds.tonderPayButton,this.radioChecked),this._hasCardOnFileKeys()&&i){const n={records:[{fields:i}]},e=yield r(this,B,"m",cn).call(this,n);if(s={subscriptionId:e.subscriptionId},t=e.cardId,!t||!s.subscriptionId)throw j({errorCode:I.CARD_ON_FILE_DECLINED,lockErrorCode:!0,message:S[I.CARD_ON_FILE_DECLINED]});a=!0}}else if(!c){const e=r(this,D,"f").find((n=>{var e;return(null===(e=n.fields)||void 0===e?void 0:e.skyflow_id)===this.radioChecked}));(null===(n=null==e?void 0:e.fields)||void 0===n?void 0:n.subscription_id)&&this._hasCardOnFileKeys()?s={subscriptionId:e.fields.subscription_id}:yield r(this,B,"m",ln).call(this,this.collectorIds.tonderPayButton,this.radioChecked),i={skyflow_id:this.radioChecked}}if(!a&&i){const n="skyflow_id"in i?i.skyflow_id:"",e=yield r(this,B,"m",un).call(this,p,o.pk,{skyflow_id:n});t=(null==e?void 0:e.skyflow_id)||null}const h=Object.assign(Object.assign({},c&&Object.keys(c).length>0?{payment_method:c.payment_method}:{card:i}),{enable_card_on_file:!!(null==s?void 0:s.subscriptionId)&&this._hasCardOnFileKeys(),customer:u}),m=yield this._handleCheckout(h);return r(this,B,"m",q).call(this,{cardId:this.radioChecked,disabled:!1}),m||(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){t&&e&&(this.cardsInjected=!1,yield this._removeCustomerCard(e,this.merchantData.business.pk,t),yield r(this,B,"m",z).call(this,e)),this.reportSdkError(n,{feature:"payment",process_id:t||this.radioChecked||this.getCustomerId(),metadata:{step:"_checkout"}});throw d((null==n?void 0:n.code)===I.CARD_ON_FILE_DECLINED?w[I.CARD_ON_FILE_DECLINED]:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),n}finally{r(this,B,"m",q).call(this,{cardId:this.radioChecked,disabled:!1})}}))}}D=new WeakMap,$=new WeakMap,F=new WeakMap,B=new WeakSet,z=function(e){return i(this,void 0,void 0,(function*(){var t;if(this.cardsInjected||!(null===(t=this.customization.saveCards)||void 0===t?void 0:t.showSaved)||this.isEnrollmentCard)return;this.cardsInjected=!1;const o=yield this._getCustomerCards(e,this.merchantData.business.pk);a(this,D,n(o,"cards",[]),"f");let i=[];if("cards"in o){i=o.cards.map(u);const n=setInterval((()=>{const t=document.querySelector(`#${this.collectorIds.cardsListContainer}`);t&&this.injected&&(t.innerHTML=m({cards:i,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customStyles:this.customStyles,customization:this.customization,hasCOF:this._hasCardOnFileKeys()}),clearInterval(n),r(this,B,"m",Y).call(this),r(this,B,"m",J).call(this,e),this.cardsInjected=!0)}),500)}}))},Y=function(n="cards"){const e={cards:{accClass:"accordion-container",triggerClass:"card-item-label"},paymentMethods:{accClass:"accordion-container-apm",triggerClass:"apm-item-label"}},t=new o("."+e[n].accClass,{triggerClass:e[n].triggerClass,duration:300,collapse:!0,showMultiple:!1,onOpen:e=>i(this,void 0,void 0,(function*(){yield r(this,B,"m",W).call(this,e,n)}))});"cards"===n?this.accordionCards=t:"paymentMethods"===n&&(this.accordionPaymentMethods=t)},U=function(n="",e=null,t=!1,o=!1){[{type:"cards",accordion:this.accordionCards},{type:"paymentMethods",accordion:this.accordionPaymentMethods}].forEach((({accordion:i,type:a})=>{i&&(t&&"closeAll"in i&&i.closeAll(),o&&a!==n&&i.closeAll&&i.closeAll(),null!==e&&a===n&&i.open&&i.open("paymentMethods"!==a?e:e-(r(this,D,"f").length+1)))}))},H=function(n=[],e="show"){n.forEach((n=>{document.querySelectorAll("."+n).forEach((n=>{n.classList.remove(e)}))}))},W=function(n){return i(this,arguments,void 0,(function*(n,t="cards"){var o,a,l;const{vault_id:d,vault_url:c}=this.merchantData,u=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(),r(this,B,"m",H).call(this,["cvvContainer"]);const p=document.getElementById(u);p&&(p.checked=!0);const h=r(this,D,"f").find((n=>{var e;return(null===(e=n.fields)||void 0===e?void 0:e.skyflow_id)===u})),m=!!(null===(l=null==h?void 0:h.fields)||void 0===l?void 0:l.subscription_id);try{"cards"!==t||m&&this._hasCardOnFileKeys()||(this.updateCollectContainer=yield function(n,t,o,r,a){return i(this,arguments,void 0,(function*(n,t,o,i,r,a={},l,d,c){var u,p,h,m,v,y,b,x,A,_,I,S,w,O,N,k,P,L,R,M,j,T,B,D,$,F,z,Y;const U=yield f(t,o,i,d,r);var H=0===Object.keys(a).length?s:Object.assign(Object.assign({},a),{labels:{nameLabel:(null===(u=null==a?void 0:a.labels)||void 0===u?void 0:u.nameLabel)&&""!==(null===(p=null==a?void 0:a.labels)||void 0===p?void 0:p.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===(A=null==a?void 0:a.labels)||void 0===A?void 0:A.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(_=null==a?void 0:a.labels)||void 0===_?void 0:_.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:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(w=null==a?void 0:a.placeholders)||void 0===w?void 0:w.namePlaceholder)&&""!==(null===(O=null==a?void 0:a.placeholders)||void 0===O?void 0:O.namePlaceholder)?null===(N=null==a?void 0:a.placeholders)||void 0===N?void 0:N.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(k=null==a?void 0:a.placeholders)||void 0===k?void 0:k.cardPlaceholder)&&""!==(null===(P=null==a?void 0:a.placeholders)||void 0===P?void 0:P.cardPlaceholder)?null===(L=null==a?void 0:a.placeholders)||void 0===L?void 0:L.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(R=null==a?void 0:a.placeholders)||void 0===R?void 0:R.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===(D=null==a?void 0:a.placeholders)||void 0===D?void 0:D.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===($=null==a?void 0:a.placeholders)||void 0===$?void 0:$.expiryYearPlaceholder)&&""!==(null===(F=null==a?void 0:a.placeholders)||void 0===F?void 0:F.expiryYearPlaceholder)?null===(z=null==a?void 0:a.placeholders)||void 0===z?void 0:z.expiryYearPlaceholder:s.placeholders.expiryYearPlaceholder}});const W=U.container(e.ContainerType.COLLECT),K=W.create(Object.assign(Object.assign({table:"cards",column:"cvv"},H),{label:"",placeholder:null===(Y=H.placeholders)||void 0===Y?void 0:Y.cvvPlaceholder,type:e.ElementType.CVV,validations:[C],skyflowID:n}));E({element:K,errorStyles:null==H?void 0:H.errorTextStyles,fieldMessage:"",events:null==c?void 0:c.cvvEvents});const G={cvv:{element:K,container:`#${l.cvv}${n}`}};return yield g(G),{container:W,elements:{cvvElement:K}}}))}(u,d,c,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,F,"f")),setTimeout((()=>{const n=document.querySelector(`#cvvContainer${u}`);n&&n.classList.add("show")}),5)),r(this,B,"m",K).call(this,u)}catch(n){console.error("Ha ocurrido un error",n),this.reportSdkError(n,{feature:"handle-open-card-accordion",process_id:u,metadata:{step:"#handleOpenCardAccordion",type:t}})}yield r(this,B,"m",nn).call(this,p,null,t)}))},K=function(n=""){var e,t,o;if(!this.renderPaymentButton)return;const a=`#${this.collectorIds.tonderPayButton}${n}`;let l=document.querySelector(a);l||(l=document.querySelector(`#${this.collectorIds.tonderPayButton}`));const s=`#acContainer${n}`,d=document.querySelector(s);if(!l)return void console.error("Pay button not found");if(""!==n){const n=document.querySelector(`#${this.collectorIds.tonderPayButton}`);n&&(n.style.display="none")}l.style.display="block";const c=Intl.NumberFormat("en-Latn-US",{minimumFractionDigits:2}).format(Number(this.cartTotal||0));l.textContent=`${null===(t=null===(e=this.customization)||void 0===e?void 0:e.paymentButton)||void 0===t?void 0:t.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"),l.onclick=n=>i(this,void 0,void 0,(function*(){n.preventDefault(),yield r(this,B,"m",G).call(this)}))},G=function(){return i(this,void 0,void 0,(function*(){try{yield this.payment({})}catch(n){console.error("Payment error:",null==n?void 0:n.message,null==n?void 0:n.code,null==n?void 0:n.details)}}))},X=function(){if(!this.renderSaveCardButton)return;const n=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);n?(n.style.display="block",n.textContent="Guardar",n.onclick=e=>i(this,void 0,void 0,(function*(){e.preventDefault(),yield r(this,B,"m",V).call(this,n)}))):console.error("Save button not found")},V=function(n){return i(this,void 0,void 0,(function*(){const e=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=e}}))},q=function(n){var e,t,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}`,r=(null==n?void 0:n.updatedTextContent)||!0,a=(null==n?void 0:n.textContent)||`${null===(t=null===(e=this.customization)||void 0===e?void 0:e.paymentButton)||void 0===t?void 0:t.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,l=null==n?void 0:n.disabled,s=document.querySelector(i);if(!s)return;r&&(s.textContent=a),void 0!==l&&"disabled"in s&&(s.disabled=l)}catch(n){console.error("Pay button not found due to update",n)}},J=function(n=""){const e=document.getElementsByName("card_selected");for(const n of e)n.style.display="block",n.onclick=t=>i(this,void 0,void 0,(function*(){const t=n.classList[0],o=Array.from(e).indexOf(n);yield r(this,B,"m",nn).call(this,n,o,t)}));const t=document.getElementsByClassName("card-delete-button");for(const e of t)e.addEventListener("click",(t=>i(this,void 0,void 0,(function*(){t.preventDefault(),t.stopImmediatePropagation(),yield r(this,B,"m",Z).call(this,n,e)}))),!1)},Z=function(n,e){return i(this,void 0,void 0,(function*(){var t,o;const i=e.attributes.getNamedItem("id"),a=null===(o=null===(t=null==i?void 0:i.value)||void 0===t?void 0:t.split("_"))||void 0===o?void 0:o[2];if(a){const e=document.querySelector(`#card_container-${a}`);e&&(e.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 r(this,B,"m",Q).call(this,n)}}}))},Q=function(n){return i(this,void 0,void 0,(function*(){this.deletingCards.length>0||(this.cardsInjected=!1,yield r(this,B,"m",z).call(this,n))}))},nn=function(n){return i(this,arguments,void 0,(function*(n,e=null,t=""){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?(r(this,B,"m",H).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(),r(this,B,"m",U).call(this,"",null,!0),this.radioChecked!==n.id&&(yield r(this,B,"m",an).call(this),r(this,B,"m",K).call(this))):(r(this,B,"m",U).call(this,t,null,!1,!0),null!==e&&r(this,B,"m",U).call(this,t,e,!0),r(this,B,"m",rn).call(this)),this.radioChecked=n.id}))},en=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,r(this,B,"m",tn).call(this,n.results))}catch(n){console.warn("Error getting APMS")}}))},tn=function(n){if(this.apmsInjected)return;const e=setInterval((()=>{const t=document.querySelector(`#${this.collectorIds.apmsListContainer}`);t&&this.injected&&(t.innerHTML=v({apms:n,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),clearInterval(e),r(this,B,"m",Y).call(this,"paymentMethods"),r(this,B,"m",J).call(this),this.apmsInjected=!0)}),500)},on=function(){return i(this,void 0,void 0,(function*(){if(this.isEnrollmentCard?r(this,B,"m",X).call(this):r(this,B,"m",K).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:e}=this.merchantData;if(n){if(this.customer.email&&!this.isEnrollmentCard){const n=yield this._getCustomer();if("auth_token"in n){const{auth_token:e}=n;yield r(this,B,"m",z).call(this,e)}}this.isEnrollmentCard||(yield r(this,B,"m",en).call(this)),this.collectContainer=yield b(n,e,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,F,"f"))}}))},rn=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())},an=function(){return i(this,void 0,void 0,(function*(){yield this._initializeCheckout();const{vault_id:n,vault_url:e}=this.merchantData;n&&(this.collectContainer=yield b(n,e,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,F,"f")))}))},ln=function(n){return i(this,arguments,void 0,(function*(n,e=null){var t,o;try{const n=e&&"new"!==e?null===(t=this.updateCollectContainer)||void 0===t?void 0:t.container:null===(o=this.collectContainer)||void 0===o?void 0:o.container;if(n&&"collect"in n){const e=yield n.collect();return yield e.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}}))},sn=function(){return i(this,arguments,void 0,(function*(n=!1,e="Guardar"){try{const t=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);t&&(t.disabled=n,t.innerHTML=e)}catch(n){}}))},dn=function(){return i(this,void 0,void 0,(function*(){let n,e=null;if(this.customer.email)try{if(this.merchantData){const t=yield r(this,B,"m",ln).call(this,this.collectorIds.tonderSaveCardButton),o=yield this._getCustomer();if("auth_token"in o&&this.secureToken){const{auth_token:i,first_name:a="",last_name:l="",email:s}=o;if(n=i,this._hasCardOnFileKeys()){const n=yield r(this,B,"m",un).call(this,i,this.merchantData.business.pk,{skyflow_id:t.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0,refreshCards:!1});e=(null==n?void 0:n.skyflow_id)||null;const o=null==n?void 0:n.card_bin;if(!o)throw new Error("Card BIN not returned from save card");const d=yield this._initializeCardOnFile();let c;try{c=yield d.process({cardTokens:{name:t.cardholder_name,number:t.card_number,expiryMonth:t.expiration_month,expiryYear:t.expiration_year,cvv:t.cvv},cardBin:o,contactDetails:{firstName:a||"",lastName:l||"",email:s||""},customerId:i,currency:this.currency||"MXN"})}catch(n){throw j({errorCode:I.CARD_ON_FILE_DECLINED,lockErrorCode:!0,message:S[I.CARD_ON_FILE_DECLINED]},n)}yield r(this,B,"m",un).call(this,i,this.merchantData.business.pk,{skyflow_id:t.skyflow_id,subscription_id:c.subscriptionId},{forceSave:!0,showNotification:!0})}else yield r(this,B,"m",un).call(this,i,this.merchantData.business.pk,{skyflow_id:t.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(t){e&&n&&(yield this._removeCustomerCard(n,this.merchantData.business.pk,e)),this.reportSdkError(t,{feature:"save-card",process_id:e,metadata:{step:"#validateAndSaveCard"}});const o="object"==typeof t&&null!==t&&"message"in t;throw d((null==t?void 0:t.code)===I.CARD_ON_FILE_DECLINED?w[I.CARD_ON_FILE_DECLINED]:o?null==t?void 0:t.message:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),t}}))},cn=function(n){return i(this,void 0,void 0,(function*(){var e,t;let o=null;try{const i=yield this._initializeCardOnFile(),a=null===(t=null===(e=n.records)||void 0===e?void 0:e[0])||void 0===t?void 0:t.fields;if(!a)throw new Error("No card data returned from collect");const l=yield this._getCustomer(),{auth_token:s,first_name:d="",last_name:c="",email:u}=l,p=yield r(this,B,"m",un).call(this,s,this.merchantData.business.pk,{skyflow_id:a.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0,refreshCards:!1});o=(null==p?void 0:p.skyflow_id)||null;const h=null==p?void 0:p.card_bin;if(!h)throw new Error("Card BIN not returned from save card");let m;try{m=yield i.process({cardTokens:{name:a.cardholder_name,number:a.card_number,expiryMonth:a.expiration_month,expiryYear:a.expiration_year,cvv:a.cvv},cardBin:h,contactDetails:{firstName:d||"",lastName:c||"",email:u||""},customerId:s,currency:this.currency||"MXN"})}catch(n){throw n}return yield r(this,B,"m",un).call(this,s,this.merchantData.business.pk,{skyflow_id:a.skyflow_id,subscription_id:m.subscriptionId},{forceSave:!0,showNotification:!1}),{subscriptionId:m.subscriptionId,cardId:p.skyflow_id}}catch(n){return this.reportSdkError(n,{feature:"payment",process_id:o,metadata:{step:"#processCardOnFilePayment",error:n}}),{subscriptionId:null,cardId:o}}}))},un=function(n,e,t){return i(this,arguments,void 0,(function*(n,e,t,o={}){var i,a;if(!n||!(null===(i=this.customer)||void 0===i?void 0:i.email))return;const{forceSave:l=!1,showNotification:s=!0,appOrigin:c=!1,refreshCards:u=!0}=o,p=document.getElementById("save-checkout-card");if(l||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,e,t,c);return u&&(this.cardsInjected=!1,yield r(this,B,"m",z).call(this,n)),s&&function(n,e=null,t="msgNotification",o="msgNotificationText"){try{const i=e&&"new"!==e,r=document.getElementById(`${t}${i?e:""}`);if(r){let t=document.getElementById(`${o}${i?e:""}`);r.style.display="flex",t.innerHTML="",t.innerHTML=n,setTimeout((function(){r.style.display="none",t.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){this.reportSdkError(n,{feature:"save-card",process_id:t.skyflow_id||this.getCustomerId(),metadata:{step:"#handleSaveCard"}});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{pn as InlineCheckout};
+import t from"lodash.get";import n from"skyflow-js";import{BaseInlineCheckout as e}from"@tonder.io/ionic-lite-sdk";import o from"accordion-js";function i(t,n,e,o){return new(e||(e=Promise))((function(i,r){function a(t){try{l(o.next(t))}catch(t){r(t)}}function s(t){try{l(o.throw(t))}catch(t){r(t)}}function l(t){var n;t.done?i(t.value):(n=t.value,n instanceof e?n:new e((function(t){t(n)}))).then(a,s)}l((o=o.apply(t,n||[])).next())}))}function r(t,n,e,o){if("a"===e&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof n?t!==n||!o:!n.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?o:"a"===e?o.call(t):o?o.value:n.get(t)}function a(t,n,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 n?t!==n||!i:!n.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(t,e):i?i.value=e:n.set(t,e),e}var s;"function"==typeof SuppressedError&&SuppressedError,function(t){t.SORIANA="SORIANA",t.OXXO="OXXO",t.SPEI="SPEI",t.CODI="CODI",t.OXXOPAY="OXXOPAY",t.MERCADOPAGO="MERCADOPAGO",t.PAYPAL="PAYPAL",t.COMERCIALMEXICANA="COMERCIALMEXICANA",t.BANCOMER="BANCOMER",t.WALMART="WALMART",t.BODEGA="BODEGA",t.SAMSCLUB="SAMSCLUB",t.SUPERAMA="SUPERAMA",t.CALIMAX="CALIMAX",t.EXTRA="EXTRA",t.CIRCULOK="CIRCULOK",t.SEVEN11="7ELEVEN",t.TELECOMM="TELECOMM",t.BANORTE="BANORTE",t.BENAVIDES="BENAVIDES",t.DELAHORRO="DELAHORRO",t.ELASTURIANO="ELASTURIANO",t.WALDOS="WALDOS",t.ALSUPER="ALSUPER",t.KIOSKO="KIOSKO",t.STAMARIA="STAMARIA",t.LAMASBARATA="LAMASBARATA",t.FARMROMA="FARMROMA",t.FARMUNION="FARMUNION",t.FARMATODO="FARMATODO",t.SFDEASIS="SFDEASIS",t.FARM911="FARM911",t.FARMECONOMICAS="FARMECONOMICAS",t.FARMMEDICITY="FARMMEDICITY",t.RIANXEIRA="RIANXEIRA",t.WESTERNUNION="WESTERNUNION",t.ZONAPAGO="ZONAPAGO",t.CAJALOSANDES="CAJALOSANDES",t.CAJAPAITA="CAJAPAITA",t.CAJASANTA="CAJASANTA",t.CAJASULLANA="CAJASULLANA",t.CAJATRUJILLO="CAJATRUJILLO",t.EDPYME="EDPYME",t.KASNET="KASNET",t.NORANDINO="NORANDINO",t.QAPAQ="QAPAQ",t.RAIZ="RAIZ",t.PAYSER="PAYSER",t.WUNION="WUNION",t.BANCOCONTINENTAL="BANCOCONTINENTAL",t.GMONEY="GMONEY",t.GOPAY="GOPAY",t.WU="WU",t.PUNTOSHEY="PUNTOSHEY",t.AMPM="AMPM",t.JUMBOMARKET="JUMBOMARKET",t.SMELPUEBLO="SMELPUEBLO",t.BAM="BAM",t.REFACIL="REFACIL",t.ACYVALORES="ACYVALORES",t.SAFETYPAYCASH="SAFETYPAYCASH",t.SAFETYPAYTRANSFER="SAFETYPAYTRANSFER",t.NEOSURF="NEOSURF"}(s||(s={}));const l={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(t,n=null,e="msgError",o="msgErrorText"){try{const i=n&&"new"!==n;let r=document.getElementById(`${e}${i?n:""}`),a=document.getElementById(`${o}${i?n:""}`);a.innerHTML="",a.innerHTML=t,r.style.display="flex",setTimeout((function(){r.style.display="none",a.innerHTML=""}),3e4)}catch(t){console.warn("Error showing message error",t)}}const c=t=>"Visa"===t?"https://d35a75syrgujp0.cloudfront.net/cards/visa.png":"Mastercard"===t?"https://d35a75syrgujp0.cloudfront.net/cards/mastercard.png":"American Express"===t?"https://d35a75syrgujp0.cloudfront.net/cards/american_express.png":"https://d35a75syrgujp0.cloudfront.net/cards/default_card.png",u=t=>{const n=Object.assign({},t.fields),e=n.card_number.split("-"),o=e[e.length-1];return n.card_number=`••••${o}`,n},p=t=>t.trim().replace(/\s+/g,"");const m=(t={isEnrollmentCard:!1,collectorIds:{}})=>{var n,e,o,i,r,a,s,d,u,p,m,h,v,f,b,g,x,C,E,A,_,I,S,w,O,N,k,R,P,T,L,M,j,B,D,$,F,z,U,Y,H,W,K,G,X,V,q,J,Z,Q,tt,nt,et,ot,it,rt,at,st,lt,dt,ct,ut,pt,mt,ht,vt,yt,ft,bt,gt,xt,Ct;return`\n<div class="container-tonder">\n  ${(null===(e=null===(n=t.customization)||void 0===n?void 0:n.saveCards)||void 0===e?void 0:e.showSaved)?`<div id="${t.collectorIds.cardsListContainer}" class="cards-list-container"></div>`:""}\n  ${t.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="${t.collectorIds.holderName}" class="empty-div empty-div-card"></div>\n    <div id="${t.collectorIds.cardNumber}" class="empty-div empty-div-card"></div>\n    <div class="collect-row">\n      <div id="${t.collectorIds.expirationMonth}" class="empty-div empty-div-card"></div>\n      <div id="${t.collectorIds.expirationYear}" class="expiration-year"></div>\n      <div id="${t.collectorIds.cvv}" class="empty-div empty-div-card"></div>\n    </div>\n    ${!t.isEnrollmentCard&&(null===(i=null===(o=t.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:t.isEnrollmentCard?t.renderSaveCardButton||!1:t.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:t.isEnrollmentCard?t.collectorIds.tonderSaveCardButton:t.collectorIds.tonderPayButton,classButton:t.isEnrollmentCard?"tndr-button save-card-button":"tndr-button pay-button hidden",msgErrorId:t.collectorIds.msgError,msgErrorTextId:t.collectorIds.msgErrorText,msgNotificationId:t.collectorIds.msgNotification,msgNotificationTextId:t.collectorIds.msgNotificationText,buttonText:t.isEnrollmentCard?"Guardar":null===(a=null===(r=t.customization)||void 0===r?void 0:r.paymentButton)||void 0===a?void 0:a.text})}\n  </div>\n  ${t.isEnrollmentCard?"":'\n    <div id="apmsListContainer" class="apms-list-container"></div>\n  '}\n  \n  <iframe class="tds-iframe" allowtransparency="true" id="${t.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#${t.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: ${t.renderPaymentButton?"10px":""};\n  padding-bottom: ${t.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: ${t.renderPaymentButton||t.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===(u=null===(d=null===(s=null==t?void 0:t.customStyles)||void 0===s?void 0:s.labelStyles)||void 0===d?void 0:d.base)||void 0===u?void 0:u.lineHeight)?null===(h=null===(m=null===(p=null==t?void 0:t.customStyles)||void 0===p?void 0:p.labelStyles)||void 0===m?void 0:m.base)||void 0===h?void 0:h.lineHeight:""};\n    color: transparent;\n    font-size: ${(null===(b=null===(f=null===(v=null==t?void 0:t.customStyles)||void 0===v?void 0:v.labelStyles)||void 0===f?void 0:f.base)||void 0===b?void 0:b.fontSize)?null===(C=null===(x=null===(g=null==t?void 0:t.customStyles)||void 0===g?void 0:g.labelStyles)||void 0===x?void 0:x.base)||void 0===C?void 0:C.fontSize:l.labelStyles.base.fontSize};\n    font-family: ${(null===(_=null===(A=null===(E=null==t?void 0:t.customStyles)||void 0===E?void 0:E.labelStyles)||void 0===A?void 0:A.base)||void 0===_?void 0:_.fontFamily)?null===(w=null===(S=null===(I=null==t?void 0:t.customStyles)||void 0===I?void 0:I.labelStyles)||void 0===S?void 0:S.base)||void 0===w?void 0:w.fontFamily:l.labelStyles.base.fontFamily};\n    font-weight: ${(null===(k=null===(N=null===(O=null==t?void 0:t.customStyles)||void 0===O?void 0:O.labelStyles)||void 0===N?void 0:N.base)||void 0===k?void 0:k.fontWeight)?null===(T=null===(P=null===(R=null==t?void 0:t.customStyles)||void 0===R?void 0:R.labelStyles)||void 0===P?void 0:P.base)||void 0===T?void 0:T.fontWeight:l.labelStyles.base.fontWeight};\n    text-align: ${(null===(j=null===(M=null===(L=null==t?void 0:t.customStyles)||void 0===L?void 0:L.labelStyles)||void 0===M?void 0:M.base)||void 0===j?void 0:j.textAlign)?null===($=null===(D=null===(B=null==t?void 0:t.customStyles)||void 0===B?void 0:B.labelStyles)||void 0===D?void 0:D.base)||void 0===$?void 0:$.textAlign:l.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===(z=null===(F=null==t?void 0:t.customStyles)||void 0===F?void 0:F.labelStyles)||void 0===z?void 0:z.base)||void 0===U?void 0:U.lineHeight)?null===(W=null===(H=null===(Y=null==t?void 0:t.customStyles)||void 0===Y?void 0:Y.labelStyles)||void 0===H?void 0:H.base)||void 0===W?void 0:W.lineHeight:"22px"};\n    color: ${(null===(X=null===(G=null===(K=null==t?void 0:t.customStyles)||void 0===K?void 0:K.labelStyles)||void 0===G?void 0:G.base)||void 0===X?void 0:X.color)?null===(J=null===(q=null===(V=null==t?void 0:t.customStyles)||void 0===V?void 0:V.labelStyles)||void 0===q?void 0:q.base)||void 0===J?void 0:J.color:l.labelStyles.base.color};\n    font-size: ${(null===(tt=null===(Q=null===(Z=null==t?void 0:t.customStyles)||void 0===Z?void 0:Z.labelStyles)||void 0===Q?void 0:Q.base)||void 0===tt?void 0:tt.fontSize)?null===(ot=null===(et=null===(nt=null==t?void 0:t.customStyles)||void 0===nt?void 0:nt.labelStyles)||void 0===et?void 0:et.base)||void 0===ot?void 0:ot.fontSize:l.labelStyles.base.fontSize};\n    font-family: ${(null===(at=null===(rt=null===(it=null==t?void 0:t.customStyles)||void 0===it?void 0:it.labelStyles)||void 0===rt?void 0:rt.base)||void 0===at?void 0:at.fontFamily)?null===(dt=null===(lt=null===(st=null==t?void 0:t.customStyles)||void 0===st?void 0:st.labelStyles)||void 0===lt?void 0:lt.base)||void 0===dt?void 0:dt.fontFamily:l.labelStyles.base.fontFamily};\n    font-weight: ${(null===(pt=null===(ut=null===(ct=null==t?void 0:t.customStyles)||void 0===ct?void 0:ct.labelStyles)||void 0===ut?void 0:ut.base)||void 0===pt?void 0:pt.fontWeight)?null===(vt=null===(ht=null===(mt=null==t?void 0:t.customStyles)||void 0===mt?void 0:mt.labelStyles)||void 0===ht?void 0:ht.base)||void 0===vt?void 0:vt.fontWeight:l.labelStyles.base.fontWeight};\n    text-align: ${(null===(bt=null===(ft=null===(yt=null==t?void 0:t.customStyles)||void 0===yt?void 0:yt.labelStyles)||void 0===ft?void 0:ft.base)||void 0===bt?void 0:bt.textAlign)?null===(Ct=null===(xt=null===(gt=null==t?void 0:t.customStyles)||void 0===gt?void 0:gt.labelStyles)||void 0===xt?void 0:xt.base)||void 0===Ct?void 0:Ct.textAlign:l.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`},h=n=>`\n  <div class="accordion-container">\n    ${n.cards.reduce(((e,o)=>{var i,r;const{cvvLabel:a}=(s=n.customStyles,{labels:{nameLabel:t(s,"labels.nameLabel",l.labels.nameLabel),cardLabel:t(s,"labels.cardLabel",l.labels.cardLabel),cvvLabel:t(s,"labels.cvvLabel",l.labels.cvvLabel),expiryDateLabel:t(s,"labels.expiryDateLabel",l.labels.expiryDateLabel)},placeholders:{namePlaceholder:t(s,"placeholders.namePlaceholder",l.placeholders.namePlaceholder),cardPlaceholder:t(s,"placeholders.cardPlaceholder",l.placeholders.cardPlaceholder),cvvPlaceholder:t(s,"placeholders.cvvPlaceholder",l.placeholders.cvvPlaceholder),expiryMonthPlaceholder:t(s,"placeholders.expiryMonthPlaceholder",l.placeholders.expiryMonthPlaceholder),expiryYearPlaceholder:t(s,"placeholders.expiryYearPlaceholder",l.placeholders.expiryYearPlaceholder)}}).labels;var s;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.hasCOF?"":`\n           <div class="cvvContainer" id="cvvContainer${o.skyflow_id}">\n             <label class="tndr-form-label label-cvv-cards">${a}</label>\n              <div id="${n.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:n.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${n.collectorIds.tonderPayButton}${o.skyflow_id}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${n.collectorIds.msgError}${o.skyflow_id}`,msgErrorTextId:`${n.collectorIds.msgErrorText}${o.skyflow_id}`,msgNotificationId:`${n.collectorIds.msgNotification}${o.skyflow_id}`,msgNotificationTextId:`${n.collectorIds.msgNotificationText}${o.skyflow_id}`,buttonText:null===(r=null===(i=n.customization)||void 0===i?void 0:i.paymentButton)||void 0===r?void 0:r.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==n?void 0:n.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=t=>`\n  <div class="accordion-container-apm">\n    ${t.apms.reduce(((n,e)=>{var o,i;const r=(t=>{const n=p(t.toUpperCase());return{[s.SORIANA]:{label:"Soriana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/soriana.png"},[s.OXXO]:{label:"Oxxo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxo.png"},[s.CODI]:{label:"CoDi",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/codi.png"},[s.SPEI]:{label:"SPEI",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/spei.png"},[s.PAYPAL]:{label:"Paypal",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/paypal.png"},[s.COMERCIALMEXICANA]:{label:"Comercial Mexicana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/comercial_exicana.png"},[s.BANCOMER]:{label:"Bancomer",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bancomer.png"},[s.WALMART]:{label:"Walmart",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/walmart.png"},[s.BODEGA]:{label:"Bodega Aurrera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/bodega_aurrera.png"},[s.SAMSCLUB]:{label:"Sam´s Club",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/sams_club.png"},[s.SUPERAMA]:{label:"Superama",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/superama.png"},[s.CALIMAX]:{label:"Calimax",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/calimax.png"},[s.EXTRA]:{label:"Tiendas Extra",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/tiendas_extra.png"},[s.CIRCULOK]:{label:"Círculo K",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png"},[s.MERCADOPAGO]:{label:"Mercado Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png"},[s.OXXOPAY]:{label:"Oxxo Pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png"},[s.SEVEN11]:{label:"7 Eleven",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png"},[s.TELECOMM]:{label:"Telecomm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/telecomm.png"},[s.BANORTE]:{label:"Banorte",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/banorte.png"},[s.BENAVIDES]:{label:"Farmacias Benavides",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_benavides.png"},[s.DELAHORRO]:{label:"Farmacias del Ahorro",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_ahorro.png"},[s.ELASTURIANO]:{label:"El Asturiano",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/asturiano.png"},[s.WALDOS]:{label:"Waldos",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/waldos.png"},[s.ALSUPER]:{label:"Alsuper",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/al_super.png"},[s.KIOSKO]:{label:"Kiosko",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/kiosko.png"},[s.STAMARIA]:{label:"Farmacias Santa María",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_santa_maria.png"},[s.LAMASBARATA]:{label:"Farmacias la más barata",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_barata.png"},[s.FARMROMA]:{label:"Farmacias Roma",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_roma.png"},[s.FARMUNION]:{label:"Pago en Farmacias Unión",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_union.png"},[s.FARMATODO]:{label:"Pago en Farmacias Farmatodo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_farmatodo.png\t"},[s.SFDEASIS]:{label:"Pago en Farmacias San Francisco de Asís",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/farmacias_san_francisco.png"},[s.FARM911]:{label:"Farmacias 911",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.FARMECONOMICAS]:{label:"Farmacias Economicas",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.FARMMEDICITY]:{label:"Farmacias Medicity",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.RIANXEIRA]:{label:"Rianxeira",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.WESTERNUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.ZONAPAGO]:{label:"Zona Pago",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.CAJALOSANDES]:{label:"Caja Los Andes",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.CAJAPAITA]:{label:"Caja Paita",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.CAJASANTA]:{label:"Caja Santa",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.CAJASULLANA]:{label:"Caja Sullana",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.CAJATRUJILLO]:{label:"Caja Trujillo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.EDPYME]:{label:"Edpyme",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.KASNET]:{label:"KasNet",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.NORANDINO]:{label:"Norandino",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.QAPAQ]:{label:"Qapaq",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.RAIZ]:{label:"Raiz",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.PAYSER]:{label:"Paysera",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.WUNION]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.BANCOCONTINENTAL]:{label:"Banco Continental",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.GMONEY]:{label:"Go money",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.GOPAY]:{label:"Go pay",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.WU]:{label:"Western Union",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.PUNTOSHEY]:{label:"Puntoshey",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.AMPM]:{label:"Ampm",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.JUMBOMARKET]:{label:"Jumbomarket",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.SMELPUEBLO]:{label:"Smelpueblo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.BAM]:{label:"Bam",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.REFACIL]:{label:"Refacil",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.ACYVALORES]:{label:"Acyvalores",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png"},[s.SAFETYPAYCASH]:{label:"Paga en Efectivo",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/cash_apm_sp.png"},[s.SAFETYPAYTRANSFER]:{label:"Paga por Transferencia",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/transfer_apm_sp.png"},[s.NEOSURF]:{label:"Neosurf",icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/neosurf.png"}}[n]||{icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",label:""}})(e.payment_method);return`\n    ${n}\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="${r.icon}" />\n            </div>\n            <div class="apm-name">${r.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:t.renderPaymentButton||!1,classContainerButton:"container-pay-button",tonderButtonId:`${t.collectorIds.tonderPayButton}${e.pk}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${t.collectorIds.msgError}${e.pk}`,msgErrorTextId:`${t.collectorIds.msgErrorText}${e.pk}`,msgNotificationId:`${t.collectorIds.msgNotification}${e.pk}`,msgNotificationTextId:`${t.collectorIds.msgNotificationText}${e.pk}`,buttonText:null===(i=null===(o=t.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=t=>`\n      ${t.showButton?`\n         <div class="${t.classContainerButton}">\n          <button id="${t.tonderButtonId}" class="${t.classButton}">${t.buttonText}</button>\n        </div>\n        `:""}\n        <div id="${t.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="${t.msgErrorTextId}"></p>\n          </div>\n          <div id="${t.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="${t.msgNotificationTextId}"></p>\n          </div> \n  `,f={cardholder_name:"cardholderName",card_number:"cardNumber",cvv:"cvv",expiration_month:"expirationMonth",expiration_year:"expirationYear"};function b(t){if(!t||0===Object.keys(t).length)return{};return!!(t.cardForm||t.cardholderName||t.cardNumber||t.cvv||t.expirationMonth||t.expirationYear)?t:t.inputStyles?{cardForm:{inputStyles:t.inputStyles,labelStyles:t.labelStyles,errorStyles:t.errorTextStyles},labels:t.labels,placeholders:t.placeholders,enableCardIcon:t.enableCardIcon}:t}function g(t,n){const e=f[t],o=e?n[e]:void 0,i=n.cardForm,r=(null==o?void 0:o.inputStyles)||(null==i?void 0:i.inputStyles)||l.inputStyles;return{inputStyles:"card_number"===t&&!1!==n.enableCardIcon?Object.assign(Object.assign({},r),{base:Object.assign({textIndent:"44px"},r.base||{})}):r,labelStyles:(null==o?void 0:o.labelStyles)||(null==i?void 0:i.labelStyles)||l.labelStyles,errorTextStyles:(null==o?void 0:o.errorStyles)||(null==i?void 0:i.errorStyles)||l.errorTextStyles}}function x(t,e,o,r,a,s,d,c){return i(this,arguments,void 0,(function*(t,e,o,i,r,a,s,d,c="stage"){var u,p,m,h,v,y,f,x,A,S;const w=(yield C(t,e,o,s,i,c)).container(n.ContainerType.COLLECT),O=b(r),N={nameLabel:(null===(u=O.labels)||void 0===u?void 0:u.nameLabel)||l.labels.nameLabel,cardLabel:(null===(p=O.labels)||void 0===p?void 0:p.cardLabel)||l.labels.cardLabel,cvvLabel:(null===(m=O.labels)||void 0===m?void 0:m.cvvLabel)||l.labels.cvvLabel,expiryDateLabel:(null===(h=O.labels)||void 0===h?void 0:h.expiryDateLabel)||l.labels.expiryDateLabel},k={namePlaceholder:(null===(v=O.placeholders)||void 0===v?void 0:v.namePlaceholder)||l.placeholders.namePlaceholder,cardPlaceholder:(null===(y=O.placeholders)||void 0===y?void 0:y.cardPlaceholder)||l.placeholders.cardPlaceholder,cvvPlaceholder:(null===(f=O.placeholders)||void 0===f?void 0:f.cvvPlaceholder)||l.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(x=O.placeholders)||void 0===x?void 0:x.expiryMonthPlaceholder)||l.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===(A=O.placeholders)||void 0===A?void 0:A.expiryYearPlaceholder)||l.placeholders.expiryYearPlaceholder},R={type:n.ValidationRuleType.LENGTH_MATCH_RULE,params:{max:70,error:"El campo nombre del titular debe tener menos de 70 caracteres"}},P=w.create(Object.assign(Object.assign({table:"cards",column:"cardholder_name"},g("cardholder_name",O)),{label:N.nameLabel,placeholder:k.namePlaceholder,type:n.ElementType.CARDHOLDER_NAME,validations:[R,_]}));I({element:P,errorStyles:g("cardholder_name",O).errorTextStyles,fieldMessage:N.nameLabel,events:null==d?void 0:d.cardHolderEvents});const T=w.create(Object.assign(Object.assign({table:"cards",column:"card_number"},g("card_number",O)),{label:N.cardLabel,placeholder:k.cardPlaceholder,type:n.ElementType.CARD_NUMBER,validations:[_]}),{enableCardIcon:null===(S=O.enableCardIcon)||void 0===S||S});I({element:T,errorStyles:g("card_number",O).errorTextStyles,fieldMessage:N.cardLabel,events:null==d?void 0:d.cardNumberEvents});const L=w.create(Object.assign(Object.assign({table:"cards",column:"cvv"},g("cvv",O)),{label:N.cvvLabel,placeholder:k.cvvPlaceholder,type:n.ElementType.CVV,validations:[_]}));I({element:L,errorStyles:g("cvv",O).errorTextStyles,fieldMessage:"",events:null==d?void 0:d.cvvEvents});const M=w.create(Object.assign(Object.assign({table:"cards",column:"expiration_month"},g("expiration_month",O)),{label:N.expiryDateLabel,placeholder:k.expiryMonthPlaceholder,type:n.ElementType.EXPIRATION_MONTH,validations:[_]}));I({element:M,errorStyles:g("expiration_month",O).errorTextStyles,fieldMessage:"",events:null==d?void 0:d.monthEvents});const j=w.create(Object.assign(Object.assign({table:"cards",column:"expiration_year"},g("expiration_year",O)),{label:"",placeholder:k.expiryYearPlaceholder,type:n.ElementType.EXPIRATION_YEAR,validations:[_]}));I({element:j,errorStyles:g("expiration_year",O).errorTextStyles,fieldMessage:"",events:null==d?void 0:d.yearEvents});const B={cardNumber:{element:T,container:`#${a.cardNumber}`},cvv:{element:L,container:`#${a.cvv}`},expiryMonth:{element:M,container:`#${a.expirationMonth}`},expiryYear:{element:j,container:`#${a.expirationYear}`},cardHolderName:{element:P,container:`#${a.holderName}`}};return yield E(B),{container:w,elements:{cardHolderNameElement:P,cardNumberElement:T,cvvElement:L,expiryMonthElement:M,expiryYearElement:j}}}))}function C(t,e,o,r,a,s){return i(this,void 0,void 0,(function*(){const l="production"===s?n.Env.PROD:n.Env.DEV;return n.init({vaultID:t,vaultURL:e,getBearerToken:()=>i(this,void 0,void 0,(function*(){const t=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${r}`},signal:a});if(t.ok){return(yield t.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:n.LogLevel.ERROR,env:l}})}))}function E(t){return i(this,void 0,void 0,(function*(){if("object"!=typeof t||null===t)throw new Error("Invalid configuration object");for(const[n,{element:e,container:o}]of Object.entries(t))e&&o?e.mount(o):console.warn(`Skipping mount for '${n}' due to missing element or container.`)}))}const A=RegExp("^(?!s*$).+"),_={type:n.ValidationRuleType.REGEX_MATCH_RULE,params:{regex:A,error:"Campo requerido"}};function I(t){const{element:e,fieldMessage:o="",errorStyles:i={},requiredMessage:r="Campo requerido",invalidMessage:a="Campo no válido",events:s}=t;"on"in e&&(e.on(n.EventName.CHANGE,(t=>{w({eventName:"onChange",data:t,events:s}),S({element:e,errorStyles:i,color:"transparent"})})),e.on(n.EventName.BLUR,(t=>{if(w({eventName:"onBlur",data:t,events:s}),!t.isValid){const n=t.isEmpty?r:""!==o?`El campo ${o} no es válido`:a;e.setError(n)}S({element:e,errorStyles:i})})),e.on(n.EventName.FOCUS,(t=>{w({eventName:"onFocus",data:t,events:s}),S({element:e,errorStyles:i,color:"transparent"}),e.resetError()})))}function S(t){const{element:n,errorStyles:e={},color:o=""}=t;Object.keys(e).length>0&&n.update({errorTextStyles:Object.assign(Object.assign({},e),{base:Object.assign(Object.assign({},e.base&&Object.assign({},e.base)),""!==o&&{color:o})})})}const w=n=>{const{eventName:e,data:o,events:i}=n;if(i&&e in i){const n=i[e];"function"==typeof n&&n({elementType:t(o,"elementType",""),isEmpty:t(o,"isEmpty",!1),isFocused:t(o,"isFocused",!1),isValid:t(o,"isValid",!1),value:t(o,"value","")})}};var O;!function(t){t.SAVE_CARD_ERROR="SAVE_CARD_ERROR",t.PAYMENT_PROCESS_ERROR="PAYMENT_PROCESS_ERROR",t.CARD_ON_FILE_DECLINED="CARD_ON_FILE_DECLINED",t.UNKNOWN_ERROR="UNKNOWN_ERROR"}(O||(O={}));const N={[O.CARD_ON_FILE_DECLINED]:"Transaction declined. Please verify your card details.",[O.UNKNOWN_ERROR]:"An unexpected error occurred."},k={[O.CARD_ON_FILE_DECLINED]:"Transaccion declinada. Verique los datos de su tarjeta.",[O.UNKNOWN_ERROR]:"Ocurrió un error inesperado."},R="__tonderLockErrorCode__";function P(t){return"object"==typeof t&&null!==t}class T extends Error{constructor(t){var n,e;const o=T.resolveStatusCode(t.statusCode,t.originalError),i=T.resolveMessage(t.errorCode,t.message),r=T.resolveSystemError(null===(n=t.details)||void 0===n?void 0:n.systemError,t.originalError);super(i),this.status="error",Object.setPrototypeOf(this,new.target.prototype),this.name="TonderError",this.code=t.errorCode,this.statusCode=o,this.originalError=t.originalError,this.details={code:t.errorCode,statusCode:o,systemError:r},t.lockErrorCode&&Object.defineProperty(this,R,{value:!0,enumerable:!1,configurable:!0}),null===(e=Error.captureStackTrace)||void 0===e||e.call(Error,this,T)}static isRecord(t){return"object"==typeof t&&null!==t}static parseStatusCode(t){const n=Number(t);return Number.isFinite(n)?n<100||n>599?500:Math.trunc(n):500}static resolveStatusCode(t,n){const e=[t];if(T.isRecord(n)){e.push(n.statusCode,n.status);const t=T.isRecord(n.body)?n.body:null;t&&e.push(t.statusCode,t.status)}for(const t of e)if(T.isHttpStatusCode(t))return Math.trunc(Number(t));return 500}static resolveMessage(t,n){return n||(N[t]||N[O.UNKNOWN_ERROR]||"An unexpected error occurred.")}static isHttpStatusCode(t){const n=Number(t);return Number.isFinite(n)&&n>=100&&n<=599}static normalizeSystemError(t){if("string"!=typeof t)return null;return t.trim()||null}static resolveSystemError(t,n){const e=[t];if(T.isRecord(n)){const t=T.isRecord(n.details)?n.details:null,o=T.isRecord(n.body)?n.body:null,i=o&&T.isRecord(o.details)?o.details:null;e.push(n.systemError,n.code,null==t?void 0:t.systemError,null==t?void 0:t.code,null==o?void 0:o.systemError,null==o?void 0:o.code,null==i?void 0:i.systemError,null==i?void 0:i.code)}for(const t of e){const n=T.normalizeSystemError(t);if(n)return n}return"APP_INTERNAL_001"}}function L(t){return P(t)&&!0===t[R]}function M(t){return t instanceof T&&void 0!==t.originalError?t.originalError:t}function j(t,n){var e;if(!(null==t?void 0:t.errorCode))throw new Error("buildPublicAppError requires errorCode");const o=null===(e=t.details)||void 0===e?void 0:e.systemError,i=!!t.message||void 0!==t.statusCode||void 0!==o;return!function(t){return P(t)&&"TonderError"===t.name&&"string"==typeof t.code}(n)||(t.lockErrorCode&&function(t){Object.defineProperty(t,R,{value:!0,enumerable:!1,configurable:!0})}(n),i||t.errorCode!==n.code&&!L(n))?new T({errorCode:t.errorCode,message:t.message,statusCode:t.statusCode,details:void 0!==o?{systemError:o}:void 0,originalError:M(n),lockErrorCode:t.lockErrorCode||L(n)}):n}function B(t){return i(this,void 0,void 0,(function*(){var n,e;const o=yield function(t){return i(this,void 0,void 0,(function*(){try{return yield t.clone().json()}catch(t){}try{return(yield t.text())||void 0}catch(t){return}}))}(t.response),r={status:t.response.status};return t.response.statusText&&(r.statusText=t.response.statusText),void 0!==o&&(r.body=o),new T({errorCode:t.errorCode,message:t.message,statusCode:null!==(n=t.statusCode)&&void 0!==n?n:t.response.status,details:void 0!==(null===(e=t.details)||void 0===e?void 0:e.systemError)?{systemError:t.details.systemError}:void 0,originalError:r,lockErrorCode:t.lockErrorCode})}))}function D(t,n){return(null==t?void 0:t.response)?B(t):j(t,n)}const $=Object.freeze({name:"@tonder.io/ionic-full-sdk",version:"1.0.0"});var F,z,U,Y,H,W,K,G,X,V,q,J,Z,Q,tt,nt,et,ot,it,rt,at,st,lt,dt,ct,ut,pt,mt;class ht extends e{constructor({apiKey:t,returnUrl:n,renderPaymentButton:e=!1,callBack:o=()=>{},styles:i,containerId:s,collectorIds:l,isOpenPaySandbox:d,isEnrollmentCard:c,renderSaveCardButton:u,mode:p="stage",customization:m,events:h}){var v,y,f;super({apiKey:t,returnUrl:n,mode:p,callBack:o,customization:m,tdsIframeId:l&&"tdsIframe"in l?null==l?void 0:l.tdsIframe:"tdsIframe",tonderPayButtonId:l?null==l?void 0:l.tonderPayButton:"tonderPayButton",sdkInfo:$}),F.add(this),this.paymentData={},this.deletingCards=[],z.set(this,[]),this.accordionCards=null,this.accordionPaymentMethods=null,this.apmsInjected=!1,this.apmsData=[],this.isOpenPaySandbox=!0,this.isEnrollmentCard=!1,U.set(this,{paymentButton:{show:!1,text:"Pagar",showAmount:!0}}),Y.set(this,void 0),this.renderPaymentButton=e||!1,this.renderSaveCardButton=u,this.customStyles=null!==(v=null==m?void 0:m.styles)&&void 0!==v?v:i,a(this,Y,h,"f"),this.abortRefreshCardsController=new AbortController,this.containerId=s||"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=l?Object.assign(Object.assign({},this.collectorIds),l):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),m||{}),{paymentButton:Object.assign(Object.assign(Object.assign({},r(this,U,"f").paymentButton),(null==m?void 0:m.paymentButton)||{}),{show:(null===(y=null==m?void 0:m.paymentButton)||void 0===y?void 0:y.show)||this.renderPaymentButton||(null===(f=r(this,U,"f").paymentButton)||void 0===f?void 0:f.show)})})}setCustomerEmail(t){this.customer=Object.assign(Object.assign({},this.customer),{email:t})}setPaymentData(t){var n;t&&(this.paymentData=t,this.setCartTotal((null===(n=t.cart)||void 0===n?void 0:n.total)||"0"))}injectCheckout(){return i(this,void 0,void 0,(function*(){if(this.injected)return;const t=document.querySelector(`#${this.containerId}`);if(t)return t.innerHTML=m({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderPaymentButton:this.renderPaymentButton,customization:this.customization,renderSaveCardButton:this.renderSaveCardButton}),yield r(this,F,"m",at).call(this),void(this.injected=!0);const n=new MutationObserver(((t,n)=>i(this,void 0,void 0,(function*(){const t=document.querySelector(`#${this.containerId}`);t&&(t.innerHTML=m({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderSaveCardButton:this.renderSaveCardButton,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),yield r(this,F,"m",at).call(this),this.injected=!0,n.disconnect())}))));n.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(((t,n)=>i(this,void 0,void 0,(function*(){try{yield r(this,F,"m",ct).call(this,!0,"Guardando..."),yield r(this,F,"m",ut).call(this),t("Tarjeta registrada con éxito")}catch(t){n(t)}finally{yield r(this,F,"m",ct).call(this)}}))))}))}_setCartTotal(t){this.cartTotal=t,r(this,F,"m",Q).call(this)}setCartTotal(t){this.cartTotal=t,r(this,F,"m",Q).call(this)}_checkout(){return i(this,void 0,void 0,(function*(){var t;let n,e=null;try{if(r(this,F,"m",Q).call(this,{cardId:this.radioChecked,textContent:"Cargando...",disabled:!0}),this.merchantData){const{business:o}=this.merchantData;let i,a=!1;const s="new"===this.radioChecked||void 0===this.radioChecked;let l=null;const c=this.apmsData?this.apmsData.find((t=>t.pk===this.radioChecked)):null,u=yield this._getCustomer(),{auth_token:p}=u;if(n=p,s){if(i=yield r(this,F,"m",dt).call(this,this.collectorIds.tonderPayButton,this.radioChecked),this._hasCardOnFileKeys()&&i){const t={records:[{fields:i}]},n=yield r(this,F,"m",pt).call(this,t);if(l={subscriptionId:n.subscriptionId},e=n.cardId,!e||!l.subscriptionId)throw D({errorCode:O.CARD_ON_FILE_DECLINED,lockErrorCode:!0,message:N[O.CARD_ON_FILE_DECLINED]});a=!0}}else if(!c){const n=r(this,z,"f").find((t=>{var n;return(null===(n=t.fields)||void 0===n?void 0:n.skyflow_id)===this.radioChecked}));(null===(t=null==n?void 0:n.fields)||void 0===t?void 0:t.subscription_id)&&this._hasCardOnFileKeys()?l={subscriptionId:n.fields.subscription_id}:yield r(this,F,"m",dt).call(this,this.collectorIds.tonderPayButton,this.radioChecked),i={skyflow_id:this.radioChecked}}if(!a&&i){const t="skyflow_id"in i?i.skyflow_id:"",n=yield r(this,F,"m",mt).call(this,p,o.pk,{skyflow_id:t});e=(null==n?void 0:n.skyflow_id)||null}const m=Object.assign(Object.assign({},c&&Object.keys(c).length>0?{payment_method:c.payment_method}:{card:i}),{enable_card_on_file:!!(null==l?void 0:l.subscriptionId)&&this._hasCardOnFileKeys(),customer:u}),h=yield this._handleCheckout(m);return r(this,F,"m",Q).call(this,{cardId:this.radioChecked,disabled:!1}),h||(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(t){e&&n&&(this.cardsInjected=!1,yield this._removeCustomerCard(n,this.merchantData.business.pk,e),yield r(this,F,"m",H).call(this,n)),this.reportSdkError(t,{feature:"payment",process_id:e||this.radioChecked||this.getCustomerId(),metadata:{step:"_checkout"}});throw d((null==t?void 0:t.code)===O.CARD_ON_FILE_DECLINED?k[O.CARD_ON_FILE_DECLINED]:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),t}finally{r(this,F,"m",Q).call(this,{cardId:this.radioChecked,disabled:!1})}}))}}z=new WeakMap,U=new WeakMap,Y=new WeakMap,F=new WeakSet,H=function(n){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(n,this.merchantData.business.pk);a(this,z,t(o,"cards",[]),"f");let i=[];if("cards"in o){i=o.cards.map(u);const t=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.cardsListContainer}`);e&&this.injected&&(e.innerHTML=h({cards:i,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customStyles:this.customStyles,customization:this.customization,hasCOF:this._hasCardOnFileKeys()}),clearInterval(t),r(this,F,"m",W).call(this),r(this,F,"m",tt).call(this,n),this.cardsInjected=!0)}),500)}}))},W=function(t="cards"){const n={cards:{accClass:"accordion-container",triggerClass:"card-item-label"},paymentMethods:{accClass:"accordion-container-apm",triggerClass:"apm-item-label"}},e=new o("."+n[t].accClass,{triggerClass:n[t].triggerClass,duration:300,collapse:!0,showMultiple:!1,onOpen:n=>i(this,void 0,void 0,(function*(){yield r(this,F,"m",X).call(this,n,t)}))});"cards"===t?this.accordionCards=e:"paymentMethods"===t&&(this.accordionPaymentMethods=e)},K=function(t="",n=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!==t&&i.closeAll&&i.closeAll(),null!==n&&a===t&&i.open&&i.open("paymentMethods"!==a?n:n-(r(this,z,"f").length+1)))}))},G=function(t=[],n="show"){t.forEach((t=>{document.querySelectorAll("."+t).forEach((t=>{t.classList.remove(n)}))}))},X=function(t){return i(this,arguments,void 0,(function*(t,e="cards"){var o,a,s;const{vault_id:d,vault_url:c}=this.merchantData,u=t.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(),r(this,F,"m",G).call(this,["cvvContainer"]);const p=document.getElementById(u);p&&(p.checked=!0);const m=r(this,z,"f").find((t=>{var n;return(null===(n=t.fields)||void 0===n?void 0:n.skyflow_id)===u})),h=!!(null===(s=null==m?void 0:m.fields)||void 0===s?void 0:s.subscription_id);try{"cards"!==e||h&&this._hasCardOnFileKeys()||(this.updateCollectContainer=yield function(t,e,o,r,a,s,d,c,u){return i(this,arguments,void 0,(function*(t,e,o,i,r,a,s,d,c,u="stage"){var p;const m=yield C(e,o,i,d,r,u),h=b(a),v={cvvPlaceholder:(null===(p=h.placeholders)||void 0===p?void 0:p.cvvPlaceholder)||l.placeholders.cvvPlaceholder},y=m.container(n.ContainerType.COLLECT),f=y.create(Object.assign(Object.assign({table:"cards",column:"cvv"},g("cvv",h)),{label:"",placeholder:v.cvvPlaceholder,type:n.ElementType.CVV,validations:[_],skyflowID:t}));I({element:f,errorStyles:g("cvv",h).errorTextStyles,fieldMessage:"",events:null==c?void 0:c.cvvEvents});const x={cvv:{element:f,container:`#${s.cvv}${t}`}};return yield E(x),{container:y,elements:{cvvElement:f}}}))}(u,d,c,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,Y,"f"),this.mode),setTimeout((()=>{const t=document.querySelector(`#cvvContainer${u}`);t&&t.classList.add("show")}),5)),r(this,F,"m",V).call(this,u)}catch(t){console.error("Ha ocurrido un error",t),this.reportSdkError(t,{feature:"handle-open-card-accordion",process_id:u,metadata:{step:"#handleOpenCardAccordion",type:e}})}yield r(this,F,"m",ot).call(this,p,null,e)}))},V=function(t=""){var n,e,o;if(!this.renderPaymentButton)return;const a=`#${this.collectorIds.tonderPayButton}${t}`;let s=document.querySelector(a);s||(s=document.querySelector(`#${this.collectorIds.tonderPayButton}`));const l=`#acContainer${t}`,d=document.querySelector(l);if(!s)return void console.error("Pay button not found");if(""!==t){const t=document.querySelector(`#${this.collectorIds.tonderPayButton}`);t&&(t.style.display="none")}s.style.display="block";const c=Intl.NumberFormat("en-Latn-US",{minimumFractionDigits:2}).format(Number(this.cartTotal||0));s.textContent=`${null===(e=null===(n=this.customization)||void 0===n?void 0:n.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((t=>{t.classList.remove("show")})),d&&d.classList.add("show"),s.onclick=t=>i(this,void 0,void 0,(function*(){t.preventDefault(),yield r(this,F,"m",q).call(this)}))},q=function(){return i(this,void 0,void 0,(function*(){try{yield this.payment({})}catch(t){console.error("Payment error:",null==t?void 0:t.message,null==t?void 0:t.code,null==t?void 0:t.details)}}))},J=function(){if(!this.renderSaveCardButton)return;const t=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);t?(t.style.display="block",t.textContent="Guardar",t.onclick=n=>i(this,void 0,void 0,(function*(){n.preventDefault(),yield r(this,F,"m",Z).call(this,t)}))):console.error("Save button not found")},Z=function(t){return i(this,void 0,void 0,(function*(){const n=t.innerHTML;t.innerHTML='<div class="lds-dual-ring"></div>';try{const t=yield this.saveCard();this.callBack({message:t})}catch(t){console.error("Save card error:",t)}finally{t.innerHTML=n}}))},Q=function(t){var n,e,o;try{const i=(null==t?void 0:t.cardId)&&"new"!==(null==t?void 0:t.cardId)?`#${this.collectorIds.tonderPayButton}${t.cardId}`:`#${this.collectorIds.tonderPayButton}`,r=(null==t?void 0:t.updatedTextContent)||!0,a=(null==t?void 0:t.textContent)||`${null===(e=null===(n=this.customization)||void 0===n?void 0:n.paymentButton)||void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)||void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,s=null==t?void 0:t.disabled,l=document.querySelector(i);if(!l)return;r&&(l.textContent=a),void 0!==s&&"disabled"in l&&(l.disabled=s)}catch(t){console.error("Pay button not found due to update",t)}},tt=function(t=""){const n=document.getElementsByName("card_selected");for(const t of n)t.style.display="block",t.onclick=e=>i(this,void 0,void 0,(function*(){const e=t.classList[0],o=Array.from(n).indexOf(t);yield r(this,F,"m",ot).call(this,t,o,e)}));const e=document.getElementsByClassName("card-delete-button");for(const n of e)n.addEventListener("click",(e=>i(this,void 0,void 0,(function*(){e.preventDefault(),e.stopImmediatePropagation(),yield r(this,F,"m",nt).call(this,t,n)}))),!1)},nt=function(t,n){return i(this,void 0,void 0,(function*(){var e,o;const i=n.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 n=document.querySelector(`#card_container-${a}`);n&&(n.style.display="none");try{this.deletingCards.push(a),this.abortRefreshCardsController&&(this.abortRefreshCardsController.abort(),this.abortRefreshCardsController=new AbortController),yield this._removeCustomerCard(t,this.merchantData.business.pk,a)}catch(t){}finally{this.deletingCards=this.deletingCards.filter((t=>t!==a)),yield r(this,F,"m",et).call(this,t)}}}))},et=function(t){return i(this,void 0,void 0,(function*(){this.deletingCards.length>0||(this.cardsInjected=!1,yield r(this,F,"m",H).call(this,t))}))},ot=function(t){return i(this,arguments,void 0,(function*(t,n=null,e=""){var o,i;if(t.id===this.radioChecked||"new"===t.id&&void 0===this.radioChecked)return;const a=document.querySelector(".container-form");a&&(a.style.display="new"===t.id?"block":"none"),"new"===t.id?(r(this,F,"m",G).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(),r(this,F,"m",K).call(this,"",null,!0),this.radioChecked!==t.id&&(yield r(this,F,"m",lt).call(this),r(this,F,"m",V).call(this))):(r(this,F,"m",K).call(this,e,null,!1,!0),null!==n&&r(this,F,"m",K).call(this,e,n,!0),r(this,F,"m",st).call(this)),this.radioChecked=t.id}))},it=function(){return i(this,void 0,void 0,(function*(){try{const t=yield this._fetchCustomerPaymentMethods();t&&t.results&&t.results.length>0&&(this.apmsData=t.results,r(this,F,"m",rt).call(this,t.results))}catch(t){console.warn("Error getting APMS")}}))},rt=function(t){if(this.apmsInjected)return;const n=setInterval((()=>{const e=document.querySelector(`#${this.collectorIds.apmsListContainer}`);e&&this.injected&&(e.innerHTML=v({apms:t,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),clearInterval(n),r(this,F,"m",W).call(this,"paymentMethods"),r(this,F,"m",tt).call(this),this.apmsInjected=!0)}),500)},at=function(){return i(this,void 0,void 0,(function*(){if(this.isEnrollmentCard?r(this,F,"m",J).call(this):r(this,F,"m",V).call(this),yield this._initializeCheckout(),this._hasCardOnFileKeys()){const t=document.getElementById("save-checkout-card");(null==t?void 0:t.parentElement)&&(t.parentElement.style.display="none")}const{vault_id:t,vault_url:n}=this.merchantData;if(t){if(this.customer.email&&!this.isEnrollmentCard){const t=yield this._getCustomer();if("auth_token"in t){const{auth_token:n}=t;yield r(this,F,"m",H).call(this,n)}}this.isEnrollmentCard||(yield r(this,F,"m",it).call(this)),this.collectContainer=yield x(t,n,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,Y,"f"),this.mode)}}))},st=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())},lt=function(){return i(this,void 0,void 0,(function*(){yield this._initializeCheckout();const{vault_id:t,vault_url:n}=this.merchantData;t&&(this.collectContainer=yield x(t,n,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,r(this,Y,"f"),this.mode))}))},dt=function(t){return i(this,arguments,void 0,(function*(t,n=null){var e,o;try{const t=n&&"new"!==n?null===(e=this.updateCollectContainer)||void 0===e?void 0:e.container:null===(o=this.collectContainer)||void 0===o?void 0:o.container;if(t&&"collect"in t){const n=yield t.collect();return yield n.records[0].fields}d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(t){throw d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError),t}}))},ct=function(){return i(this,arguments,void 0,(function*(t=!1,n="Guardar"){try{const e=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);e&&(e.disabled=t,e.innerHTML=n)}catch(t){}}))},ut=function(){return i(this,void 0,void 0,(function*(){let t,n=null;if(this.customer.email)try{if(this.merchantData){const e=yield r(this,F,"m",dt).call(this,this.collectorIds.tonderSaveCardButton),o=yield this._getCustomer();if("auth_token"in o&&this.secureToken){const{auth_token:i,first_name:a="",last_name:s="",email:l}=o;if(t=i,this._hasCardOnFileKeys()){const t=yield r(this,F,"m",mt).call(this,i,this.merchantData.business.pk,{skyflow_id:e.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0,refreshCards:!1});n=(null==t?void 0:t.skyflow_id)||null;const o=null==t?void 0:t.card_bin;if(!o)throw new Error("Card BIN not returned from save card");const d=yield this._initializeCardOnFile();let c;try{c=yield d.process({cardTokens:{name:e.cardholder_name,number:e.card_number,expiryMonth:e.expiration_month,expiryYear:e.expiration_year,cvv:e.cvv},cardBin:o,contactDetails:{firstName:a||"",lastName:s||"",email:l||""},customerId:i,currency:this.currency||"MXN"})}catch(t){throw D({errorCode:O.CARD_ON_FILE_DECLINED,lockErrorCode:!0,message:N[O.CARD_ON_FILE_DECLINED]},t)}yield r(this,F,"m",mt).call(this,i,this.merchantData.business.pk,{skyflow_id:e.skyflow_id,subscription_id:c.subscriptionId},{forceSave:!0,showNotification:!0})}else yield r(this,F,"m",mt).call(this,i,this.merchantData.business.pk,{skyflow_id:e.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(e){n&&t&&(yield this._removeCustomerCard(t,this.merchantData.business.pk,n)),this.reportSdkError(e,{feature:"save-card",process_id:n,metadata:{step:"#validateAndSaveCard"}});const o="object"==typeof e&&null!==e&&"message"in e;throw d((null==e?void 0:e.code)===O.CARD_ON_FILE_DECLINED?k[O.CARD_ON_FILE_DECLINED]:o?null==e?void 0:e.message:"Ha ocurrido un error",this.radioChecked,this.collectorIds.msgError),e}}))},pt=function(t){return i(this,void 0,void 0,(function*(){var n,e;let o=null;try{const i=yield this._initializeCardOnFile(),a=null===(e=null===(n=t.records)||void 0===n?void 0:n[0])||void 0===e?void 0:e.fields;if(!a)throw new Error("No card data returned from collect");const s=yield this._getCustomer(),{auth_token:l,first_name:d="",last_name:c="",email:u}=s,p=yield r(this,F,"m",mt).call(this,l,this.merchantData.business.pk,{skyflow_id:a.skyflow_id},{forceSave:!0,showNotification:!1,appOrigin:!0,refreshCards:!1});o=(null==p?void 0:p.skyflow_id)||null;const m=null==p?void 0:p.card_bin;if(!m)throw new Error("Card BIN not returned from save card");let h;try{h=yield i.process({cardTokens:{name:a.cardholder_name,number:a.card_number,expiryMonth:a.expiration_month,expiryYear:a.expiration_year,cvv:a.cvv},cardBin:m,contactDetails:{firstName:d||"",lastName:c||"",email:u||""},customerId:l,currency:this.currency||"MXN"})}catch(t){throw t}return yield r(this,F,"m",mt).call(this,l,this.merchantData.business.pk,{skyflow_id:a.skyflow_id,subscription_id:h.subscriptionId},{forceSave:!0,showNotification:!1}),{subscriptionId:h.subscriptionId,cardId:p.skyflow_id}}catch(t){return this.reportSdkError(t,{feature:"payment",process_id:o,metadata:{step:"#processCardOnFilePayment",error:t}}),{subscriptionId:null,cardId:o}}}))},mt=function(t,n,e){return i(this,arguments,void 0,(function*(t,n,e,o={}){var i,a;if(!t||!(null===(i=this.customer)||void 0===i?void 0:i.email))return;const{forceSave:s=!1,showNotification:l=!0,appOrigin:c=!1,refreshCards:u=!0}=o,p=document.getElementById("save-checkout-card");if(s||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(t,n,e,c);return u&&(this.cardsInjected=!1,yield r(this,F,"m",H).call(this,t)),l&&function(t,n=null,e="msgNotification",o="msgNotificationText"){try{const i=n&&"new"!==n,r=document.getElementById(`${e}${i?n:""}`);if(r){let e=document.getElementById(`${o}${i?n:""}`);r.style.display="flex",e.innerHTML="",e.innerHTML=t,setTimeout((function(){r.style.display="none",e.innerHTML=""}),3e4)}}catch(t){console.error("Error showing message",t)}}("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(t){this.reportSdkError(t,{feature:"save-card",process_id:e.skyflow_id||this.getCustomerId(),metadata:{step:"#handleSaveCard"}});throw"object"==typeof t&&null!==t&&"message"in t&&"Error"!==(null==t?void 0:t.message)&&d(null==t?void 0:t.message,this.radioChecked,this.collectorIds.msgError),t}}))};export{ht as InlineCheckout};

package/dist/types/commons.d.ts

@@ -76,6 +76,8 @@ export interface InCollectorContainer {
     };
 }
 export interface IInlineCustomizationOptions extends CustomizationOptions {
+    /** Card field styles. Uses ICardStyles with optional per-field overrides. */
+    styles?: ICardStyles;
     paymentButton?: {
         show?: boolean;
         text?: string;
@@ -87,11 +89,61 @@ export interface IInlineCustomizationOptions extends CustomizationOptions {
         autoSave?: boolean;
     };
 }
+export interface ICardInputStyles {
+    base?: Record<string, any>;
+    focus?: Record<string, any>;
+    complete?: Record<string, any>;
+    invalid?: Record<string, any>;
+    empty?: Record<string, any>;
+    cardIcon?: Record<string, any>;
+    global?: Record<string, any>;
+}
+export interface ICardFieldStyles {
+    inputStyles?: ICardInputStyles;
+    labelStyles?: {
+        base?: Record<string, any>;
+    };
+    /** Developer-facing key; translated internally to Skyflow's `errorTextStyles`. */
+    errorStyles?: {
+        base?: Record<string, any>;
+    };
+}
+export interface ICardStyles {
+    /** Shared styles applied to all fields (lowest priority). */
+    cardForm?: ICardFieldStyles;
+    /** Per-field overrides (higher priority than cardForm). */
+    cardholderName?: ICardFieldStyles;
+    cardNumber?: ICardFieldStyles;
+    cvv?: ICardFieldStyles;
+    expirationMonth?: ICardFieldStyles;
+    expirationYear?: ICardFieldStyles;
+    labels?: {
+        nameLabel?: string;
+        cardLabel?: string;
+        cvvLabel?: string;
+        expiryDateLabel?: string;
+    };
+    placeholders?: {
+        namePlaceholder?: string;
+        cardPlaceholder?: string;
+        cvvPlaceholder?: string;
+        expiryMonthPlaceholder?: string;
+        expiryYearPlaceholder?: string;
+    };
+    /**
+     * Show the card-network icon inside the card number Skyflow iframe.
+     * Corresponds to Skyflow's `CollectElementOptions.enableCardIcon`.
+     * @default true
+     */
+    enableCardIcon?: boolean;
+}
 export interface IEventSecureInput {
     elementType: string;
     isEmpty: boolean;
     isFocused: boolean;
     isValid: boolean;
+    /** Raw field value. Empty string for sensitive fields (card_number, cvv) in production. */
+    value: string;
 }
 export interface IInputEvents {
     onChange?: (event: IEventSecureInput) => void;
@@ -108,7 +160,11 @@ export interface ICardFormEvents {
 export interface IEvents extends ICardFormEvents {
 }
 export interface IInlineCheckoutOptions extends IInlineCheckoutBaseOptions {
-    styles?: Record<string, string>;
+    /**
+     * @deprecated Use `customization.styles` instead.
+     * Still supported for backward compatibility — if both are provided, `customization.styles` takes precedence.
+     */
+    styles?: ICardStyles;
     renderPaymentButton?: boolean;
     customization?: IInlineCustomizationOptions;
     events?: IEvents;