@tonder.io/ionic-full-sdk 0.0.56 → 0.0.57-beta.develop.b746f50

package/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Tonder Ionic Full SDK - A TypeScript payment checkout integration library for mobile/web applications. Provides pre-built checkout UI with secure card tokenization via Skyflow vault, saved card management, alternative payment methods (APMs), and 3DS verification.
+
+## Build Commands
+
+```bash
+npm run build    # TypeScript type check (tsc -noEmit) + Rollup bundling
+```
+
+No test runner configured (Cypress E2E setup exists but no tests written yet).
+
+## Architecture
+
+### Entry Point
+- `src/index.ts` → exports `InlineCheckout` class
+
+### Core Class
+- `src/classes/inlineCheckout.ts` - Main checkout class extending `BaseInlineCheckout` from `@tonder.io/ionic-lite-sdk`. Handles checkout rendering, card tokenization, payment processing, 3DS verification, and saved card management.
+
+### Helpers
+- `src/helpers/template.ts` - HTML template generation for checkout UI (cards, APMs, accordion layouts)
+- `src/helpers/skyflow.ts` - Skyflow vault integration for secure card data handling
+- `src/helpers/utils.ts` - Utility functions (script loading, error display, currency formatting, card type detection)
+- `src/helpers/constants.ts` - `PAYMENT_METHOD` enum with 60+ Mexican/Peruvian payment options
+- `src/helpers/styles.ts` - Default input styling configuration
+
+### Types
+- `src/types/commons.ts` - Core interfaces: `IInlineCheckoutOptions`, `IInlineCustomizationOptions`, `Customer`, `PaymentData`
+- `src/types/inlineCheckout.ts` - `IInlineCheckout` public API interface
+- `src/types/skyflow.ts` - Skyflow-specific types
+
+## Key Patterns
+
+1. **Skyflow Integration**: Card data is tokenized via Skyflow vault - never touches application servers
+2. **Event Callbacks**: Form inputs support `onChange`, `onFocus`, `onBlur` events via `ICardFormEvents`
+3. **MutationObserver**: Used for DOM element detection before injecting checkout
+4. **Template Generation**: Dynamic HTML construction with accordion-js for expandable card/APM lists
+
+## Build Output
+
+Rollup bundles to ES modules in `/dist` with:
+- TypeScript declaration files (.d.ts)
+- Minified via terser
+- External deps: `skyflow-js`, `crypto-js`, `@tonder.io/ionic-lite-sdk`
+
+## Deprecated Methods
+
+Avoid using `setCustomerEmail()`, `setCartTotal()`, `setPaymentData()` - use `configureCheckout()` instead.

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

@@ -12,14 +12,14 @@ export declare class InlineCheckout extends BaseInlineCheckout<IInlineCustomizat
     deletingCards: string[];
     renderPaymentButton: boolean;
     renderSaveCardButton?: boolean;
-    customStyles: any;
-    injectInterval: any;
+    customStyles: Record<string, string> | undefined;
+    injectInterval: ReturnType<typeof setInterval> | undefined;
     abortRefreshCardsController: AbortController;
     containerId: string;
     injected: boolean;
     cardsInjected: boolean;
-    accordionCards: any;
-    accordionPaymentMethods: any;
+    accordionCards: any | null;
+    accordionPaymentMethods: any | null;
     apmsInjected: boolean;
     apmsData: ITonderPaymentMethod[];
     collectorIds: CollectorIds;

package/dist/helpers/template.d.ts

@@ -23,6 +23,7 @@ export type Card = {
     expiration_month: string;
     expiration_year: string;
     skyflow_id: string;
+    subscription_id?: string;
 };
 export declare const cardTemplate: (data?: {
     renderPaymentButton?: boolean;

package/dist/helpers/utils.d.ts

@@ -17,6 +17,7 @@ export declare const mapCards: (card: CardResponse) => {
     expiration_month: string;
     expiration_year: string;
     skyflow_id: string;
+    subscription_id?: string;
 };
 export declare const getBrowserInfo: () => {
     javascript_enabled: boolean;

package/dist/index.js

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

package/package.json

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

package/src/classes/inlineCheckout.ts

@@ -11,6 +11,7 @@ import {BaseInlineCheckout} from "@tonder.io/ionic-lite-sdk";
 import {IProcessPaymentRequest} from "@tonder.io/ionic-lite-sdk/dist/types/checkout";
 import {ISaveCardSkyflowRequest} from "@tonder.io/ionic-lite-sdk/dist/types/card";
 import {ITonderPaymentMethod} from "@tonder.io/ionic-lite-sdk/dist/types/paymentMethod";
+import type { SkyflowCollectFields, SkyflowCollectResponse } from "@tonder.io/ionic-lite-sdk/dist/types/cardOnFile";
 import {IEvents, IInlineCheckoutOptions, IInlineCustomizationOptions, InCollectorContainer} from "../types/commons";
 import {IInlineCheckout} from "../types/inlineCheckout";
 import get from "lodash.get";
@@ -24,15 +25,15 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
   deletingCards: string[] = [];
   renderPaymentButton: boolean
   renderSaveCardButton?: boolean
-  customStyles: any
-  injectInterval: any
+  customStyles: Record<string, string> | undefined
+  injectInterval: ReturnType<typeof setInterval> | undefined
   #cardsData: any[] = [];
   abortRefreshCardsController: AbortController;
   containerId: string
   injected: boolean
   cardsInjected: boolean
-  accordionCards: any = null;
-  accordionPaymentMethods: any = null;
+  accordionCards: any | null = null;
+  accordionPaymentMethods: any | null = null;
   apmsInjected = false
   apmsData: ITonderPaymentMethod[] = []
   collectorIds: CollectorIds
@@ -304,8 +305,14 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     const radio_card = document.getElementById(container_radio_id) as HTMLInputElement;
     if (radio_card) radio_card.checked = true;
 
+    // Check if the selected card has subscription_id
+    const savedCard = this.#cardsData.find(
+      (card: any) => card.fields?.skyflow_id === container_radio_id
+    );
+    const hasSubscriptionId = !!savedCard?.fields?.subscription_id;
+
     try{
-      if(type === "cards"){
+      if(type === "cards" && !hasSubscriptionId){
         this.updateCollectContainer = await initUpdateSkyflow(
             container_radio_id,
             vault_id,
@@ -556,6 +563,15 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
         this.#mountPayButton()
       }
     await this._initializeCheckout()
+
+    // Hide save card checkbox when card-on-file is enabled (card is always saved)
+    if (this._hasCardOnFileKeys()) {
+      const saveCardCheckbox = document.getElementById("save-checkout-card");
+      if (saveCardCheckbox?.parentElement) {
+        saveCardCheckbox.parentElement.style.display = "none";
+      }
+    }
+
     const {
       vault_id,
       vault_url
@@ -657,14 +673,69 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
     if(this.customer!.email){
       try{
-        if(this.merchantData! && "openpay_keys" in this.merchantData!) {
+        if(this.merchantData!) {
           const cardTokensSkyflowTonder: any = await this.#getCardTokens(this.collectorIds.tonderSaveCardButton!);
           const customerResponse : CustomerRegisterResponse | ErrorResponse = await this._getCustomer() as CustomerRegisterResponse;
 
           if("auth_token" in customerResponse && this.secureToken) {
-            const { auth_token } = customerResponse;
-            await this._saveCustomerCard(auth_token, this.merchantData!.business.pk, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
-            showMessage("Tarjeta registrada con éxito", this.radioChecked, this.collectorIds.msgNotification);
+            // @ts-ignore
+            const { auth_token, first_name = "", last_name = "", email } = customerResponse;
+
+            console.log("this._hasCardOnFileKeys()", this._hasCardOnFileKeys())
+            // Check if card-on-file flow should be used
+            if (this._hasCardOnFileKeys()) {
+              // 1. Save card and get bin
+              const saveCardResponse = await this.#handleSaveCard(
+                auth_token,
+                this.merchantData!.business.pk,
+                { skyflow_id: cardTokensSkyflowTonder.skyflow_id },
+                { forceSave: true, showNotification: false, appOrigin: true }
+              );
+
+              const cardBin = saveCardResponse?.card_bin;
+              if (!cardBin) {
+                throw new Error("Card BIN not returned from save card");
+              }
+
+              // 2. Process card on file
+              const cardOnFile = await this._initializeCardOnFile();
+              const result = await cardOnFile.process({
+                cardTokens: {
+                  name: cardTokensSkyflowTonder.cardholder_name,
+                  number: cardTokensSkyflowTonder.card_number,
+                  expiryMonth: cardTokensSkyflowTonder.expiration_month,
+                  expiryYear: cardTokensSkyflowTonder.expiration_year,
+                  cvv: cardTokensSkyflowTonder.cvv,
+                },
+                cardBin,
+                contactDetails: {
+                  firstName: first_name || '',
+                  lastName: last_name || '',
+                  email: email || '',
+                },
+                customerId: auth_token,
+                currency: this.currency || 'MXN',
+              });
+
+              // 3. Save card with subscription_id
+              await this.#handleSaveCard(
+                auth_token,
+                this.merchantData!.business.pk,
+                {
+                  skyflow_id: cardTokensSkyflowTonder.skyflow_id,
+                  subscription_id: result.subscriptionId
+                },
+                { forceSave: true, showNotification: true }
+              );
+            } else {
+              // Standard flow without card-on-file
+              await this.#handleSaveCard(
+                auth_token,
+                this.merchantData!.business.pk,
+                { skyflow_id: cardTokensSkyflowTonder.skyflow_id },
+                { forceSave: true, showNotification: true }
+              );
+            }
           } else {
             showError("No se han configurado los datos de seguridad para guardar tarjeta", this.radioChecked, this.collectorIds.msgError)
           }
@@ -680,6 +751,64 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
   }
 
+  async #processCardOnFilePayment(collectResponse: SkyflowCollectResponse): Promise<{ subscriptionId: string }> {
+    const cardOnFile = await this._initializeCardOnFile();
+
+    const cardFields = collectResponse.records?.[0]?.fields;
+    if (!cardFields) {
+      throw new Error("No card data returned from collect");
+    }
+
+    const customerResponse = await this._getCustomer() as CustomerRegisterResponse
+
+    // @ts-ignore
+      const { auth_token, first_name = "", last_name = "", email } = customerResponse;
+
+    // Save card and get card_bin from response
+    const saveCardResponse = await this.#handleSaveCard(
+      auth_token,
+      this.merchantData!.business.pk,
+      { skyflow_id: cardFields.skyflow_id },
+      { forceSave: true, showNotification: false, appOrigin: true }
+    );
+
+    const cardBin = saveCardResponse?.card_bin;
+    if (!cardBin) {
+      throw new Error("Card BIN not returned from save card");
+    }
+
+    const result = await cardOnFile.process({
+      cardTokens: {
+        name: cardFields.cardholder_name,
+        number: cardFields.card_number,
+        expiryMonth: cardFields.expiration_month,
+        expiryYear: cardFields.expiration_year,
+        cvv: cardFields.cvv,
+      },
+      cardBin,
+      contactDetails: {
+        firstName: first_name || '',
+        lastName: last_name || '',
+        email: email || '',
+      },
+      customerId: auth_token,
+      currency: this.currency || 'MXN',
+    });
+
+    // Update saved card with subscription_id
+    await this.#handleSaveCard(
+      auth_token,
+      this.merchantData!.business.pk,
+      {
+        skyflow_id: cardFields.skyflow_id,
+        subscription_id: result.subscriptionId
+      },
+      { forceSave: true, showNotification: false }
+    );
+
+    return { subscriptionId: result.subscriptionId };
+  }
+
   async _checkout() {
 
     try {
@@ -687,14 +816,36 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
       if(this.merchantData!) {
 
-        if("openpay_keys" in this.merchantData!) {
           const { business } = this.merchantData!
           let cardTokensSkyflowTonder: any;
-
-          if(this.radioChecked === "new" || this.radioChecked === undefined) {
-            cardTokensSkyflowTonder = await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked)
+          let cardOnFileProcessed = false;
+          const isNewCard = this.radioChecked === "new" || this.radioChecked === undefined;
+          let subscriptionCard = null;
+          if (isNewCard) {
+            cardTokensSkyflowTonder = await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked);
+
+            // Check if card-on-file flow should be used for new cards
+            if (this._hasCardOnFileKeys() && cardTokensSkyflowTonder) {
+                const collectResponse: SkyflowCollectResponse = {
+                  records: [{ fields: cardTokensSkyflowTonder as SkyflowCollectFields }]
+                };
+                subscriptionCard = await this.#processCardOnFilePayment(collectResponse);
+                cardOnFileProcessed = true;
+            }
           } else {
-            await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked)
+            // For saved cards, check if card has subscription_id
+            const savedCard = this.#cardsData.find(
+              (card: any) => card.fields?.skyflow_id === this.radioChecked
+            );
+
+            if (savedCard?.fields?.subscription_id) {
+              // Card has subscription_id, skip CVV collection
+              subscriptionCard = { subscriptionId: savedCard.fields.subscription_id };
+            } else {
+              // Regular saved card, need CVV update
+              await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked);
+            }
+
             cardTokensSkyflowTonder = {
               skyflow_id: this.radioChecked
             }
@@ -703,17 +854,21 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           const customerResponse : CustomerRegisterResponse = await this._getCustomer() as CustomerRegisterResponse;
           const { auth_token } = customerResponse;
 
-          if (auth_token && this.customer!.email) {
-            await this.#handleSaveCard(auth_token, business.pk, cardTokensSkyflowTonder)
+          // Only save card here if card-on-file flow wasn't processed (it handles its own save)
+          if (!cardOnFileProcessed) {
+            const skyflowId = 'skyflow_id' in cardTokensSkyflowTonder ? cardTokensSkyflowTonder.skyflow_id : '';
+            await this.#handleSaveCard(auth_token, business.pk, { skyflow_id: skyflowId });
           }
 
           const selected_apm: ITonderPaymentMethod | undefined | null = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):null;
-          const jsonResponseRouter = await this._handleCheckout({
-            ...(selected_apm && Object.keys(selected_apm).length > 0
-                ? { payment_method: selected_apm.payment_method }
-                : { card: cardTokensSkyflowTonder }),
-            customer: customerResponse
-          });
+          const payloadCheckout = {
+              ...(selected_apm && Object.keys(selected_apm).length > 0
+                  ? { payment_method: selected_apm.payment_method }
+                  : { card: cardTokensSkyflowTonder }),
+              enable_card_on_file: !!subscriptionCard?.subscriptionId,
+              customer: customerResponse
+          }
+          const jsonResponseRouter = await this._handleCheckout(payloadCheckout);
 
 
           this.#updatePayButton({cardId: this.radioChecked, disabled: false});
@@ -723,7 +878,6 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
             showError("No se ha podido procesar el pago",  this.radioChecked, this.collectorIds.msgError,)
             return false;
           }
-        }
       } else {
         showError("No se han configurado los datos del proveedor de servicio",  this.radioChecked, this.collectorIds.msgError)
       }
@@ -736,24 +890,40 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     }
   };
 
-  async #handleSaveCard(authToken: string, businessId: string | number, cardTokens: ISaveCardSkyflowRequest){
+  async #handleSaveCard(
+    authToken: string,
+    businessId: string | number,
+    cardTokens: ISaveCardSkyflowRequest & { subscription_id?: string },
+    options: { forceSave?: boolean; showNotification?: boolean; appOrigin?: boolean } = {}
+  ): Promise<{ card_bin?: string } | undefined> {
+    // Validate required data
+    if (!authToken || !this.customer?.email) {
+      return;
+    }
+
+    const { forceSave = false, showNotification = true, appOrigin = false } = options;
     const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
+    const shouldSave = forceSave || (saveCard && "checked" in saveCard && saveCard.checked) || !!this.customization.saveCards?.autoSave;
 
-    if((saveCard && "checked" in saveCard && saveCard.checked) || !!this.customization.saveCards?.autoSave) {
+    if (shouldSave) {
       try {
-        if(this.secureToken) {
-          await this._saveCustomerCard(authToken, businessId, cardTokens);
+        if (this.secureToken) {
+          const response = await this._saveCustomerCard(authToken, businessId, cardTokens, appOrigin);
           this.cardsInjected = false;
-          await this.#loadCardsList(authToken)
-          showMessage("Tarjeta registrada con éxito",this.radioChecked, this.collectorIds.msgNotification);
+          await this.#loadCardsList(authToken);
+          if (showNotification) {
+            showMessage("Tarjeta registrada con éxito", this.radioChecked, this.collectorIds.msgNotification);
+          }
+          return response;
         } else {
-          showError("No se han configurado los datos de seguridad para guardar tarjeta",  this.radioChecked, this.collectorIds.msgError)
+          showError("No se han configurado los datos de seguridad para guardar tarjeta", this.radioChecked, this.collectorIds.msgError);
         }
-      }catch (error){
+      } catch (error) {
         const exist_msg_error = typeof error === "object" && error !== null && "message" in error;
-        if(exist_msg_error && error?.message !== 'Error'){
-          showError(error?.message as string,  this.radioChecked, this.collectorIds.msgError);
+        if (exist_msg_error && error?.message !== 'Error') {
+          showError(error?.message as string, this.radioChecked, this.collectorIds.msgError);
         }
+        throw error;
       }
     }
   }

package/src/helpers/skyflow.ts

@@ -96,12 +96,12 @@ export async function initSkyflow(
       validations: [regexMatchRule],
     });
 
-          handleSkyflowElementEvents({
-          element: cardNumberElement,
-          errorStyles: collectStylesOptions?.errorTextStyles,
-          fieldMessage: collectStylesOptions?.labels?.cardLabel,
-          events: events?.cardNumberEvents,
-        });
+  handleSkyflowElementEvents({
+    element: cardNumberElement,
+    errorStyles: collectStylesOptions?.errorTextStyles,
+    fieldMessage: collectStylesOptions?.labels?.cardLabel,
+    events: events?.cardNumberEvents,
+  });
 
   const cvvElement: CollectElement | RevealElement | ComposableElement =
     collectContainer.create({
@@ -344,10 +344,10 @@ function handleSkyflowElementEvents(event: {
     errorStyles = {},
     requiredMessage = "Campo requerido",
     invalidMessage = "Campo no válido",
-    events
+    events,
   } = event;
   if ("on" in element) {
-    element.on(Skyflow.EventName.CHANGE, (state: any) => {
+    element.on(Skyflow.EventName.CHANGE, (state: SkyflowEventData) => {
       executeEvent({eventName: "onChange", data: state, events});
       updateErrorLabel({
         element,
@@ -404,9 +404,16 @@ function updateErrorLabel(event: {
   }
 }
 
+interface SkyflowEventData {
+  elementType?: string;
+  isEmpty?: boolean;
+  isFocused?: boolean;
+  isValid?: boolean;
+}
+
 const executeEvent = (event: {
   eventName: "onChange" | "onBlur" | "onFocus";
-  data: any;
+  data: SkyflowEventData;
   events?: IInputEvents;
 }) => {
   const { eventName, data, events } = event;
@@ -415,11 +422,12 @@ const executeEvent = (event: {
     if (typeof eventHandler === "function") {
       eventHandler({
         elementType: get(data, "elementType", ""),
-        isEmpty: get(data, "isEmpty", ""),
-        isFocused: get(data, "isFocused", ""),
-        isValid: get(data, "isValid", ""),
+        isEmpty: get(data, "isEmpty", false),
+        isFocused: get(data, "isFocused", false),
+        isValid: get(data, "isValid", false),
       });
     }
   }
 };
 
+

package/src/helpers/template.ts

@@ -26,7 +26,8 @@ export type Card = {
   card_number: string,
   expiration_month: string,
   expiration_year: string,
-  skyflow_id: string
+  skyflow_id: string,
+  subscription_id?: string
 }
 
 export const cardTemplate = (data: {
@@ -507,7 +508,8 @@ export const cardItemsTemplate = (data: {
       </div>
       <div class="ac-panel">
         <div class="ac-option-panel-container" id="acContainer${card.skyflow_id}">
-        
+
+           ${!card.subscription_id ? `
            <div class="cvvContainer" id="cvvContainer${card.skyflow_id}">
              <label class="tndr-form-label label-cvv-cards">${cvvLabel}</label>
               <div id="${data.collectorIds.cvv}${card.skyflow_id}" class="empty-div">
@@ -540,9 +542,10 @@ export const cardItemsTemplate = (data: {
                       <input tabindex="-1"/>
                    </div>
                  </div>
-              
+
               </div>
            </div>
+           ` : ``}
            ${buttonAndMessagesTemplate({
               showButton: data.renderPaymentButton || false,
               classContainerButton: "container-pay-button",

package/src/types/commons.ts

@@ -19,17 +19,17 @@ export type Customer = {
     phone: string
 }
 
-export type Business = { 
-    vault_id: string, 
-    vault_url: string, 
+export type Business = {
+    vault_id: string,
+    vault_url: string,
     openpay_keys: {
-        merchant_id: string, 
+        merchant_id: string,
         public_key: string
-    }, 
-    reference: string, 
+    },
+    reference: string,
     business: {
         pk: string
-    } 
+    }
 }
 
 export type OrderItem = {