npm - @tonder.io/ionic-full-sdk - Versions diffs - 0.0.51 → 0.0.52 - Mend

@tonder.io/ionic-full-sdk 0.0.51 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +1 -21
package/dist/helpers/skyflow.d.ts +2 -4
package/dist/index.js +1 -1
package/package.json +3 -3
package/src/classes/inlineCheckout.ts +1 -10
package/src/helpers/skyflow.ts +126 -231
package/src/helpers/template.ts +6 -3

package/README.md CHANGED Viewed

@@ -24,7 +24,7 @@ You can install using NPM
 npm i @tonder.io/ionic-full-sdk
 ```
-Add dependencies to the root of the app (index.html)
+Add dependencies to the root of the app (index.html) only if you are going to use Openpay as the payment processor.
 ```html
 <script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
@@ -60,9 +60,6 @@ const inlineCheckout = new InlineCheckout({
   renderPaymentButton: false // true, if you need render default button of tonder
 });
-// only if renderPaymentButton is true
-inlineCheckout.setPaymentData(checkoutData);
 // The configureCheckout function allows you to set initial information,
 // such as the customer's email, which is used to retrieve a list of saved cards or the secure token required to save a card.
 // You can refer to the Customer interface for the complete object structure that can be passed.
@@ -390,14 +387,6 @@ pay-button[disabled] {
 <uses-permission android:name="android.permission.INTERNET" />
 ```
-<font size="3">Likewise, if you are deploying to macOS, edit your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files to include the network client entitlement.</font>
-```xml
-<!-- Required to fetch data from the internet. -->
-<key>com.apple.security.network.client</key>
-<true>
-```
 ## Payment Data Structure
 When calling the `payment` method, use the following data structure:
@@ -904,15 +893,6 @@ The following functions have been deprecated and should no longer be used. Consi
 - Replace `apiKey`, `mode`, `returnUrl` with your actual values.
 - Remember to use the `configureCheckout` function after creating an instance of `InlineCheckout`. This ensures that functions such as payment processing, saving cards, deleting cards, and others work correctly.
-### Script Dependencies
-For all implementations, ensure you include the necessary scripts:
-```html
-<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
-<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
-```
 ## License
 [MIT](https://choosealicense.com/licenses/mit/)

package/dist/helpers/skyflow.d.ts CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- import n from"lodash.get";import e from"skyflow-js";import{BaseInlineCheckout as t}from"@tonder.io/ionic-lite-sdk";import o from"accordion-js";function i(n,e,t,o){return new(t\|\|(t=Promise))((function(i,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 e;n.done?i(n.value):(e=n.value,e instanceof t?e:new t((function(n){n(e)}))).then(a,r)}s((o=o.apply(n,e\|\|[])).next())}))}function l(n,e,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?n!==e\|\|!o:!e.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(n):o?o.value:e.get(n)}function a(n,e,t,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?n!==e\|\|!i:!e.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,t):i?i.value=t:e.set(n,t),t}var 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,e=null,t="msgError",o="msgErrorText"){try{const i=e&&"new"!==e;let l=document.getElementById(`${t}${i?e:""}`),a=document.getElementById(`${o}${i?e:""}`);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,e=null,t="msgNotification",o="msgNotificationText"){try{const i=e&&"new"!==e,l=document.getElementById(`${t}${i?e:""}`);if(l){let t=document.getElementById(`${o}${i?e:""}`);l.style.display="flex",t.innerHTML="",t.innerHTML=n,setTimeout((function(){l.style.display="none",t.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 e=Object.assign({},n.fields),t=e.card_number.split("-"),o=t[t.length-1];return e.card_number=`••••${o}`,e},m=n=>n.trim().replace(/\s+/g,"");const h=(n={isEnrollmentCard:!1,collectorIds:{}})=>{var e,t,o,i,l,a,r,d,c,u,m,h,v,y,g,f,x,E,C,A,I,S,w,P,L,O,_,N,B,k,M,T,j,R,$,D,z,U,F,Y,H,G,V,W,X,q,K,J,Z,Q,nn,en,tn,on,ln,an,rn,sn,dn,cn,pn,un,mn,hn,vn,yn,bn,gn,fn,xn,En,Cn;return`\n<div class="container-tonder">\n ${(null===(t=null===(e=n.customization)\|\|void 0===e?void 0:e.saveCards)\|\|void 0===t?void 0:t.showSaved)?`<div id="${n.collectorIds.cardsListContainer}" class="cards-list-container"></div>`:""}\n ${n.isEnrollmentCard?"":`\n <div class="pay-new-card">\n <input checked id="new" class="card_selected" name="card_selected" type="radio"/>\n <label class="card-item-label-new" for="new">\n <img class="card-image" src="${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}\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}\n\n.empty-div {\n position: relative;\n margin-top: 2px;\n margin-bottom: 4px;\n}\n.empty-div-card {\n height: 80px !important;\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===(E=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===E?void 0:E.fontSize:s.labelStyles.base.fontSize};\n font-family: ${(null===(I=null===(A=null===(C=null==n?void 0:n.customStyles)\|\|void 0===C?void 0:C.labelStyles)\|\|void 0===A?void 0:A.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===(_=null===(O=null===(L=null==n?void 0:n.customStyles)\|\|void 0===L?void 0:L.labelStyles)\|\|void 0===O?void 0:O.base)\|\|void 0===_?void 0:_.fontWeight)?null===(k=null===(B=null===(N=null==n?void 0:n.customStyles)\|\|void 0===N?void 0:N.labelStyles)\|\|void 0===B?void 0:B.base)\|\|void 0===k?void 0:k.fontWeight:s.labelStyles.base.fontWeight};\n text-align: ${(null===(j=null===(T=null===(M=null==n?void 0:n.customStyles)\|\|void 0===M?void 0:M.labelStyles)\|\|void 0===T?void 0:T.base)\|\|void 0===j?void 0:j.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===(X=null===(W=null===(V=null==n?void 0:n.customStyles)\|\|void 0===V?void 0:V.labelStyles)\|\|void 0===W?void 0:W.base)\|\|void 0===X?void 0:X.color)?null===(J=null===(K=null===(q=null==n?void 0:n.customStyles)\|\|void 0===q?void 0:q.labelStyles)\|\|void 0===K?void 0:K.base)\|\|void 0===J?void 0:J.color:s.labelStyles.base.color};\n font-size: ${(null===(nn=null===(Q=null===(Z=null==n?void 0:n.customStyles)\|\|void 0===Z?void 0:Z.labelStyles)\|\|void 0===Q?void 0:Q.base)\|\|void 0===nn?void 0:nn.fontSize)?null===(on=null===(tn=null===(en=null==n?void 0:n.customStyles)\|\|void 0===en?void 0:en.labelStyles)\|\|void 0===tn?void 0:tn.base)\|\|void 0===on?void 0:on.fontSize:s.labelStyles.base.fontSize};\n font-family: ${(null===(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===(Cn=null===(En=null===(xn=null==n?void 0:n.customStyles)\|\|void 0===xn?void 0:xn.labelStyles)\|\|void 0===En?void 0:En.base)\|\|void 0===Cn?void 0:Cn.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: 10px !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=e=>`\n <div class="accordion-container">\n ${e.cards.reduce(((t,o)=>{var i,l;const{cvvLabel:a}=(r=e.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`${t}\n <div class="ac" id="option_container-${o.skyflow_id}">\n <div class="card-item">\n <input id="${o.skyflow_id}" class="cards card_selected" name="card_selected" type="radio"/>\n <label class="card-item-label" for="${o.skyflow_id}">\n <img class="card-image" src="${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="${e.collectorIds.cvv}${o.skyflow_id}" class="empty-div">\n <div class="tndr-simulate-input-cvv-container">\n <div class="tndr-simulate-input-cvv">\n <svg class="cvvIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="24" viewBox="0 0 270 178">\n <defs>\n <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n <stop offset="0" stop-color="#386bbf"/>\n <stop offset="1" stop-color="#032ea3"/>\n </linearGradient>\n <linearGradient id="linear-gradient-2" x1="0.5" y1="0.115" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n <stop offset="0" stop-color="#1c1c1c"/>\n <stop offset="1" stop-color="#151515"/>\n </linearGradient>\n </defs>\n <g id="Grupo_3" data-name="Grupo 3" transform="translate(-69 -312)">\n <g id="Grupo_2" data-name="Grupo 2">\n <rect id="Rectángulo_58" data-name="Rectángulo 58" width="253" height="165" rx="25" transform="translate(69 312)" fill="url(#linear-gradient)"/>\n <rect id="Rectángulo_61" data-name="Rectángulo 61" width="68" height="8" rx="4" transform="translate(86 437)" fill="#fff" opacity="0.877"/>\n <rect id="Rectángulo_66" data-name="Rectángulo 66" width="253" height="24" transform="translate(69 347)" fill="url(#linear-gradient-2)"/>\n <g id="Elipse_4" data-name="Elipse 4" transform="translate(221 374)" fill="#fff" stroke="#191919" stroke-width="1">\n <ellipse cx="59" cy="58" rx="59" ry="58" stroke="none"/>\n <ellipse cx="59" cy="58" rx="58.5" ry="57.5" fill="none"/>\n </g>\n </g>\n <text id="_123" data-name="123" transform="translate(240 448)" font-size="45" font-family="Menlo-Regular, Menlo"><tspan x="0" y="0">123</tspan></text>\n </g>\n </svg>\n <input tabindex="-1"/>\n </div>\n </div>\n \n </div>\n </div>\n ${b({showButton:e.renderPaymentButton\|\|!1,classContainerButton:"container-pay-button",tonderButtonId:`${e.collectorIds.tonderPayButton}${o.skyflow_id}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${e.collectorIds.msgError}${o.skyflow_id}`,msgErrorTextId:`${e.collectorIds.msgErrorText}${o.skyflow_id}`,msgNotificationId:`${e.collectorIds.msgNotification}${o.skyflow_id}`,msgNotificationTextId:`${e.collectorIds.msgNotificationText}${o.skyflow_id}`,buttonText:null===(l=null===(i=e.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==e?void 0:e.renderPaymentButton)?"20px 32px 0px 32px":"20px 32px 20px 32px"};\n }\n .cvvContainer{\n max-width: 60%; \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(((e,t)=>{var o,i;const l=(n=>{const e=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"}}[e]\|\|{icon:"https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",label:""}})(t.payment_method);return`\n ${e}\n <div class="ac ac-paymentMethods" id="option_container-${t.pk}">\n <div class="apm-item">\n <input id="${t.pk}" class="paymentMethods card_selected" name="card_selected" type="radio"/>\n <label class="apm-item-label" for="${t.pk}">\n <div class="apm-image">\n <div class="apm-image-border"></div>\n <img src="${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${t.pk}">\n ${b({showButton:n.renderPaymentButton\|\|!1,classContainerButton:"container-pay-button",tonderButtonId:`${n.collectorIds.tonderPayButton}${t.pk}`,classButton:"tndr-button card-pay-button pay-button",msgErrorId:`${n.collectorIds.msgError}${t.pk}`,msgErrorTextId:`${n.collectorIds.msgErrorText}${t.pk}`,msgNotificationId:`${n.collectorIds.msgNotification}${t.pk}`,msgNotificationTextId:`${n.collectorIds.msgNotificationText}${t.pk}`,buttonText:null===(i=null===(o=n.customization)\|\|void 0===o?void 0:o.paymentButton)\|\|void 0===i?void 0:i.text})}\n </div>\n </div>\n </div>\n`}),"")}\n </div>\n \n <style>\n .apm-item-label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n color: #1D1D1D;\n gap: 33% 10px;\n margin-top: 15px;\n margin-bottom: 15px;\n width: 100%;\n }\n .ac-option-panel-container.tndr-pm-item-container{\n padding-top: 0;\n }\n .apm-item {\n position: relative;\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 33% 15px;\n padding: 0px 30px;\n }\n\n .apm-item:first-child {\n border-top: 1px solid #e2e8f0;\n }\n\n .apm-item .apm-name {\n font-size: 16px;\n }\n .apm-image {\n width: 30px;\n height: 30px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .apm-image img {\n width: auto;\n height: 30px;\n }\n .apm-image-border{\n position: absolute;\n border: 1px solid #bababa36;\n border-radius: 4px;\n pointer-events: none;\n box-sizing: border-box;\n width: 100%;\n height: 97%;\n }\n\n .card_selected {\n position: relative;\n width: 16px;\n min-width: 16px;\n height: 16px;\n appearance: none;\n cursor: pointer;\n border-radius: 100%;\n border: 1px #bababa solid;\n color: #3bc635;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n \n .card_selected:before {\n width: 8px;\n height: 8px;\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n background-color: #3bc635;\n opacity: 0;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n \n .card_selected:checked {\n border: 1px #3bc635 solid;\n position: relative;\n width: 16px;\n height: 16px;\n min-width: 16px;\n appearance: none;\n cursor: pointer;\n border-radius: 100%;\n color: #3bc635;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n \n .card_selected:checked:before {\n content: "";\n border: 1px #3bc635 solid;\n width: 8px;\n height: 8px;\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n background-color: #3bc635;\n opacity: 50;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n \n .card_selected:hover:before {\n width: 8px;\n height: 8px;\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n background-color: #3bc635;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n opacity: 10;\n }\n\n </style>\n \n `,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,t,o,l){return i(this,arguments,void 0,(function(n,t,o,i,l={},a,r,d){var c,p,u,m,h,v,y,b,g,E,I,S,w,P,L,O,_,N,B,k,M,T,j,R,$,D,z,U,F,Y,H,G,V,W,X,q;const K=(yield f(n,t,o,r,i)).container(e.ContainerType.COLLECT);var J=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===(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===(P=null==l?void 0:l.placeholders)\|\|void 0===P?void 0:P.namePlaceholder)?null===(L=null==l?void 0:l.placeholders)\|\|void 0===L?void 0:L.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(O=null==l?void 0:l.placeholders)\|\|void 0===O?void 0:O.cardPlaceholder)&&""!==(null===(_=null==l?void 0:l.placeholders)\|\|void 0===_?void 0:_.cardPlaceholder)?null===(N=null==l?void 0:l.placeholders)\|\|void 0===N?void 0:N.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(B=null==l?void 0:l.placeholders)\|\|void 0===B?void 0:B.cvvPlaceholder)&&""!==(null===(k=null==l?void 0:l.placeholders)\|\|void 0===k?void 0:k.cvvPlaceholder)?null===(M=null==l?void 0:l.placeholders)\|\|void 0===M?void 0:M.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(T=null==l?void 0:l.placeholders)\|\|void 0===T?void 0:T.expiryMonthPlaceholder)&&""!==(null===(j=null==l?void 0:l.placeholders)\|\|void 0===j?void 0:j.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 Z=Object.assign({},J.inputStyles.base);Z.textIndent="44px";const Q={type:e.ValidationRuleType.LENGTH_MATCH_RULE,params:{max:70,error:"El campo nombre del titular debe tener menos de 70 caracteres"}},nn=K.create(Object.assign(Object.assign({table:"cards",column:"cardholder_name"},J),{label:null===(U=null==J?void 0:J.labels)\|\|void 0===U?void 0:U.nameLabel,placeholder:null===(F=null==J?void 0:J.placeholders)\|\|void 0===F?void 0:F.namePlaceholder,type:e.ElementType.CARDHOLDER_NAME,validations:[Q,C]}));"on"in nn&&(nn.on(e.EventName.CHANGE,(n=>{A("onChange",n,null==d?void 0:d.cardHolderEvents);let e=document.getElementById("errorCardHolderIdTonder");e&&n.isValid&&!n.isEmpty&&e.remove()})),nn.on(e.EventName.BLUR,(n=>{A("onBlur",n,null==d?void 0:d.cardHolderEvents);let e=document.getElementById(a.holderName),t=document.getElementById("errorCardHolderIdTonder");if(t&&t.remove(),!n.isValid){let t=document.createElement("div");t.classList.add("error-custom-inputs-tonder"),t.id="errorCardHolderIdTonder",t.textContent=n.isEmpty?"El campo es requerido":"El campo titular de la tarjeta es inválido",null==e\|\|e.appendChild(t)}})),nn.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==d?void 0:d.cardHolderEvents)})));const en=K.create(Object.assign(Object.assign({table:"cards",column:"card_number"},J),{inputStyles:Object.assign(Object.assign({},J.inputStyles),{base:Z}),label:null===(Y=J.labels)\|\|void 0===Y?void 0:Y.cardLabel,placeholder:null===(H=J.placeholders)\|\|void 0===H?void 0:H.cardPlaceholder,type:e.ElementType.CARD_NUMBER,validations:[C]}));"on"in en&&(en.on(e.EventName.CHANGE,(n=>{A("onChange",n,null==d?void 0:d.cardNumberEvents);let e=document.getElementById("errorCardNumberIdTonder");e&&n.isValid&&!n.isEmpty&&e.remove()})),en.on(e.EventName.BLUR,(n=>{A("onBlur",n,null==d?void 0:d.cardNumberEvents);let e=document.getElementById(a.cardNumber),t=document.getElementById("errorCardNumberIdTonder");if(t&&t.remove(),!n.isValid){let t=document.createElement("div");t.classList.add("error-custom-inputs-tonder"),t.id="errorCardNumberIdTonder",t.textContent=n.isEmpty?"El campo es requerido":"El campo número de tarjeta es inválido",null==e\|\|e.appendChild(t)}})),en.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==d?void 0:d.cardNumberEvents)})));const tn=K.create(Object.assign(Object.assign({table:"cards",column:"cvv"},J),{label:null===(G=J.labels)\|\|void 0===G?void 0:G.cvvLabel,placeholder:null===(V=J.placeholders)\|\|void 0===V?void 0:V.cvvPlaceholder,type:e.ElementType.CVV,validations:[C]}));"on"in tn&&(tn.on(e.EventName.CHANGE,(n=>{A("onChange",n,null==d?void 0:d.cvvEvents);let e=document.getElementById("errorCvvIdTonder");e&&n.isValid&&!n.isEmpty&&e.remove()})),tn.on(e.EventName.BLUR,(n=>{A("onBlur",n,null==d?void 0:d.cvvEvents);let e=document.getElementById(a.cvv),t=document.getElementById("errorCvvIdTonder");if(t&&t.remove(),!n.isValid){let t=document.createElement("div");t.classList.add("error-custom-inputs-tonder"),t.id="errorCvvIdTonder",t.textContent=n.isEmpty?"El campo es requerido":"El campo es inválido",null==e\|\|e.appendChild(t)}})),tn.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==d?void 0:d.cvvEvents)})));const on=K.create(Object.assign(Object.assign({table:"cards",column:"expiration_month"},J),{label:null===(W=J.labels)\|\|void 0===W?void 0:W.expiryDateLabel,placeholder:null===(X=J.placeholders)\|\|void 0===X?void 0:X.expiryMonthPlaceholder,type:e.ElementType.EXPIRATION_MONTH,validations:[C]}));"on"in on&&(on.on(e.EventName.CHANGE,(n=>{A("onChange",n,null==d?void 0:d.monthEvents);let e=document.getElementById("errorExpiryMonthIdTonder");e&&n.isValid&&!n.isEmpty&&e.remove()})),on.on(e.EventName.BLUR,(n=>{A("onBlur",n,null==d?void 0:d.monthEvents);let e=document.getElementById(a.expirationMonth),t=document.getElementById("errorExpiryMonthIdTonder");if(t&&t.remove(),!n.isValid){let t=document.createElement("div");t.classList.add("error-custom-inputs-tonder"),t.id="errorExpiryMonthIdTonder",t.textContent=n.isEmpty?"El campo es requerido":"El campo es inválido",null==e\|\|e.appendChild(t)}})),on.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==d?void 0:d.monthEvents)})));const ln=K.create(Object.assign(Object.assign({table:"cards",column:"expiration_year"},J),{label:"",placeholder:null===(q=J.placeholders)\|\|void 0===q?void 0:q.expiryYearPlaceholder,type:e.ElementType.EXPIRATION_YEAR,validations:[C]}));"on"in ln&&(ln.on(e.EventName.CHANGE,(n=>{A("onChange",n,null==d?void 0:d.yearEvents);let e=document.getElementById("errorExpiryYearIdTonder");e&&n.isValid&&!n.isEmpty&&e.remove()})),ln.on(e.EventName.BLUR,(n=>{A("onBlur",n,null==d?void 0:d.yearEvents);let e=document.getElementById(a.expirationYear),t=document.getElementById("errorExpiryYearIdTonder");if(t&&t.remove(),!n.isValid){let t=document.createElement("div");t.classList.add("error-custom-inputs-tonder"),t.id="errorExpiryYearIdTonder",t.textContent=n.isEmpty?"El campo es requerido":"El campo es inválido",null==e\|\|e.appendChild(t)}})),ln.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==d?void 0:d.yearEvents)})));const an={cardNumber:{element:en,container:`#${a.cardNumber}`},cvv:{element:tn,container:`#${a.cvv}`},expiryMonth:{element:on,container:`#${a.expirationMonth}`},expiryYear:{element:ln,container:`#${a.expirationYear}`},cardHolderName:{element:nn,container:`#${a.holderName}`}};return yield x(an),{container:K,elements:{cardHolderNameElement:nn,cardNumberElement:en,cvvElement:tn,expiryMonthElement:on,expiryYearElement:ln}}}))}function f(n,t,o,l,a){return i(this,void 0,void 0,(function(){return e.init({vaultID:n,vaultURL:t,getBearerToken:()=>i(this,void 0,void 0,(function(){const n=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${l}`},signal:a});if(n.ok){return(yield n.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:e.LogLevel.ERROR,env:e.Env.DEV}})}))}function x(n){return i(this,void 0,void 0,(function(){if("object"!=typeof n\|\|null===n)throw new Error("Invalid configuration object");for(const[e,{element:t,container:o}]of Object.entries(n))t&&o?t.mount(o):console.warn(`Skipping mount for '${e}' due to missing element or container.`)}))}const E=RegExp("^(?!s$).+"),C={type:e.ValidationRuleType.REGEX_MATCH_RULE,params:{regex:E,error:"El campo es requerido"}},A=(e,t,o)=>{if(o&&e in o){const i=o[e];"function"==typeof i&&i({elementType:n(t,"elementType",""),isEmpty:n(t,"isEmpty",""),isFocused:n(t,"isFocused",""),isValid:n(t,"isValid","")})}};var I,S,w,P,L,O,_,N,B,k,M,T,j,R,$,D,z,U,F,Y,H,G,V,W,X,q,K;class J extends t{constructor({apiKey:n,returnUrl:e,renderPaymentButton:t=!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:e,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"}),I.add(this),this.paymentData={},this.deletingCards=[],S.set(this,[]),this.accordionCards=null,this.accordionPaymentMethods=null,this.apmsInjected=!1,this.apmsData=[],this.isOpenPaySandbox=!0,this.isEnrollmentCard=!1,w.set(this,{paymentButton:{show:!1,text:"Pagars",showAmount:!0}}),P.set(this,void 0),this.renderPaymentButton=t\|\|!1,this.renderSaveCardButton=p,this.customStyles=i,a(this,P,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,w,"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,w,"f").paymentButton)\|\|void 0===y?void 0:y.show)})})}setCustomerEmail(n){this.customer=Object.assign(Object.assign({},this.customer),{email:n})}setPaymentData(n){var e;n&&(this.paymentData=n,this.setCartTotal((null===(e=n.cart)\|\|void 0===e?void 0:e.total)\|\|"0"))}injectCheckout(){return i(this,void 0,void 0,(function(){if(this.injected)return;const n=document.querySelector(`#${this.containerId}`);if(n)return n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderPaymentButton:this.renderPaymentButton,customization:this.customization,renderSaveCardButton:this.renderSaveCardButton}),yield l(this,I,"m",H).call(this),void(this.injected=!0);const e=new MutationObserver(((n,e)=>i(this,void 0,void 0,(function(){const n=document.querySelector(`#${this.containerId}`);n&&(n.innerHTML=h({collectorIds:this.collectorIds,customStyles:this.customStyles,isEnrollmentCard:this.isEnrollmentCard,renderSaveCardButton:this.renderSaveCardButton,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),yield l(this,I,"m",H).call(this),this.injected=!0,e.disconnect())}))));e.observe(document.body,{childList:!0,subtree:!0,attributeFilter:["id"]})}))}removeCheckout(){this.injected=!1,this.cardsInjected=!1,this.apmsInjected=!1,this.abortController.abort(),this.abortController=new AbortController,clearInterval(this.injectInterval),console.log("InlineCheckout removed from DOM and cleaned up.")}saveCard(){return i(this,void 0,void 0,(function(){return new Promise(((n,e)=>i(this,void 0,void 0,(function(){try{yield l(this,I,"m",X).call(this,!0,"Guardando..."),yield l(this,I,"m",q).call(this),n("Tarjeta registrada con éxito")}catch(n){e(n)}finally{yield l(this,I,"m",X).call(this)}}))))}))}_setCartTotal(n){this.cartTotal=n,l(this,I,"m",R).call(this)}setCartTotal(n){this.cartTotal=n,l(this,I,"m",R).call(this)}_checkout(){return i(this,void 0,void 0,(function(){try{if(l(this,I,"m",R).call(this,{cardId:this.radioChecked,textContent:"Cargando...",disabled:!0}),this.merchantData){if("openpay_keys"in this.merchantData){const{business:n}=this.merchantData;let e;"new"===this.radioChecked\|\|void 0===this.radioChecked?e=yield l(this,I,"m",W).call(this,this.collectorIds.tonderPayButton,this.radioChecked):(yield l(this,I,"m",W).call(this,this.collectorIds.tonderPayButton,this.radioChecked),e={skyflow_id:this.radioChecked});const t=yield this._getCustomer(),{auth_token:o}=t;o&&this.customer.email&&(yield l(this,I,"m",K).call(this,o,n.pk,e));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:e}),{customer:t}));return l(this,I,"m",R).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,I,"m",R).call(this,{cardId:this.radioChecked,disabled:!1})}}))}}S=new WeakMap,w=new WeakMap,P=new WeakMap,I=new WeakSet,L=function(e){return i(this,void 0,void 0,(function(){var t;if(this.cardsInjected\|\|!(null===(t=this.customization.saveCards)\|\|void 0===t?void 0:t.showSaved)\|\|this.isEnrollmentCard)return;this.cardsInjected=!1;const o=yield this._getCustomerCards(e,this.merchantData.business.pk);a(this,S,n(o,"cards",[]),"f");let i=[];if("cards"in o){i=o.cards.map(u);const n=setInterval((()=>{const t=document.querySelector(`#${this.collectorIds.cardsListContainer}`);t&&this.injected&&(t.innerHTML=v({cards:i,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customStyles:this.customStyles,customization:this.customization}),clearInterval(n),l(this,I,"m",O).call(this),l(this,I,"m",$).call(this,e),this.cardsInjected=!0)}),500)}}))},O=function(n="cards"){const e={cards:{accClass:"accordion-container",triggerClass:"card-item-label"},paymentMethods:{accClass:"accordion-container-apm",triggerClass:"apm-item-label"}},t=new o("."+e[n].accClass,{triggerClass:e[n].triggerClass,duration:300,collapse:!0,showMultiple:!1,onOpen:e=>i(this,void 0,void 0,(function(){yield l(this,I,"m",B).call(this,e,n)}))});"cards"===n?this.accordionCards=t:"paymentMethods"===n&&(this.accordionPaymentMethods=t)},_=function(n="",e=null,t=!1,o=!1){[{type:"cards",accordion:this.accordionCards},{type:"paymentMethods",accordion:this.accordionPaymentMethods}].forEach((({accordion:i,type:a})=>{i&&(t&&"closeAll"in i&&i.closeAll(),o&&a!==n&&i.closeAll&&i.closeAll(),null!==e&&a===n&&i.open&&i.open("paymentMethods"!==a?e:e-(l(this,S,"f").length+1)))}))},N=function(n=[],e="show"){n.forEach((n=>{document.querySelectorAll("."+n).forEach((n=>{n.classList.remove(e)}))}))},B=function(n){return i(this,arguments,void 0,(function(n,t="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,I,"m",N).call(this,["cvvContainer"]);const p=document.getElementById(c);p&&(p.checked=!0);try{"cards"===t&&(this.updateCollectContainer=yield function(n,t,o,l,a){return i(this,arguments,void 0,(function(n,t,o,i,l,a={},r,d,c){var p,u,m,h,v,y,b,g,E,I,S,w,P,L,O,_,N,B,k,M,T,j,R,$,D,z,U,F;const Y=yield f(t,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===(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===(P=null==a?void 0:a.placeholders)\|\|void 0===P?void 0:P.namePlaceholder)&&""!==(null===(L=null==a?void 0:a.placeholders)\|\|void 0===L?void 0:L.namePlaceholder)?null===(O=null==a?void 0:a.placeholders)\|\|void 0===O?void 0:O.namePlaceholder:s.placeholders.namePlaceholder,cardPlaceholder:(null===(_=null==a?void 0:a.placeholders)\|\|void 0===_?void 0:_.cardPlaceholder)&&""!==(null===(N=null==a?void 0:a.placeholders)\|\|void 0===N?void 0:N.cardPlaceholder)?null===(B=null==a?void 0:a.placeholders)\|\|void 0===B?void 0:B.cardPlaceholder:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(k=null==a?void 0:a.placeholders)\|\|void 0===k?void 0:k.cvvPlaceholder)&&""!==(null===(M=null==a?void 0:a.placeholders)\|\|void 0===M?void 0:M.cvvPlaceholder)?null===(T=null==a?void 0:a.placeholders)\|\|void 0===T?void 0:T.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(j=null==a?void 0:a.placeholders)\|\|void 0===j?void 0:j.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(e.ContainerType.COLLECT),V=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:e.ElementType.CVV,validations:[C],skyflowID:n}));"on"in V&&(V.on(e.EventName.CHANGE,(e=>{A("onChange",e,null==c?void 0:c.cvvEvents);let t=document.getElementById(`errorCvvIdTonder${n}`);t&&e.isValid&&!e.isEmpty&&t.remove()})),V.on(e.EventName.BLUR,(e=>{A("onBlur",e,null==c?void 0:c.cvvEvents);let t=document.getElementById(r.cvv+n),o=document.getElementById("errorCvvIdTonder"+n);if(o&&o.remove(),!e.isValid){let o=document.createElement("div");o.classList.add("error-custom-inputs-tonder-cards"),o.classList.add("error-custom-inputs-tonder"),o.id="errorCvvIdTonder"+n,o.textContent=e.isEmpty?"El campo es requerido":"El campo es inválido",null==t\|\|t.appendChild(o)}})),V.on(e.EventName.FOCUS,(n=>{A("onFocus",n,null==c?void 0:c.cvvEvents)})));const W={cvv:{element:V,container:`#${r.cvv}${n}`}};return yield x(W),{container:G,elements:{cvvElement:V}}}))}(c,r,d,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,P,"f")),setTimeout((()=>{const n=document.querySelector(`#cvvContainer${c}`);n&&n.classList.add("show")}),5)),l(this,I,"m",k).call(this,c)}catch(n){console.error("Ha ocurrido un error",n)}yield l(this,I,"m",U).call(this,p,null,t)}))},k=function(n=""){var e,t,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===(t=null===(e=this.customization)\|\|void 0===e?void 0:e.paymentButton)\|\|void 0===t?void 0:t.text} ${(null===(o=this.customization.paymentButton)\|\|void 0===o?void 0:o.showAmount)?`$${c}`:""}`,document.querySelectorAll(".ac-option-panel-container").forEach((n=>{n.classList.remove("show")})),d&&d.classList.add("show"),r.onclick=n=>i(this,void 0,void 0,(function(){n.preventDefault(),yield l(this,I,"m",M).call(this)}))},M=function(){return i(this,void 0,void 0,(function(){try{yield this.payment({})}catch(n){console.error("Payment error:",n)}}))},T=function(){if(!this.renderSaveCardButton)return;const n=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);n?(n.style.display="block",n.textContent="Guardar",n.onclick=e=>i(this,void 0,void 0,(function(){e.preventDefault(),yield l(this,I,"m",j).call(this,n)}))):console.error("Save button not found")},j=function(n){return i(this,void 0,void 0,(function(){const e=n.innerHTML;n.innerHTML='<div class="lds-dual-ring"></div>';try{const n=yield this.saveCard();this.callBack({message:n})}catch(n){console.error("Save card error:",n)}finally{n.innerHTML=e}}))},R=function(n){var e,t,o;try{const i=(null==n?void 0:n.cardId)&&"new"!==(null==n?void 0:n.cardId)?`#${this.collectorIds.tonderPayButton}${n.cardId}`:`#${this.collectorIds.tonderPayButton}`,l=(null==n?void 0:n.updatedTextContent)\|\|!0,a=(null==n?void 0:n.textContent)\|\|`${null===(t=null===(e=this.customization)\|\|void 0===e?void 0:e.paymentButton)\|\|void 0===t?void 0:t.text} ${(null===(o=this.customization.paymentButton)\|\|void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,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)}},$=function(n=""){const e=document.getElementsByName("card_selected");for(const n of e)n.style.display="block",n.onclick=t=>i(this,void 0,void 0,(function(){const t=n.classList[0],o=Array.from(e).indexOf(n);yield l(this,I,"m",U).call(this,n,o,t)}));const t=document.getElementsByClassName("card-delete-button");for(const e of t)e.addEventListener("click",(t=>i(this,void 0,void 0,(function(){t.preventDefault(),t.stopImmediatePropagation(),yield l(this,I,"m",D).call(this,n,e)}))),!1)},D=function(n,e){return i(this,void 0,void 0,(function(){var t,o;const i=e.attributes.getNamedItem("id"),a=null===(o=null===(t=null==i?void 0:i.value)\|\|void 0===t?void 0:t.split("_"))\|\|void 0===o?void 0:o[2];if(a){const e=document.querySelector(`#card_container-${a}`);e&&(e.style.display="none");try{this.deletingCards.push(a),this.abortRefreshCardsController&&(this.abortRefreshCardsController.abort(),this.abortRefreshCardsController=new AbortController),yield this._removeCustomerCard(n,this.merchantData.business.pk,a)}catch(n){}finally{this.deletingCards=this.deletingCards.filter((n=>n!==a)),yield l(this,I,"m",z).call(this,n)}}}))},z=function(n){return i(this,void 0,void 0,(function(){this.deletingCards.length>0\|\|(this.cardsInjected=!1,yield l(this,I,"m",L).call(this,n))}))},U=function(n){return i(this,arguments,void 0,(function(n,e=null,t=""){var o,i;if(n.id===this.radioChecked\|\|"new"===n.id&&void 0===this.radioChecked)return;const a=document.querySelector(".container-form");a&&(a.style.display="new"===n.id?"block":"none"),"new"===n.id?(l(this,I,"m",N).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,I,"m",_).call(this,"",null,!0),this.radioChecked!==n.id&&(yield l(this,I,"m",V).call(this),l(this,I,"m",k).call(this))):(l(this,I,"m",_).call(this,t,null,!1,!0),null!==e&&l(this,I,"m",_).call(this,t,e,!0),l(this,I,"m",G).call(this)),this.radioChecked=n.id}))},F=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,I,"m",Y).call(this,n.results))}catch(n){console.warn("Error getting APMS")}}))},Y=function(n){if(this.apmsInjected)return;const e=setInterval((()=>{const t=document.querySelector(`#${this.collectorIds.apmsListContainer}`);t&&this.injected&&(t.innerHTML=y({apms:n,collectorIds:this.collectorIds,renderPaymentButton:this.renderPaymentButton,customization:this.customization}),clearInterval(e),l(this,I,"m",O).call(this,"paymentMethods"),l(this,I,"m",$).call(this),this.apmsInjected=!0)}),500)},H=function(){return i(this,void 0,void 0,(function(){this.isEnrollmentCard?l(this,I,"m",T).call(this):l(this,I,"m",k).call(this),yield this._initializeCheckout();const{vault_id:n,vault_url:e}=this.merchantData;if(n){if(this.customer.email&&!this.isEnrollmentCard){const n=yield this._getCustomer();if("auth_token"in n){const{auth_token:e}=n;yield l(this,I,"m",L).call(this,e)}}this.isEnrollmentCard\|\|(yield l(this,I,"m",F).call(this)),this.collectContainer=yield g(n,e,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,P,"f"))}}))},G=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:e}=this.merchantData;n&&(this.collectContainer=yield g(n,e,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,l(this,P,"f")))}))},W=function(n){return i(this,arguments,void 0,(function(n,e=null){var t,o;try{const n=e&&"new"!==e?null===(t=this.updateCollectContainer)\|\|void 0===t?void 0:t.container:null===(o=this.collectContainer)\|\|void 0===o?void 0:o.container;if(n&&"collect"in n){const e=yield n.collect();return yield e.records[0].fields}d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError)}catch(n){throw d("Por favor, verifica todos los campos de tu tarjeta",this.radioChecked,this.collectorIds.msgError),n}}))},X=function(){return i(this,arguments,void 0,(function(n=!1,e="Guardar"){try{const t=document.querySelector(`#${this.collectorIds.tonderSaveCardButton}`);t&&(t.disabled=n,t.innerHTML=e)}catch(n){}}))},q=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,I,"m",W).call(this,this.collectorIds.tonderSaveCardButton),e=yield this._getCustomer();if("auth_token"in e&&this.secureToken){const{auth_token:t}=e;yield this._saveCustomerCard(t,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}}))},K=function(n,e,t){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,e,t),this.cardsInjected=!1,yield l(this,I,"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{J as InlineCheckout};
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,a){function l(n){try{s(o.next(n))}catch(n){a(n)}}function r(n){try{s(o.throw(n))}catch(n){a(n)}}function s(n){var t;n.done?i(n.value):(t=n.value,t instanceof e?t:new e((function(n){n(t)}))).then(l,r)}s((o=o.apply(n,t\|\|[])).next())}))}function a(n,t,e,o){if("a"===e&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?n!==t\|\|!o:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?o:"a"===e?o.call(n):o?o.value:t.get(n)}function l(n,t,e,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?n!==t\|\|!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,e):i?i.value=e:t.set(n,e),e}var r;"function"==typeof SuppressedError&&SuppressedError,function(n){n.SORIANA="SORIANA",n.OXXO="OXXO",n.SPEI="SPEI",n.CODI="CODI",n.OXXOPAY="OXXOPAY",n.MERCADOPAGO="MERCADOPAGO",n.PAYPAL="PAYPAL",n.COMERCIALMEXICANA="COMERCIALMEXICANA",n.BANCOMER="BANCOMER",n.WALMART="WALMART",n.BODEGA="BODEGA",n.SAMSCLUB="SAMSCLUB",n.SUPERAMA="SUPERAMA",n.CALIMAX="CALIMAX",n.EXTRA="EXTRA",n.CIRCULOK="CIRCULOK",n.SEVEN11="7ELEVEN",n.TELECOMM="TELECOMM",n.BANORTE="BANORTE",n.BENAVIDES="BENAVIDES",n.DELAHORRO="DELAHORRO",n.ELASTURIANO="ELASTURIANO",n.WALDOS="WALDOS",n.ALSUPER="ALSUPER",n.KIOSKO="KIOSKO",n.STAMARIA="STAMARIA",n.LAMASBARATA="LAMASBARATA",n.FARMROMA="FARMROMA",n.FARMUNION="FARMUNION",n.FARMATODO="FARMATODO",n.SFDEASIS="SFDEASIS",n.FARM911="FARM911",n.FARMECONOMICAS="FARMECONOMICAS",n.FARMMEDICITY="FARMMEDICITY",n.RIANXEIRA="RIANXEIRA",n.WESTERNUNION="WESTERNUNION",n.ZONAPAGO="ZONAPAGO",n.CAJALOSANDES="CAJALOSANDES",n.CAJAPAITA="CAJAPAITA",n.CAJASANTA="CAJASANTA",n.CAJASULLANA="CAJASULLANA",n.CAJATRUJILLO="CAJATRUJILLO",n.EDPYME="EDPYME",n.KASNET="KASNET",n.NORANDINO="NORANDINO",n.QAPAQ="QAPAQ",n.RAIZ="RAIZ",n.PAYSER="PAYSER",n.WUNION="WUNION",n.BANCOCONTINENTAL="BANCOCONTINENTAL",n.GMONEY="GMONEY",n.GOPAY="GOPAY",n.WU="WU",n.PUNTOSHEY="PUNTOSHEY",n.AMPM="AMPM",n.JUMBOMARKET="JUMBOMARKET",n.SMELPUEBLO="SMELPUEBLO",n.BAM="BAM",n.REFACIL="REFACIL",n.ACYVALORES="ACYVALORES"}(r\|\|(r={}));const s={inputStyles:{base:{border:"1px solid #e0e0e0",padding:"10px 7px",borderRadius:"5px",color:"#1d1d1d",marginTop:"2px",backgroundColor:"white",fontFamily:'"Inter", sans-serif',fontSize:"16px","&::placeholder":{color:"#ccc"}},cardIcon:{position:"absolute",left:"6px",bottom:"calc(50% - 12px)"},complete:{color:"#4caf50"},empty:{},focus:{},invalid:{border:"1px solid #f44336"},global:{"@import":'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")'}},labelStyles:{base:{fontSize:"12px",fontWeight:"500",fontFamily:'"Inter", sans-serif'}},errorTextStyles:{base:{fontSize:"12px",fontWeight:"500",color:"#f44336",fontFamily:'"Inter", sans-serif'}},labels:{nameLabel:"Titular de la tarjeta",cardLabel:"Número de tarjeta",cvvLabel:"CVC/CVV",expiryDateLabel:"Fecha de expiración"},placeholders:{namePlaceholder:"Nombre como aparece en la tarjeta",cardPlaceholder:"1234 1234 1234 1234",cvvPlaceholder:"3-4 dígitos",expiryMonthPlaceholder:"MM",expiryYearPlaceholder:"AA"}};function d(n,t=null,e="msgError",o="msgErrorText"){try{const i=t&&"new"!==t;let a=document.getElementById(`${e}${i?t:""}`),l=document.getElementById(`${o}${i?t:""}`);l.innerHTML="",l.innerHTML=n,a.style.display="flex",setTimeout((function(){a.style.display="none",l.innerHTML=""}),3e4)}catch(n){console.warn("Error showing message error",n)}}function c(n,t=null,e="msgNotification",o="msgNotificationText"){try{const i=t&&"new"!==t,a=document.getElementById(`${e}${i?t:""}`);if(a){let e=document.getElementById(`${o}${i?t:""}`);a.style.display="flex",e.innerHTML="",e.innerHTML=n,setTimeout((function(){a.style.display="none",e.innerHTML=""}),3e4)}}catch(n){console.error("Error showing message",n)}}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,a,l,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,an,ln,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===(l=null===(a=n.customization)\|\|void 0===a?void 0:a.paymentButton)\|\|void 0===l?void 0:l.text})}\n </div>\n ${n.isEnrollmentCard?"":'\n <div id="apmsListContainer" class="apms-list-container"></div>\n '}\n \n <iframe class="tds-iframe" allowtransparency="true" id="${n.collectorIds.tdsIframe}"></iframe>\n</div>\n\n<style>\n\n@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n\n.tds-iframe {\n border: none;\n width: 100vw;\n height: 100vh;\n z-index: 30;\n background-color: transparent;\n}\n\n.error-custom-inputs-tonder {\n background-color: white;\n position: absolute;\n left: 0px;\n bottom: -1px;\n width: 100%;\n font-size: 12px;\n color: red;\n font-family: "Inter", sans-serif !important;\n}\n\n.container-form {\n padding: 25px 30px 0px 30px;\n}\n\n#${n.collectorIds.tdsIframe} {\n display: none;\n position: fixed;\n width: 100vw;\n height: 100vh;\n inset: 0px;\n}\n\n.expiration-year .error-custom-inputs-tonder {\n background-color: white;\n position: absolute;\n left: 0px;\n bottom: 3px;\n width: 100%;\n font-size: 12px;\n color: red;\n font-family: "Inter", sans-serif !important;\n}\n\n.container-tonder {\n background-color: #F9F9F9;\n margin: 0 auto !important;\n padding: 30px 0px 30px 0px;\n overflow: hidden;\n transition: max-height 0.5s ease-out;\n max-width: 600px;\n border: solid 1px #e3e3e3;\n}\n\n.container-pay-button{\n padding-top: ${n.renderPaymentButton?"10px":""};\n padding-bottom: ${n.renderPaymentButton?"10px":""};\n position: relative;\n}\n\n.collect-row {\n display: flex !important;\n justify-content: space-between !important;\n width: 100% !important;\n gap: 16px;\n}\n\n.collect-row > :first-child {\n min-width: 120px; !important\n}\n\n.expiration-year {\n position: relative !important;\n padding-top: 24px !important;\n max-height: 85px;\n}\n\n.empty-div {\n position: relative !important;\n margin-top: 2px;\n margin-bottom: 4px;\n max-height: 85px;\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===(ln=null===(an=null==n?void 0:n.customStyles)\|\|void 0===an?void 0:an.labelStyles)\|\|void 0===ln?void 0:ln.base)\|\|void 0===rn?void 0:rn.fontFamily)?null===(cn=null===(dn=null===(sn=null==n?void 0:n.customStyles)\|\|void 0===sn?void 0:sn.labelStyles)\|\|void 0===dn?void 0:dn.base)\|\|void 0===cn?void 0:cn.fontFamily:s.labelStyles.base.fontFamily};\n font-weight: ${(null===(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,a;const{cvvLabel:l}=(r=t.customStyles,{labels:{nameLabel:n(r,"labels.nameLabel",s.labels.nameLabel),cardLabel:n(r,"labels.cardLabel",s.labels.cardLabel),cvvLabel:n(r,"labels.cvvLabel",s.labels.cvvLabel),expiryDateLabel:n(r,"labels.expiryDateLabel",s.labels.expiryDateLabel)},placeholders:{namePlaceholder:n(r,"placeholders.namePlaceholder",s.placeholders.namePlaceholder),cardPlaceholder:n(r,"placeholders.cardPlaceholder",s.placeholders.cardPlaceholder),cvvPlaceholder:n(r,"placeholders.cvvPlaceholder",s.placeholders.cvvPlaceholder),expiryMonthPlaceholder:n(r,"placeholders.expiryMonthPlaceholder",s.placeholders.expiryMonthPlaceholder),expiryYearPlaceholder:n(r,"placeholders.expiryYearPlaceholder",s.placeholders.expiryYearPlaceholder)}}).labels;var r;return`${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">${l}</label>\n <div id="${t.collectorIds.cvv}${o.skyflow_id}" class="empty-div">\n <div class="tndr-simulate-input-cvv-container">\n <div class="tndr-simulate-input-cvv">\n <svg class="cvvIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="24" viewBox="0 0 270 178">\n <defs>\n <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n <stop offset="0" stop-color="#386bbf"/>\n <stop offset="1" stop-color="#032ea3"/>\n </linearGradient>\n <linearGradient id="linear-gradient-2" x1="0.5" y1="0.115" x2="0.5" y2="1" gradientUnits="objectBoundingBox">\n <stop offset="0" stop-color="#1c1c1c"/>\n <stop offset="1" stop-color="#151515"/>\n </linearGradient>\n </defs>\n <g id="Grupo_3" data-name="Grupo 3" transform="translate(-69 -312)">\n <g id="Grupo_2" data-name="Grupo 2">\n <rect id="Rectángulo_58" data-name="Rectángulo 58" width="253" height="165" rx="25" transform="translate(69 312)" fill="url(#linear-gradient)"/>\n <rect id="Rectángulo_61" data-name="Rectángulo 61" width="68" height="8" rx="4" transform="translate(86 437)" fill="#fff" opacity="0.877"/>\n <rect id="Rectángulo_66" data-name="Rectángulo 66" width="253" height="24" transform="translate(69 347)" fill="url(#linear-gradient-2)"/>\n <g id="Elipse_4" data-name="Elipse 4" transform="translate(221 374)" fill="#fff" stroke="#191919" stroke-width="1">\n <ellipse cx="59" cy="58" rx="59" ry="58" stroke="none"/>\n <ellipse cx="59" cy="58" rx="58.5" ry="57.5" fill="none"/>\n </g>\n </g>\n <text id="_123" data-name="123" transform="translate(240 448)" font-size="45" font-family="Menlo-Regular, Menlo"><tspan x="0" y="0">123</tspan></text>\n </g>\n </svg>\n <input tabindex="-1"/>\n </div>\n </div>\n \n </div>\n </div>\n ${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===(a=null===(i=t.customization)\|\|void 0===i?void 0:i.paymentButton)\|\|void 0===a?void 0:a.text})}\n </div>\n </div>\n </div>`}),"")}\n </div>\n ${`\n <style>\n @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");\n .ac {\n border: none;\n background-color: transparent;\n box-sizing: border-box;\n margin-bottom: 0;\n border-bottom: 1px solid #e2e8f0;\n }\n .ac-option-panel-container{\n padding: ${(null==t?void 0:t.renderPaymentButton)?"20px 32px 0px 32px":"20px 32px 20px 32px"};\n }\n .cvvContainer{\n max-width: 60%; \n 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 a=(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="${a.icon}" />\n </div>\n <div class="apm-name">${a.label}</div>\n </label>\n </div>\n <div class="ac-panel">\n <div class="ac-option-panel-container tndr-pm-item-container" id="acContainer${e.pk}">\n ${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,a){return i(this,arguments,void 0,(function(n,e,o,i,a={},l,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(a).length?s:Object.assign(Object.assign({},a),{labels:{nameLabel:(null===(c=null==a?void 0:a.labels)\|\|void 0===c?void 0:c.nameLabel)&&""!==(null===(p=null==a?void 0:a.labels)\|\|void 0===p?void 0:p.nameLabel)?null===(u=null==a?void 0:a.labels)\|\|void 0===u?void 0:u.nameLabel:s.labels.nameLabel,cardLabel:(null===(m=null==a?void 0:a.labels)\|\|void 0===m?void 0:m.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:s.labels.cardLabel,cvvLabel:(null===(y=null==a?void 0:a.labels)\|\|void 0===y?void 0:y.cvvLabel)&&""!==(null===(b=null==a?void 0:a.labels)\|\|void 0===b?void 0:b.cvvLabel)?null===(g=null==a?void 0:a.labels)\|\|void 0===g?void 0:g.cvvLabel:s.labels.cvvLabel,expiryDateLabel:(null===(C=null==a?void 0:a.labels)\|\|void 0===C?void 0:C.expiryDateLabel)&&""!==(null===(I=null==a?void 0:a.labels)\|\|void 0===I?void 0:I.expiryDateLabel)?null===(S=null==a?void 0:a.labels)\|\|void 0===S?void 0:S.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{namePlaceholder:(null===(w=null==a?void 0:a.placeholders)\|\|void 0===w?void 0:w.namePlaceholder)&&""!==(null===(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:s.placeholders.namePlaceholder,cardPlaceholder:(null===(_=null==a?void 0:a.placeholders)\|\|void 0===_?void 0:_.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:s.placeholders.cardPlaceholder,cvvPlaceholder:(null===(M=null==a?void 0:a.placeholders)\|\|void 0===M?void 0:M.cvvPlaceholder)&&""!==(null===(j=null==a?void 0:a.placeholders)\|\|void 0===j?void 0:j.cvvPlaceholder)?null===(N=null==a?void 0:a.placeholders)\|\|void 0===N?void 0:N.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(T=null==a?void 0:a.placeholders)\|\|void 0===T?void 0:T.expiryMonthPlaceholder)&&""!==(null===(B=null==a?void 0:a.placeholders)\|\|void 0===B?void 0:B.expiryMonthPlaceholder)?null===(R=null==a?void 0:a.placeholders)\|\|void 0===R?void 0:R.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===($=null==a?void 0:a.placeholders)\|\|void 0===$?void 0:$.expiryYearPlaceholder)&&""!==(null===(D=null==a?void 0:a.placeholders)\|\|void 0===D?void 0:D.expiryYearPlaceholder)?null===(z=null==a?void 0:a.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 an=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:an,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.cvvEvents});const ln=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_month"},Q),{label:null===(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:ln,errorStyles:null==Q?void 0:Q.errorTextStyles,fieldMessage:"",events:null==d?void 0:d.monthEvents});const rn=Z.create(Object.assign(Object.assign({table:"cards",column:"expiration_year"},Q),{label:"",placeholder:null===(J=Q.placeholders)\|\|void 0===J?void 0:J.expiryYearPlaceholder,type:t.ElementType.EXPIRATION_YEAR,validations:[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:`#${l.cardNumber}`},cvv:{element:an,container:`#${l.cvv}`},expiryMonth:{element:ln,container:`#${l.expirationMonth}`},expiryYear:{element:rn,container:`#${l.expirationYear}`},cardHolderName:{element:en,container:`#${l.holderName}`}};return yield x(sn),{container:Z,elements:{cardHolderNameElement:en,cardNumberElement:on,cvvElement:an,expiryMonthElement:ln,expiryYearElement:rn}}}))}function f(n,e,o,a,l){return i(this,void 0,void 0,(function(){return t.init({vaultID:n,vaultURL:e,getBearerToken:()=>i(this,void 0,void 0,(function(){const n=yield fetch(`${o}/api/v1/vault-token/`,{method:"GET",headers:{Authorization:`Token ${a}`},signal:l});if(n.ok){return(yield n.json()).token}throw new Error("Failed to retrieve bearer token")})),options:{logLevel:t.LogLevel.ERROR,env:t.Env.DEV}})}))}function 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:a="Campo requerido",invalidMessage:l="Campo no válido",events:r}=n;"on"in e&&(e.on(t.EventName.CHANGE,(n=>{S({eventName:"onChange",data:n,events:r}),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?a:""!=o?`El campo ${o} no es válido`:l;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,l(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({},a(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=a(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 a(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 a(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 a(this,w,"m",q).call(this,!0,"Guardando..."),yield a(this,w,"m",J).call(this),n("Tarjeta registrada con éxito")}catch(n){t(n)}finally{yield a(this,w,"m",q).call(this)}}))))}))}_setCartTotal(n){this.cartTotal=n,a(this,w,"m",D).call(this)}setCartTotal(n){this.cartTotal=n,a(this,w,"m",D).call(this)}_checkout(){return i(this,void 0,void 0,(function(){try{if(a(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 a(this,w,"m",K).call(this,this.collectorIds.tonderPayButton,this.radioChecked):(yield a(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 a(this,w,"m",Z).call(this,o,n.pk,t));const i=this.apmsData?this.apmsData.find((n=>n.pk===this.radioChecked)):null,l=yield this._handleCheckout(Object.assign(Object.assign({},i&&Object.keys(i).length>0?{payment_method:i.payment_method}:{card:t}),{customer:e}));return a(this,w,"m",D).call(this,{cardId:this.radioChecked,disabled:!1}),l\|\|(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{a(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);l(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),a(this,w,"m",k).call(this),a(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 a(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:l})=>{i&&(e&&"closeAll"in i&&i.closeAll(),o&&l!==n&&i.closeAll&&i.closeAll(),null!==t&&l===n&&i.open&&i.open("paymentMethods"!==l?t:t-(a(this,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,l;const{vault_id:r,vault_url:d}=this.merchantData,c=n.id.replace("option_container-","");this.updateCollectContainer&&"unmount"in(null===(l=null===(o=this.updateCollectContainer)\|\|void 0===o?void 0:o.elements)\|\|void 0===l?void 0:l.cvvElement)&&this.updateCollectContainer.elements.cvvElement.unmount(),a(this,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,a,l){return i(this,arguments,void 0,(function(n,e,o,i,a,l={},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,a);var H=0===Object.keys(l).length?s:Object.assign(Object.assign({},l),{labels:{nameLabel:(null===(p=null==l?void 0:l.labels)\|\|void 0===p?void 0:p.nameLabel)&&""!==(null===(u=null==l?void 0:l.labels)\|\|void 0===u?void 0:u.nameLabel)?null===(m=null==l?void 0:l.labels)\|\|void 0===m?void 0:m.nameLabel:s.labels.nameLabel,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)?null===(y=null==l?void 0:l.labels)\|\|void 0===y?void 0:y.cardLabel:s.labels.cardLabel,cvvLabel:(null===(b=null==l?void 0:l.labels)\|\|void 0===b?void 0:b.cvvLabel)&&""!==(null===(g=null==l?void 0:l.labels)\|\|void 0===g?void 0:g.cvvLabel)?null===(C=null==l?void 0:l.labels)\|\|void 0===C?void 0:C.cvvLabel:s.labels.cvvLabel,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)?null===(w=null==l?void 0:l.labels)\|\|void 0===w?void 0:w.expiryDateLabel:s.labels.expiryDateLabel},placeholders:{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)?null===(_=null==l?void 0:l.placeholders)\|\|void 0===_?void 0:_.namePlaceholder:s.placeholders.namePlaceholder,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)?null===(M=null==l?void 0:l.placeholders)\|\|void 0===M?void 0:M.cardPlaceholder:s.placeholders.cardPlaceholder,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)?null===(T=null==l?void 0:l.placeholders)\|\|void 0===T?void 0:T.cvvPlaceholder:s.placeholders.cvvPlaceholder,expiryMonthPlaceholder:(null===(B=null==l?void 0:l.placeholders)\|\|void 0===B?void 0:B.expiryMonthPlaceholder)&&""!==(null===(R=null==l?void 0:l.placeholders)\|\|void 0===R?void 0:R.expiryMonthPlaceholder)?null===($=null==l?void 0:l.placeholders)\|\|void 0===$?void 0:$.expiryMonthPlaceholder:s.placeholders.expiryMonthPlaceholder,expiryYearPlaceholder:(null===(D=null==l?void 0:l.placeholders)\|\|void 0===D?void 0:D.expiryYearPlaceholder)&&""!==(null===(z=null==l?void 0:l.placeholders)\|\|void 0===z?void 0:z.expiryYearPlaceholder)?null===(U=null==l?void 0:l.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,a(this,_,"f")),setTimeout((()=>{const n=document.querySelector(`#cvvContainer${c}`);n&&n.classList.add("show")}),5)),a(this,w,"m",T).call(this,c)}catch(n){console.error("Ha ocurrido un error",n)}yield a(this,w,"m",Y).call(this,p,null,e)}))},T=function(n=""){var t,e,o;if(!this.renderPaymentButton)return;const l=`#${this.collectorIds.tonderPayButton}${n}`;let r=document.querySelector(l);r\|\|(r=document.querySelector(`#${this.collectorIds.tonderPayButton}`));const s=`#acContainer${n}`,d=document.querySelector(s);if(!r)return void console.error("Pay button not found");if(""!==n){const n=document.querySelector(`#${this.collectorIds.tonderPayButton}`);n&&(n.style.display="none")}r.style.display="block";const c=Intl.NumberFormat("en-Latn-US",{minimumFractionDigits:2}).format(Number(this.cartTotal\|\|0));r.textContent=`${null===(e=null===(t=this.customization)\|\|void 0===t?void 0:t.paymentButton)\|\|void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)\|\|void 0===o?void 0:o.showAmount)?`$${c}`:""}`,document.querySelectorAll(".ac-option-panel-container").forEach((n=>{n.classList.remove("show")})),d&&d.classList.add("show"),r.onclick=n=>i(this,void 0,void 0,(function(){n.preventDefault(),yield a(this,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 a(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}`,a=(null==n?void 0:n.updatedTextContent)\|\|!0,l=(null==n?void 0:n.textContent)\|\|`${null===(e=null===(t=this.customization)\|\|void 0===t?void 0:t.paymentButton)\|\|void 0===e?void 0:e.text} ${(null===(o=this.customization.paymentButton)\|\|void 0===o?void 0:o.showAmount)?`$${this.cartTotal}`:""}`,r=null==n?void 0:n.disabled,s=document.querySelector(i);if(!s)return;a&&(s.textContent=l),void 0!==r&&"disabled"in s&&(s.disabled=r)}catch(n){console.error("Pay button not found due to update",n)}},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 a(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 a(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"),l=null===(o=null===(e=null==i?void 0:i.value)\|\|void 0===e?void 0:e.split("_"))\|\|void 0===o?void 0:o[2];if(l){const t=document.querySelector(`#card_container-${l}`);t&&(t.style.display="none");try{this.deletingCards.push(l),this.abortRefreshCardsController&&(this.abortRefreshCardsController.abort(),this.abortRefreshCardsController=new AbortController),yield this._removeCustomerCard(n,this.merchantData.business.pk,l)}catch(n){}finally{this.deletingCards=this.deletingCards.filter((n=>n!==l)),yield a(this,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 a(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 l=document.querySelector(".container-form");l&&(l.style.display="new"===n.id?"block":"none"),"new"===n.id?(a(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(),a(this,w,"m",M).call(this,"",null,!0),this.radioChecked!==n.id&&(yield a(this,w,"m",V).call(this),a(this,w,"m",T).call(this))):(a(this,w,"m",M).call(this,e,null,!1,!0),null!==t&&a(this,w,"m",M).call(this,e,t,!0),a(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,a(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),a(this,w,"m",k).call(this,"paymentMethods"),a(this,w,"m",z).call(this),this.apmsInjected=!0)}),500)},W=function(){return i(this,void 0,void 0,(function(){this.isEnrollmentCard?a(this,w,"m",R).call(this):a(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 a(this,w,"m",L).call(this,t)}}this.isEnrollmentCard\|\|(yield a(this,w,"m",H).call(this)),this.collectContainer=yield g(n,t,this.baseUrl,this.abortController.signal,this.customStyles,this.collectorIds,this.apiKeyTonder,a(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,a(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 a(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 a(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};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.57",
+    "@tonder.io/ionic-lite-sdk": "0.0.58",
     "accordion-js": "^3.4.0",
     "crypto-js": "^4.1.1",
     "lodash.get": "^4.4.2",
-    "skyflow-js": "^1.34.1"
+    "skyflow-js": "2.4.4"
   },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",

package/src/classes/inlineCheckout.ts CHANGED Viewed

@@ -42,7 +42,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
   #customizationBase: IInlineCustomizationOptions = {
     paymentButton: {
       show: false,
-      text: "Pagars",
+      text: "Pagar",
       showAmount: true,
     },
   }
@@ -165,15 +165,6 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
       subtree: true,
       attributeFilter: ['id']
     });
-    // const injectInterval = setInterval(async() => {
-    //   const queryElement = document.querySelector(`#${this.containerId}`)
-    //   if (queryElement) {
-    //     queryElement.innerHTML = cardTemplate(!!this.customStyles, this.collectorIds, this.isEnrollmentCard, { renderPaymentButton: this.renderPaymentButton, customization: this.customization })
-    //     await this.#mountTonder();
-    //     clearInterval(injectInterval);
-    //     this.injected = true
-    //   }
-    // }, 500);
   }
   public removeCheckout() {

package/src/helpers/skyflow.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element"
 import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
 import {IEvents, IInputEvents, InCollectorContainer} from "../types/commons";
 import get from "lodash.get";
+import { StylesBaseVariant } from "@tonder.io/ionic-lite-sdk/dist/types/commons";
 export async function initSkyflow(
   vaultId: string,
@@ -72,47 +73,14 @@ export async function initSkyflow(
     type: Skyflow.ElementType.CARDHOLDER_NAME,
     validations: [lengthMatchRule, regexMatchRule],
   });
+          handleSkyflowElementEvents({
+          element: cardHolderNameElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: collectStylesOptions?.labels?.nameLabel,
+          events: events?.cardHolderEvents,
+        });
-  if ("on" in cardHolderNameElement) {
-    cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.cardHolderEvents)
-      let element = document.getElementById("errorCardHolderIdTonder");
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.cardHolderEvents)
-      let tonderContainer = document.getElementById(collectorIds.holderName);
-      let element = document.getElementById("errorCardHolderIdTonder");
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorCardHolderIdTonder";
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo titular de la tarjeta es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    cardHolderNameElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.cardHolderEvents)
-    });
-  }
-  // Create collect elements.
   const cardNumberElement: CollectElement | RevealElement | ComposableElement =
     collectContainer.create({
       table: "cards",
@@ -128,43 +96,12 @@ export async function initSkyflow(
       validations: [regexMatchRule],
     });
-  if ("on" in cardNumberElement) {
-    cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.cardNumberEvents)
-      let element = document.getElementById("errorCardNumberIdTonder");
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    cardNumberElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.cardNumberEvents)
-      let tonderContainer = document.getElementById(collectorIds.cardNumber);
-      let element = document.getElementById("errorCardNumberIdTonder");
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorCardNumberIdTonder";
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo número de tarjeta es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    cardNumberElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.cardNumberEvents)
-    });
-  }
+          handleSkyflowElementEvents({
+          element: cardNumberElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: collectStylesOptions?.labels?.cardLabel,
+          events: events?.cardNumberEvents,
+        });
   const cvvElement: CollectElement | RevealElement | ComposableElement =
     collectContainer.create({
@@ -176,42 +113,12 @@ export async function initSkyflow(
       type: Skyflow.ElementType.CVV,
       validations: [regexMatchRule],
     });
-  if ("on" in cvvElement) {
-    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.cvvEvents)
-      let element = document.getElementById("errorCvvIdTonder");
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.cvvEvents)
-      let tonderContainer = document.getElementById(collectorIds.cvv);
-      let element = document.getElementById("errorCvvIdTonder");
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorCvvIdTonder";
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    cvvElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.cvvEvents)
-    });
-  }
+   handleSkyflowElementEvents({
+          element: cvvElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: "",
+          events: events?.cvvEvents,
+        });
   const expiryMonthElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
       table: "cards",
@@ -223,43 +130,12 @@ export async function initSkyflow(
       validations: [regexMatchRule],
     });
-  if ("on" in expiryMonthElement) {
-    expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.monthEvents)
-      let element = document.getElementById("errorExpiryMonthIdTonder");
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.monthEvents)
-      let tonderContainer = document.getElementById(
-        collectorIds.expirationMonth,
-      );
-      let element = document.getElementById("errorExpiryMonthIdTonder");
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorExpiryMonthIdTonder";
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    expiryMonthElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.monthEvents)
-    });
-  }
+   handleSkyflowElementEvents({
+          element: expiryMonthElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: "",
+          events: events?.monthEvents,
+        });
   const expiryYearElement: CollectElement | RevealElement | ComposableElement = collectContainer.create({
       table: "cards",
@@ -271,43 +147,12 @@ export async function initSkyflow(
       validations: [regexMatchRule],
     });
-  if ("on" in expiryYearElement) {
-    expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.yearEvents)
-      let element = document.getElementById("errorExpiryYearIdTonder");
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.yearEvents)
-      let tonderContainer = document.getElementById(
-        collectorIds.expirationYear,
-      );
-      let element = document.getElementById("errorExpiryYearIdTonder");
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorExpiryYearIdTonder";
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    expiryYearElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.yearEvents)
-    });
-  }
+   handleSkyflowElementEvents({
+          element: expiryYearElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: "",
+          events: events?.yearEvents,
+        });
   const elementsConfig = {
     cardNumber: {
@@ -399,43 +244,12 @@ export async function initUpdateSkyflow(
       skyflowID: skyflowId,
     });
-  if ("on" in cvvElement) {
-    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
-      executeEvent( "onChange", state, events?.cvvEvents)
-      let element = document.getElementById(`errorCvvIdTonder${skyflowId}`);
-      if (element && state.isValid && !state.isEmpty) {
-        element.remove();
-      }
-    });
-    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
-      executeEvent( "onBlur", state, events?.cvvEvents)
-      let tonderContainer = document.getElementById(
-        collectorIds.cvv + skyflowId,
-      );
-      let element = document.getElementById("errorCvvIdTonder" + skyflowId);
-      if (element) {
-        element.remove();
-      }
-      if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder-cards");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = "errorCvvIdTonder" + skyflowId;
-        errorLabel.textContent = state.isEmpty
-          ? "El campo es requerido"
-          : "El campo es inválido";
-        tonderContainer?.appendChild(errorLabel);
-      }
-    });
-    cvvElement.on(Skyflow.EventName.FOCUS, (state: any) => {
-      executeEvent( "onFocus", state, events?.cvvEvents)
-    });
-  }
+   handleSkyflowElementEvents({
+          element: cvvElement,
+          errorStyles: collectStylesOptions?.errorTextStyles,
+          fieldMessage: "",
+          events: events?.cvvEvents,
+        });
   const elementsConfig = {
     cvv: {
@@ -512,19 +326,100 @@ const regexMatchRule = {
   type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
   params: {
     regex: regexEmpty,
-    error: "El campo es requerido",
+    error: "Campo requerido",
   },
 };
-const executeEvent = (eventName: "onChange" | "onBlur" | "onFocus", data: any, events?: IInputEvents, ) => {
-  if (events && eventName in events){
+function handleSkyflowElementEvents(event: {
+  element: CollectElement;
+  fieldMessage?: string;
+  errorStyles?: StylesBaseVariant;
+  requiredMessage?: string;
+  invalidMessage?: string;
+  events?: IInputEvents;
+}) {
+  const {
+    element,
+    fieldMessage = "",
+    errorStyles = {},
+    requiredMessage = "Campo requerido",
+    invalidMessage = "Campo no válido",
+    events
+  } = event;
+  if ("on" in element) {
+    element.on(Skyflow.EventName.CHANGE, (state: any) => {
+      executeEvent({eventName: "onChange", data: state, events});
+      updateErrorLabel({
+        element,
+        errorStyles,
+        color: "transparent",
+      });
+    });
+    element.on(Skyflow.EventName.BLUR, (state: any) => {
+      executeEvent({eventName: "onBlur", data: state, events});
+      if (!state.isValid) {
+        const msj_error = state.isEmpty
+          ? requiredMessage
+          : fieldMessage != ""
+            ? `El campo ${fieldMessage} no es válido`
+            : invalidMessage;
+        element.setError(msj_error);
+      }
+      updateErrorLabel({
+        element,
+        errorStyles,
+      });
+    });
+    element.on(Skyflow.EventName.FOCUS, (state: any) => {
+      executeEvent({eventName: "onFocus", data: state, events});
+      updateErrorLabel({
+        element,
+        errorStyles,
+        color: "transparent",
+      });
+      element.resetError();
+    });
+  }
+}
+function updateErrorLabel(event: {
+  element: CollectElement;
+  errorStyles?: StylesBaseVariant;
+  color?: string;
+}) {
+  const { element, errorStyles = {}, color = "" } = event;
+  if (Object.keys(errorStyles).length > 0) {
+    element.update({
+      errorTextStyles: {
+        ...errorStyles,
+        base: {
+          // @ts-ignore
+          ...(errorStyles.base && { ...errorStyles.base }),
+          ...(color != "" && { color }),
+        },
+      },
+    });
+  }
+}
+const executeEvent = (event: {
+  eventName: "onChange" | "onBlur" | "onFocus";
+  data: any;
+  events?: IInputEvents;
+}) => {
+  const { eventName, data, events } = event;
+  if (events && eventName in events) {
     const eventHandler = events[eventName];
     if (typeof eventHandler === "function") {
       eventHandler({
-        elementType: get(data, "elementType",""),
-        isEmpty: get(data, "isEmpty",""),
-        isFocused: get(data, "isFocused",""),
-        isValid: get(data, "isValid",""),
+        elementType: get(data, "elementType", ""),
+        isEmpty: get(data, "isEmpty", ""),
+        isFocused: get(data, "isFocused", ""),
+        isValid: get(data, "isValid", ""),
       });
     }
   }
-}
+};

package/src/helpers/template.ts CHANGED Viewed

@@ -147,6 +147,7 @@ export const cardTemplate = (data: {
 .container-pay-button{
   padding-top: ${!!data['renderPaymentButton'] ? '10px':''};
   padding-bottom: ${!!data['renderPaymentButton'] ? '10px':''};
+  position: relative;
 }
 .collect-row {
@@ -163,15 +164,16 @@ export const cardTemplate = (data: {
 .expiration-year {
   position: relative !important;
   padding-top: 24px !important;
+  max-height: 85px;
 }
 .empty-div {
-  position: relative;
+  position: relative !important;
   margin-top: 2px;
   margin-bottom: 4px;
+  max-height: 85px;
 }
 .empty-div-card {
-    height: 80px !important;
 }
 .error-container{
     display: none;
@@ -349,7 +351,7 @@ export const cardTemplate = (data: {
 .checkbox {
   margin-top: 10px;
   margin-bottom: 20px;
-  margin-left: 10px !important;
+  margin-left: 0px !important;
   margin-right: 10px !important;
   width: 100%;
   text-align: left;
@@ -571,6 +573,7 @@ export const cardItemsTemplate = (data: {
       }
       .cvvContainer{
        max-width: 60%;
+       max-height: 90px;
        position: relative;
        padding: 0 0 0 29px;
       }