wonder-payment/dist/index.cjs

A lightweight and customizable wonder component for secure and user-friendly credit card input in payment forms.

"use strict";var D=Object.defineProperty,F=Object.defineProperties,G=Object.getOwnPropertyDescriptor,q=Object.getOwnPropertyDescriptors,W=Object.getOwnPropertyNames,U=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var j=(a,e,t)=>e in a?D(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t,b=(a,e)=>{for(var t in e||(e={}))N.call(e,t)&&j(a,t,e[t]);if(U)for(var t of U(e))Y.call(e,t)&&j(a,t,e[t]);return a},v=(a,e)=>F(a,q(e));var K=(a,e)=>{for(var t in e)D(a,t,{get:e[t],enumerable:!0})},J=(a,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let u of W(e))!N.call(a,u)&&u!==t&&D(a,u,{get:()=>e[u],enumerable:!(n=G(e,u))||n.enumerable});return a};var Q=a=>J(D({},"__esModule",{value:!0}),a);var y=(a,e,t)=>new Promise((n,u)=>{var w=h=>{try{i(t.next(h))}catch(x){u(x)}},g=h=>{try{i(t.throw(h))}catch(x){u(x)}},i=h=>h.done?n(h.value):Promise.resolve(h.value).then(w,g);i((t=t.apply(a,e)).next())});var re={};K(re,{default:()=>oe});module.exports=Q(re);var Ne=require("@adyen/adyen-web/styles/adyen.css");function L(a,{insertAt:e}={}){if(!a||typeof document=="undefined")return;let t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",e==="top"&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=a:n.appendChild(document.createTextNode(a))}L(`.payment-container{max-width:440px}.radio-group{display:flex;flex-direction:column;gap:16px;max-width:440px;width:100%}.radio-group-container{display:flex;flex-direction:column;gap:16px}.radio-bubble{position:relative;cursor:pointer;overflow:hidden;background:#fff;border-radius:12px;transition:all .3s ease}.radio-bubble input[type=radio]{position:absolute;opacity:0;cursor:pointer}.bubble-content{display:flex;align-items:center;gap:12px;padding:16px 24px;transition:background-color .3s ease}.brands{display:flex;margin-left:auto}.brands>svg{transition:all .2s ease}.circle{width:20px;height:20px;border:2px solid #002649;border-radius:50%;position:relative;transition:all .3s ease}.circle:after{content:"";position:absolute;width:12px;height:12px;background:#002649;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease}.radio-bubble:hover .circle{box-shadow:0 0 0 2px #3e44bd33}.radio-bubble input[type=radio]:checked+.bubble-content .circle:after{transform:translate(-50%,-50%) scale(1)}.text{color:#213547;font-size:1rem}.expandable-content{background:#fff;padding:0 24px;max-height:0;overflow:hidden;transition:all .3s ease;opacity:0}.radio-bubble input[type=radio]:checked~.expandable-content{padding:0 24px 16px;max-height:400px;opacity:1}.expandable-content p{margin:0;color:#213547;font-size:.9rem}.card{display:flex;padding:16px 0;flex-direction:column;gap:24px}.card--label{transform:translate(10px) translateY(-50%);z-index:1;background:linear-gradient(to top,#eef0f2 53%,transparent 50%);position:absolute;font-weight:500;font-size:14px}.card__wrapper.error .card--label{color:#ff4d4f;background:linear-gradient(to top,#fff8f5 53%,transparent 50%)}.card__wrapper{display:flex;flex-direction:column;justify-items:start;position:relative;width:100%}.card__wrapper--input{background:#eef0f2;color:#00112c;display:block;font-family:inherit;border:1px solid transparent;border-radius:8px;font-size:1rem;height:48px;outline:none;padding-left:12px;transition:border .2sease-out,box-shadow .2sease-out;width:100%}.card__wrapper--input:hover{border:1px solid #cdd8e2}.error .card__wrapper--input{background:#fff8f5;border:1px solid #ff4d4f}.card__field-wrapper{display:flex;width:100%;gap:20px}.card__submit-button{background:#002649;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;height:40px;outline:none;padding:0 16px;transition:background .2s ease-out;width:100%}.card__submit-button:hover{background:#002649;border:1px solid #dbdee2}.card__submit-button:disabled{background:#72889d;border:1px solid #dbdee2;cursor:not-allowed}.save-checkbox{display:none}.save-checkbox--label{display:inline-flex;align-items:center;cursor:pointer;font-size:14px;position:relative}.save-checkbox--label:before{content:"";width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-block;margin-right:8px;background-color:#eef0f2;transition:all .3s ease}.save-checkbox--label:after{content:"";position:absolute;width:6px;height:13px;border:solid #eef0f2;border-width:0 3px 3px 0;transform:rotate(40deg);left:8px;top:4px;display:none}.save-checkbox:checked+.save-checkbox--label:before{background-color:#002649;border-color:#eef0f2}.save-checkbox:checked+.save-checkbox--label:after{display:block}.save-checkbox--label:hover:before{border-color:#cdd8e2}.save-checkbox:checked+.save-checkbox--label:hover:before{border-color:#002649}.stored-card__delete-button{display:none;background:transparent;border:none;border-radius:4px;color:#ff4d4f;cursor:pointer;font-size:.9rem;padding:8px 12px;transition:background .2s ease}.stored-card__delete-button:hover{text-decoration:underline}.radio-bubble:has(input[type=radio]:checked) .stored-card__delete-button{display:block;margin-left:auto}.stored-card__wrapper{display:flex;gap:20px;width:100%}.stored-card__wrapper--field{flex:1}.stored-card__wrapper--field--value{display:flex;align-items:center}.error-message{color:#ff4d4f;font-size:12px}.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{background-color:#fff;border-radius:12px}
`);var T=require("@adyen/adyen-web");var X=()=>({DEVELOPMENT_BASE_URL:"http://localhost:5012",STAGING_BASE_URL:"https://hosted-checkout.staging.straumur.is",PRODUCTION_BASE_URL:"",GET_PAYMENT_METHODS_URL:"wonder/payment-methods",POST_PAYMENT_URL:"wonder/payment",POST_PAYMENT_DETAILS_URL:"wonder/payment-details",POST_DISABLE_TOKEN_URL:"wonder/disable-token"}),P=X();function k(a){switch(a){case"development":return P.DEVELOPMENT_BASE_URL;case"staging":return P.STAGING_BASE_URL;case"production":return P.PRODUCTION_BASE_URL;default:throw new Error(`Unknown environment: ${a}`)}}function O(a,e){return fetch(`${k(a)}/${P.GET_PAYMENT_METHODS_URL}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})}function A(a,e){return fetch(`${k(a)}/${P.POST_PAYMENT_URL}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})}function S(a,e){return fetch(`${k(a)}/${P.POST_PAYMENT_DETAILS_URL}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})}function $(a,e){return fetch(`${k(a)}/${P.POST_DISABLE_TOKEN_URL}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})}function ee(a,e,t,n,u){return y(this,null,function*(){var C;a.innerHTML=`
    <label class="radio-bubble">
      <input type="radio" name="option" value="card">
      <span class="bubble-content">
        <span class="circle"></span>
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="26" viewBox="0 0 24 24" fill="none">
          <path d="M24 11H0V7H24V11Z" fill="#002649"/>
          <path opacity="0.4" d="M21.3333 3C22.8042 3 24 4.19375 24 5.66667V7H0V5.66667C0 4.19375 1.19375 3 2.66667 3H21.3333ZM24 19C24 20.4708 22.8042 21.6667 21.3333 21.6667H2.66667C1.19375 21.6667 0 20.4708 0 19V11H24V19ZM4.66667 16.3333C4.3 16.3333 4 16.6333 4 17C4 17.3667 4.3 17.6667 4.66667 17.6667H7.33333C7.7 17.6667 8 17.3667 8 17C8 16.6333 7.7 16.3333 7.33333 16.3333H4.66667ZM10 17.6667H15.3333C15.7 17.6667 16 17.3667 16 17C16 16.6333 15.7 16.3333 15.3333 16.3333H10C9.63333 16.3333 9.33333 16.6333 9.33333 17C9.33333 17.3667 9.63333 17.6667 10 17.6667Z" fill="#002649"/>
        </svg>
        </svg>
        <span class="text">Card payment</span>
        <span class="brands">
          <svg xmlns="http://www.w3.org/2000/svg" id="brand_visa" width="40" height="26" fill="none" viewBox="0 0 40 26"><path fill="#fff" d="M0 0h40v26H0z"/><path fill="#1434CB" d="m15.9 7.7-4.43 10.6h-2.9l-2.2-8.47c-.13-.52-.25-.71-.65-.93C5.05 8.55 3.96 8.2 3 8l.07-.32h4.67c.6 0 1.13.4 1.27 1.09l1.15 6.14 2.86-7.23h2.89Zm11.39 7.15c0-2.8-3.88-2.96-3.85-4.21 0-.38.37-.79 1.16-.9a5.2 5.2 0 0 1 2.71.48l.48-2.25a7.4 7.4 0 0 0-2.57-.47c-2.71 0-4.62 1.44-4.64 3.51-.02 1.53 1.36 2.38 2.4 2.9 1.08.51 1.44.85 1.43 1.31 0 .71-.85 1.03-1.64 1.04-1.39.02-2.19-.37-2.82-.67l-.5 2.33c.64.29 1.82.55 3.05.56 2.89 0 4.78-1.42 4.79-3.63Zm7.17 3.46H37L34.78 7.7h-2.34c-.53 0-.98.3-1.17.78l-4.12 9.84h2.88l.57-1.58h3.53l.33 1.58Zm-3.07-3.76 1.45-3.99.83 4H31.4ZM19.83 7.7l-2.27 10.62h-2.74L17.09 7.7h2.74Z"/></svg>
          <svg xmlns="http://www.w3.org/2000/svg" id="brand_mc" width="40" height="26" viewBox="0 0 40 26"><path fill="#fff" d="M0 0h40v26H0z"/><path fill="#F06022" d="M16.13 19.29h7.74V6.7h-7.74v12.58z"/><path fill="#EA1D25" d="M16.93 13A7.93 7.93 0 0 1 20 6.71a8.02 8.02 0 0 0-10.65.65 7.96 7.96 0 0 0 0 11.28 8.02 8.02 0 0 0 10.65.65A8.02 8.02 0 0 1 16.93 13"/><path fill="#F79D1D" d="M33 13c0 2.12-.84 4.15-2.34 5.65a8.1 8.1 0 0 1-10.66.64A8.05 8.05 0 0 0 23.07 13 7.96 7.96 0 0 0 20 6.71a8.02 8.02 0 0 1 10.66.64A7.93 7.93 0 0 1 33 13"/></svg>
          <svg xmlns="http://www.w3.org/2000/svg" id="brand_maestro" width="40" height="26" fill="none" viewBox="0 0 40 26"><path fill="#fff" d="M0 0h40v26H0z"/><path fill="#7773B4" d="M16.13 19.29h7.74V6.7h-7.74v12.58z"/><path fill="#EA1D25" d="M16.93 13A7.93 7.93 0 0 1 20 6.71a8.02 8.02 0 0 0-10.65.65 7.96 7.96 0 0 0 0 11.28 8.02 8.02 0 0 0 10.65.65A8.02 8.02 0 0 1 16.93 13"/><path fill="#139FDA" d="M33 13c0 2.12-.84 4.15-2.34 5.65a8.1 8.1 0 0 1-10.66.64A8.05 8.05 0 0 0 23.07 13 7.96 7.96 0 0 0 20 6.71a8.02 8.02 0 0 1 10.66.64A7.93 7.93 0 0 1 33 13"/></svg></span>
      </span>
      <div class="expandable-content">
        <div class="card">
          <div class="card__wrapper">
              <label class="card--label">Card number</label>
              <span class="card__wrapper--input" data-cse="encryptedCardNumber"/>
          </div>

          <div class="card__field-wrapper">
              <div>
                  <div class="card__wrapper">
                      <label class="card--label">Expired date</label>
                      <span class="card__wrapper--input" data-cse="encryptedExpiryDate" />
                  </div>
              </div>

              <div>
                  <div class="card__wrapper">
                      <label class="card--label">Security code</label>
                      <span class="card__wrapper--input" data-cse="encryptedSecurityCode" />
                  </div>
              </div>
          </div>

          ${t.enableStoreDetails==="AskForConsent"&&`<input type="checkbox" id="save-checkbox" class="save-checkbox">
            <label for="save-checkbox" class="save-checkbox--label">Store payment information</label>`}

          <button id="card-submit-button" class="card__submit-button" disabled>${t.formattedAmount}</button>
        </div>
      </div>
    </label>`;let w=yield(0,T.AdyenCheckout)({environment:e.environment==="production"?"live":"test",clientKey:t.clientKey,locale:t.locale,countryCode:"IS",paymentMethodsResponse:t.paymentMethods,onPaymentCompleted:e.onPaymentCompleted,onPaymentFailed:e.onPaymentFailed,onSubmit:x,onAdditionalDetails:E}),g=document.getElementById("card-submit-button"),i=((C=t.paymentMethods.paymentMethods.find(c=>c.type==="scheme"))==null?void 0:C.brands)||[],h=new T.CustomCard(w,{onBrand:c=>{if(c.brand==="card"){i.forEach(f=>{let r=document.getElementById("brand_"+f);r&&(r.style.opacity="1")});return}i.filter(f=>f!==c.brand).forEach(f=>{let r=document.getElementById("brand_"+f);r&&(r.style.opacity="0")})},onValidationError:c=>{var r;let f=document.getElementsByClassName("error-message");for(let p=f.length-1;p>=0;p--)(r=f[p].parentElement)==null||r.classList.remove("error"),f[p].remove();c.forEach(p=>{var d,o;let s=a.querySelector(`[data-cse="${p.fieldType}"]`);if(s&&p.errorI18n){(d=s.parentElement)==null||d.classList.add("error");let l=document.createElement("span");l.className="error-message",l.textContent=p.errorI18n,(o=s.parentElement)==null||o.appendChild(l)}else s&&s.classList.remove("error")})},onAllValid:c=>{g&&(g.disabled=!c.allValid)},placeholders:e.placeholders,challengeWindowSize:"05"}).mount("#card-container");g.addEventListener("click",()=>{h.submit()});function x(c,f,r){return y(this,null,function*(){let p=v(b({},c.data),{origin:window.location.origin,storePaymentMethod:M(),payfacData:e.payfacData}),s=yield A(e.environment,p);if(!s.ok){r.reject();let m=yield s.json();n(m.errorMessage);return}let d=yield s.json();if(!d.resultCode){r.reject(),n("Payment unsuccessful");return}let{resultCode:o,action:l}=d;if(o==="RedirectShopper"||o==="IdentifyShopper"){document.getElementById("payment-container").style.display="none",w.createFromAction(l).mount(document.getElementById("3ds-container"));return}r.resolve({resultCode:o,action:l}),o==="Authorised"?u("Payment successful"):n(o)})}function E(c,f,r){return y(this,null,function*(){let p=v(b({},c.data),{payfacData:e.payfacData}),s=yield S(e.environment,p);if(!s.ok){r.reject();let m=yield s.json();n(m.errorMessage);return}let d=yield s.json();if(!d.resultCode){r.reject(),n("Payment unsuccessful");return}let{resultCode:o,action:l}=d;r.resolve({resultCode:o,action:l}),o==="Authorised"?u("Payment successful"):n(o)})}function M(){var c;return t.enableStoreDetails==="AskForConsent"?(c=document.getElementById("save-checkbox"))==null?void 0:c.checked:t.enableStoreDetails==="Enabled"}return a})}var V=ee;var I=require("@adyen/adyen-web");function te(a,e,t,n,u){return y(this,null,function*(){var w,g;(g=(w=t.paymentMethods)==null?void 0:w.storedPaymentMethods)!=null&&g.length&&(t.paymentMethods.storedPaymentMethods.forEach((i,h)=>{a.innerHTML+=`
     <label class="radio-bubble" id="stored-card-${i.id}">
        <input type="radio" name="option" value="${h}">
        <span class="bubble-content">
          <span class="circle"></span>
            ${ae(i.brand,i.name)}
            <div class="card-number">\u2022\u2022\u2022\u2022 ${i.lastFour}</div>
            <button id="card-delete-${i.id}" class="stored-card__delete-button">
              Delete
            </button>
        </span>
        <div class="expandable-content">
          <div class="stored-card__wrapper">
            <div class="card stored-card__wrapper--field">
                <label class="card--label">Expired date</label>
                <div class="card__wrapper">
                  <span class="card__wrapper--input stored-card__wrapper--field--value">
                    ${i.expiryMonth}/${i.expiryYear}
                  </span>
                </div>
            </div>

            <div class="card stored-card__wrapper--field">
                <div class="card__wrapper">
                    <span class="card__wrapper--input" data-cse="encryptedSecurityCode" />
                    <label class="card--label">Security code</label>
                </div>
            </div>
          </div>

          <button id="card-submit-${i.id}"class="card__submit-button" disabled>
            Pay ${t.formattedAmount}
          </button>
        </div>
      </label>`}),t.paymentMethods.storedPaymentMethods.forEach(i=>y(this,null,function*(){let h=a.querySelector(`#stored-card-${i.id}`);h.querySelector(`#card-delete-${i.id}`).addEventListener("click",function(r){return y(this,null,function*(){var p;if(r.stopPropagation(),confirm("Are you sure you want to remove this card?")){let s={storedPaymentMethodId:i.id,payfacData:e.payfacData},d=yield $(e.environment,s);if(!d.ok){alert("Error removing card");return}if(!(yield d.json()).success){alert("Card was not removed!");return}h.remove(),(p=t.paymentMethods)!=null&&p.storedPaymentMethods.filter(l=>l.id!==i.id).length||(a.innerHTML=""),t.paymentMethods.storedPaymentMethods=t.paymentMethods.storedPaymentMethods.filter(l=>l.id!==i.id)}})});let E=yield(0,I.AdyenCheckout)({environment:e.environment==="production"?"live":"test",clientKey:t.clientKey,locale:t.locale,countryCode:"IS",paymentMethodsResponse:t.paymentMethods,onPaymentCompleted:e.onPaymentCompleted,onPaymentFailed:e.onPaymentFailed,onSubmit:c,onAdditionalDetails:f}),M=h.querySelector(`#card-submit-${i.id}`),C=new I.CustomCard(E,{brands:[i.brand],maskSecurityCode:!0,onValidationError:r=>{var s;console.log("Validation errors",r);let p=h.getElementsByClassName("error-message");for(let d=p.length-1;d>=0;d--)(s=p[d].parentElement)==null||s.classList.remove("error"),p[d].remove();r.forEach(d=>{var l,m;let o=h.querySelector(`[data-cse="${d.fieldType}"]`);if(o&&d.errorI18n){(l=o.parentElement)==null||l.classList.add("error");let _=document.createElement("span");_.className="error-message",_.textContent=d.errorI18n,(m=o.parentElement)==null||m.appendChild(_)}else o&&o.classList.remove("error")})},onAllValid:r=>{M&&(M.disabled=!r.allValid)},placeholders:e.placeholders}).mount(`#stored-card-${i.id}`);M.addEventListener("click",()=>{C.submit()});function c(r,p,s){return y(this,null,function*(){let d=v(b({},r.data),{paymentMethod:v(b({},r.data.paymentMethod),{storedPaymentMethodId:i.id}),origin:window.location.origin,payfacData:e.payfacData}),o=yield A(e.environment,d);if(!o.ok){s.reject();let R=yield o.json();n(R.errorMessage);return}let l=yield o.json();if(!l.resultCode){s.reject(),n("Payment unsuccessful");return}let{resultCode:m,action:_}=l;if(m==="RedirectShopper"||m==="IdentifyShopper"){document.getElementById("payment-container").style.display="none",E.createFromAction(_).mount(document.getElementById("3ds-container"));return}s.resolve({resultCode:m,action:_}),m==="Authorised"?u("Payment successful"):n(m)})}function f(r,p,s){return y(this,null,function*(){let d=v(b({},r.data),{payfacData:e.payfacData}),o=yield S(e.environment,d);if(!o.ok){s.reject();let R=yield o.json();n(R.errorMessage);return}let l=yield o.json();if(!l.resultCode){s.reject(),n("Payment unsuccessful");return}let{resultCode:m,action:_}=l;s.resolve({resultCode:m,action:_}),m==="Authorised"?u("Payment successful"):n(m)})}})))})}var Z=te;function ae(a,e){return a==="visa"?'<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve"><rect width="780" height="500" fill="#0E4595"/><path d="m293.2 348.73l33.361-195.76h53.36l-33.385 195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725 0-89.865 26.55-90.18 64.603-0.299 28.13 26.514 43.822 46.752 53.186 20.771 9.595 27.752 15.714 27.654 24.283-0.131 13.121-16.586 19.116-31.922 19.116-21.357 0-32.703-2.967-50.227-10.276l-6.876-3.11-7.489 43.823c12.463 5.464 35.51 10.198 59.438 10.443 56.09 0 92.5-26.246 92.916-66.882 0.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268 0-8.137 9.668-16.839 30.557-16.839 17.449-0.27 30.09 3.535 39.938 7.5l4.781 2.26 7.232-42.429m137.31-4.223h-41.232c-12.773 0-22.332 3.487-27.941 16.234l-79.244 179.4h56.031s9.16-24.123 11.232-29.418c6.125 0 60.555 0.084 68.338 0.084 1.596 6.853 6.49 29.334 6.49 29.334h49.514l-43.188-195.64zm-65.418 126.41c4.412-11.279 21.26-54.723 21.26-54.723-0.316 0.522 4.379-11.334 7.074-18.684l3.605 16.879s10.219 46.729 12.354 56.528h-44.293zm-363.3-126.41l-52.24 133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766 171.2 56.456-0.064 84.004-195.39h-56.521" fill="#ffffff"/><path d="m146.92 152.96h-86.041l-0.681 4.073c66.938 16.204 111.23 55.363 129.62 102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527" fill="#F2AE14"/></svg>':a==="mc"?'<svg xmlns="http://www.w3.org/2000/svg" width="40" height="26" viewBox="0 0 40 26"><path fill="#fff" d="M0 0h40v26H0z"/><path fill="#F06022" d="M16.13 19.29h7.74V6.7h-7.74v12.58z"/><path fill="#EA1D25" d="M16.93 13A7.93 7.93 0 0 1 20 6.71a8.02 8.02 0 0 0-10.65.65 7.96 7.96 0 0 0 0 11.28 8.02 8.02 0 0 0 10.65.65A8.02 8.02 0 0 1 16.93 13"/><path fill="#F79D1D" d="M33 13c0 2.12-.84 4.15-2.34 5.65a8.1 8.1 0 0 1-10.66.64A8.05 8.05 0 0 0 23.07 13 7.96 7.96 0 0 0 20 6.71a8.02 8.02 0 0 1 10.66.64A7.93 7.93 0 0 1 33 13"/></svg>':e}var B=require("@adyen/adyen-web");function ne(a,e,t,n,u){return y(this,null,function*(){var g;if((g=t.paymentMethods.paymentMethods)==null?void 0:g.some(i=>i.type==="googlepay")){a.innerHTML=`<label class="radio-bubble">
            <input type="radio" name="option" value="google-pay">
            <span class="bubble-content">
              <span class="circle"></span>
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="26" fill="none" viewBox="0 0 40 26"><path fill="#fff" d="M29.13 2.41H10.87C5.17 2.41.5 7.18.5 13.01a10.5 10.5 0 0 0 10.37 10.58h18.26c5.7 0 10.37-4.76 10.37-10.59 0-5.82-4.67-10.59-10.37-10.59Z"/><path fill="#3C4043" d="M29.13 3.27c1.28 0 2.52.26 3.7.77a9.6 9.6 0 0 1 5.08 5.19 9.78 9.78 0 0 1 0 7.55 9.83 9.83 0 0 1-5.08 5.18 9.26 9.26 0 0 1-3.7.77H10.87a9.24 9.24 0 0 1-3.7-.77 9.6 9.6 0 0 1-5.08-5.18 9.78 9.78 0 0 1 0-7.55 9.83 9.83 0 0 1 5.08-5.19 9.24 9.24 0 0 1 3.7-.77h18.26Zm0-.86H10.87C5.17 2.41.5 7.18.5 13.01a10.5 10.5 0 0 0 10.37 10.58h18.26c5.7 0 10.37-4.76 10.37-10.59 0-5.82-4.67-10.59-10.37-10.59Z"/><path fill="#3C4043" d="M19.1 13.75v3.2h-1v-7.9h2.64c.67 0 1.24.23 1.7.68.49.46.72 1.01.72 1.67a2.2 2.2 0 0 1-.71 1.68c-.46.45-1.03.67-1.7.67H19.1Zm0-3.73v2.76h1.66c.4 0 .73-.14.99-.4.26-.28.4-.6.4-.98 0-.36-.14-.68-.4-.95a1.28 1.28 0 0 0-.99-.42H19.1Zm6.67 1.35c.73 0 1.31.2 1.74.6.42.4.64.95.64 1.65v3.34h-.95v-.76h-.04a1.9 1.9 0 0 1-1.65.93 2.1 2.1 0 0 1-1.46-.53c-.4-.35-.6-.8-.6-1.32 0-.56.21-1 .63-1.34.41-.33.97-.5 1.66-.5.59 0 1.07.12 1.45.34v-.23c0-.36-.13-.65-.4-.9a1.4 1.4 0 0 0-.97-.37c-.56 0-1 .24-1.32.72l-.88-.56a2.42 2.42 0 0 1 2.15-1.07Zm-1.29 3.92c0 .27.11.5.33.67.22.17.48.26.78.26.42 0 .79-.16 1.12-.48.32-.31.49-.68.49-1.11a2.02 2.02 0 0 0-1.3-.38c-.4 0-.74.1-1.01.3a.9.9 0 0 0-.4.74Zm9.08-3.75-3.32 7.8h-1.02l1.23-2.73-2.19-5.07h1.09l1.57 3.89h.02l1.54-3.89h1.08Z"/><path fill="#4285F4" d="M15.14 13.1c0-.32-.03-.64-.09-.95h-4.17v1.75h2.4a2.1 2.1 0 0 1-.89 1.4v1.14h1.43a4.49 4.49 0 0 0 1.32-3.33Z"/><path fill="#34A853" d="M12.4 15.3a2.66 2.66 0 0 1-4-1.44H6.9v1.18a4.43 4.43 0 0 0 6.91 1.4l-1.43-1.13Z"/><path fill="#FABB05" d="M8.25 13c0-.3.05-.59.14-.86v-1.17H6.9a4.59 4.59 0 0 0 0 4.07l1.48-1.17a2.79 2.79 0 0 1-.14-.86Z"/><path fill="#E94235" d="M10.88 10.27c.66 0 1.24.23 1.7.68l1.27-1.3a4.22 4.22 0 0 0-2.97-1.18 4.44 4.44 0 0 0-3.97 2.5l1.48 1.17a2.66 2.66 0 0 1 2.5-1.87Z"/></svg>
              <span class="text">Google Pay</span>
            </span>
            <div class="expandable-content">
              <div id="google-pay-button"></div>
            </div>
          </label>`;let i=yield(0,B.AdyenCheckout)({environment:e.environment==="production"?"live":"test",clientKey:t.clientKey,locale:t.locale,countryCode:"IS",paymentMethodsResponse:t.paymentMethods,onPaymentCompleted:e.onPaymentCompleted,onPaymentFailed:e.onPaymentFailed,onSubmit:M,onAdditionalDetails:C}),h=t.paymentMethods.paymentMethods.find(c=>c.type==="googlepay").configuration,x={amount:{value:t.minorUnitsAmount,currency:t.currency},countryCode:"IS",environment:e.environment,configuration:v(b({},h),{merchantName:t.merchantName})},E=new B.GooglePay(i,x);E.isAvailable().then(()=>{E.mount("#google-pay-button")}).catch(c=>{console.error("Google Pay is not available",c)});function M(c,f,r){return y(this,null,function*(){let p=v(b({},c.data),{origin:window.location.origin,payfacData:e.payfacData}),s=yield A(e.environment,p);if(!s.ok){r.reject();let m=yield s.json();n(m.errorMessage);return}let d=yield s.json();if(!d.resultCode){r.reject(),n("Payment unsuccessful");return}let{resultCode:o,action:l}=d;if(o==="RedirectShopper"||o==="IdentifyShopper"){i.createFromAction(l).mount(document.getElementById("3ds-container"));return}r.resolve({resultCode:o,action:l}),o==="Authorised"?u("Payment successful"):n(o)})}function C(c,f,r){return y(this,null,function*(){let p=v(b({},c.data),{payfacData:e.payfacData}),s=yield S(e.environment,p);if(!s.ok){r.reject();let m=yield s.json();n(m.errorMessage);return}let d=yield s.json();if(!d.resultCode){r.reject(),n("Payment unsuccessful");return}let{resultCode:o,action:l}=d;r.resolve({resultCode:o,action:l}),o==="Authorised"?u("Payment successful"):n(o)})}}})}var z=ne;var H=class{constructor(e){this.configuration=e}mount(e){return y(this,null,function*(){if(this.element=typeof e=="string"?document.querySelector(e):e,!this.element)throw new Error("Invalid selector provided");let t=yield this.setupPaymentMethods(this.configuration.environment,this.configuration.payfacData);if(t.resultCode==="Error"){this.handleError(t.message||"An error occurred");return}this.element.innerHTML=`
      <div id="3ds-container"></div>

      <div id="payment-container" class="payment-container">
        <div class="radio-group">
          <div id="stored-card-container" class="radio-group-container"></div>
          
          <div id="card-container" class="radio-group-container"></div>

          <div id="google-pay-container" class="radio-group-container"></div>

        </div>
      </div>
    `,yield Z(this.element.querySelector("#stored-card-container"),this.configuration,t,this.handleError.bind(this),this.handleSuccess.bind(this)),yield V(this.element.querySelector("#card-container"),this.configuration,t,this.handleError.bind(this),this.handleSuccess.bind(this)),yield z(this.element.querySelector("#google-pay-container"),this.configuration,t,this.handleError.bind(this),this.handleSuccess.bind(this))})}handleError(e){this.element.innerHTML=`
        <div class="error-message">${e}</div>
      `,document.getElementById("payment-container").style.display="block"}handleSuccess(e){this.element.innerHTML=`
        <div class="success-message">${e}</div>
      `}setupPaymentMethods(e,t){return y(this,null,function*(){try{let n=yield O(e,{payfacData:t});if(!n.ok)return{resultCode:"Error",message:(yield n.json()).errorMessage};let u=yield n.json();return b({resultCode:"Success"},u)}catch(n){return{resultCode:"Error",message:n.message}}})}},oe=H;
//# sourceMappingURL=index.cjs.map