@mygigsters/card-sdk 1.0.0

package/dist/index.cjs.js

@@ -0,0 +1,518 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("airwallex-payment-elements");class g{constructor(t){this.baseUrl=t.replace(/\/+$/,"")}async _post(t,e,i=null,o={}){const s={"Content-Type":"application/json",...o};i&&(s.Authorization=i.startsWith("Basic ")||i.startsWith("Bearer ")?i:`Bearer ${i}`);const r=await fetch(`${this.baseUrl}/api/v1${t}`,{method:"POST",headers:s,body:JSON.stringify(e)}),c=await r.text();let n=null;if(c&&c.trim().length>0)try{n=JSON.parse(c)}catch{n=null}if(!r.ok){const l=n&&(n.message||n.error)||c||r.statusText||`HTTP ${r.status}`;throw new Error(l)}return n??{}}async authenticate(t,e){const i=btoa(`${t}:${e}`),o=await fetch(`${this.baseUrl}/api/v1/sdk-initialization`,{method:"POST",headers:{"Content-Type":"application/json","x-api-version":"1.1",Authorization:`Basic ${i}`}}),s=await o.text();let r=null;if(s&&s.trim().length>0)try{r=JSON.parse(s)}catch{r=null}if(!o.ok){const c=r&&(r.message||r.error)||s||o.statusText||`HTTP ${o.status}`;throw new Error(c)}if(!r?.success||!r?.data?.token)throw new Error("Authentication failed: Unexpected response from server");return{token:r.data.token,clientId:r.data.clientId,expiresIn:r.data.expiresIn,tokenType:r.data.tokenType,paymentsIndia:r.data.paymentsIndia||!1}}async getClientSecret(t,e,i=null){console.log("🔐 CardAPI.getClientSecret()",{customerId:t,accountId:e,hasToken:!!i});const o=await this._post("/customer/client-secret",{customerId:t,accountId:e},i),s=o.client_secret||o.clientSecret||o?.data?.client_secret||o?.data?.clientSecret;if(!s)throw new Error("Failed to retrieve client secret from server");return{clientSecret:s}}async saveConsent(t,e,i=null){return this._post("/customer/save-consent",{customerId:t,paymentConsentId:e},i)}}const m={close:`<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M6 18L18 6M6 6l12 12"/>
+  </svg>`,check:`<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6L9 17l-5-5"/>
+  </svg>`};class b{constructor(t,e){this.shadowRoot=t,this.callbacks=e,this.state={loading:!0,cardLoaded:!1,cardComplete:!1,submitting:!1,error:"",success:!1},this._cardMounted=!1}_getContainer(){let t=this.shadowRoot.querySelector("#mc-sdk-root");if(!t){t=document.createElement("div"),t.id="mc-sdk-root";const e=this.shadowRoot.querySelector("#mc-theme-container");e?e.appendChild(t):this.shadowRoot.appendChild(t)}return t}render(){this.state.loading=!0;const t=this._getContainer();t.innerHTML=`
+      <div class="mc-backdrop" id="mc-backdrop">
+        <div class="mc-modal" id="mc-modal">
+          <button class="mc-close-btn" aria-label="Close" id="mc-close-btn" type="button">${m.close}</button>
+
+          <div class="mc-header">
+            <h1 class="mc-title">Card Details</h1>
+            <p class="mc-subtitle">Please enter your card details</p>
+          </div>
+
+          <div class="mc-body">
+            <!-- Error banner (initially hidden) -->
+            <div class="mc-error-banner" style="display:none;" id="mc-error-banner"></div>
+
+            <!-- Loading spinner (shown initially) -->
+            <div class="mc-loading" id="mc-loading">
+              <div class="mc-spinner"></div>
+              <span class="mc-loading-text">Loading payment form...</span>
+            </div>
+
+            <!-- Card wrapper (hidden until Airwallex loads) -->
+            <div class="mc-card-wrapper" id="mc-card-wrapper" style="display:none;">
+              <div id="card-root"></div>
+            </div>
+
+            <!-- Submit button (hidden until Airwallex loads) -->
+            <button class="mc-submit-btn" id="mc-submit-btn" disabled style="display:none;" type="button">
+              Submit
+            </button>
+          </div>
+
+          <div class="mc-powered-by">
+            Powered by <a href="https://mygigsters.com.au" target="_blank" rel="noopener">MyGigsters</a>
+          </div>
+        </div>
+      </div>
+    `,this._attachListeners()}_attachListeners(){this.shadowRoot.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach(o=>{o.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),this.callbacks.onClose()})});const e=this.shadowRoot.querySelector("#mc-backdrop")||this.shadowRoot.querySelector(".mc-backdrop");e&&e.addEventListener("click",o=>{o.target===e&&(o.preventDefault(),o.stopPropagation(),this.callbacks.onClose())});const i=this.shadowRoot.querySelector("#mc-submit-btn");i&&i.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),this.callbacks.onSubmit()}),this.shadowRoot.addEventListener("click",o=>{const s=o.target;s&&(s.closest(".mc-close-btn")||s.closest("#mc-close-btn"))&&(o.preventDefault(),o.stopPropagation(),this.callbacks.onClose())})}setCardLoaded(){this.state.cardLoaded=!0,this.state.loading=!1;const t=this.shadowRoot.querySelector("#mc-loading"),e=this.shadowRoot.querySelector("#mc-card-wrapper"),i=this.shadowRoot.querySelector("#mc-submit-btn");t&&(t.style.display="none"),e&&(e.style.display="block"),i&&(i.style.display="flex")}markCardMounted(){this._cardMounted=!0}setCardComplete(t){this.state.cardComplete=t;const e=this.shadowRoot.querySelector("#mc-submit-btn");e&&(e.disabled=!t||this.state.submitting)}setSubmitting(t){this.state.submitting=t;const e=this.shadowRoot.querySelector("#mc-submit-btn");e&&(e.disabled=t||!this.state.cardComplete,e.innerHTML=t?'<span class="mc-btn-inner"><div class="mc-spinner mc-spinner-sm"></div>Saving...</span>':"Submit")}setError(t){this.state.error=t;const e=this.shadowRoot.querySelector("#mc-error-banner");e&&(t?(e.textContent=t,e.style.display="block"):(e.textContent="",e.style.display="none"))}showInitError(t){this.state.loading=!1,this.state.error=t;const e=this.shadowRoot.querySelector("#mc-loading");e&&(e.innerHTML=`
+        <div style="text-align:center; padding: 12px 0;">
+          <p style="color:#ef4444; font-size:14px; font-weight:600; margin-bottom:8px;">${this._escapeHtml(t)}</p>
+          <p style="color:#94a3b8; font-size:13px;">Please check your configuration credentials and try again.</p>
+        </div>
+      `)}showSuccess(t){this.state.success=!0;const e=this.shadowRoot.querySelector(".mc-modal");e&&(e.innerHTML=`
+      <button class="mc-close-btn" aria-label="Close" id="mc-close-btn" type="button">${m.close}</button>
+
+      <div class="mc-body">
+        <div class="mc-success-wrap">
+          <div class="mc-success-icon">${m.check}</div>
+          <h2 class="mc-success-title">Card Saved Successfully</h2>
+          <p class="mc-success-sub">Your card details have been securely tokenized and saved.</p>
+          <button class="mc-done-btn" id="mc-done-btn" type="button">Done</button>
+        </div>
+      </div>
+
+      <div class="mc-powered-by">
+        Powered by <a href="https://mygigsters.com.au" target="_blank" rel="noopener">MyGigsters</a>
+      </div>
+    `,e.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach(i=>{i.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),this.callbacks.onClose()})}),e.querySelector("#mc-done-btn")?.addEventListener("click",i=>{i.preventDefault(),i.stopPropagation(),this.callbacks.onClose()}))}_escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}destroy(){const t=this.shadowRoot.querySelector("#mc-sdk-root");t&&(t.innerHTML=""),this._cardMounted=!1}}const y=`
+/* ── Reset inside shadow DOM ───────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:host {
+  display: block !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 2147483647 !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  color: #e5e7eb;
+  line-height: 1.5;
+  pointer-events: auto !important;
+}
+
+#mc-theme-container, #mc-sdk-root {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   DARK THEME (DEFAULT)
+   ══════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Backdrop ──────────────────────────────────────────────────────────────── */
+.mc-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2147483647;
+  padding: 16px;
+  box-sizing: border-box;
+  animation: mc-fade-in 0.2s ease;
+}
+
+/* ── Modal ──────────────────────────────────────────────────────────────────── */
+.mc-modal {
+  background: #111827;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 460px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+  animation: mc-modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: #ffffff;
+}
+
+/* ── Close button ──────────────────────────────────────────────────────────── */
+.mc-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer !important;
+  color: #94a3b8;
+  transition: all 0.15s ease;
+  padding: 0;
+  line-height: 0;
+  z-index: 100;
+  outline: none;
+  pointer-events: auto !important;
+  user-select: none;
+}
+
+.mc-close-btn svg,
+.mc-close-btn path {
+  pointer-events: none !important;
+}
+
+.mc-close-btn:hover {
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.mc-close-btn:active {
+  transform: scale(0.95);
+}
+
+/* ── Header ────────────────────────────────────────────────────────────────── */
+.mc-header {
+  text-align: center;
+  padding: 28px 24px 0;
+}
+
+.mc-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0 0 6px;
+  line-height: 1.2;
+}
+
+.mc-subtitle {
+  font-size: 14px;
+  color: #94a3b8;
+  margin: 0;
+  font-weight: 400;
+}
+
+/* ── Body ──────────────────────────────────────────────────────────────────── */
+.mc-body {
+  padding: 20px 24px 24px;
+  flex: 1;
+}
+
+/* ── Card mount area ───────────────────────────────────────────────────────── */
+.mc-card-wrapper {
+  background: #1f2937;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 20px;
+  min-height: 48px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.mc-card-wrapper:focus-within {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+}
+
+#card-root {
+  margin: 0;
+  padding: 0;
+  min-height: 40px;
+  width: 100%;
+}
+
+#card-root iframe {
+  display: block !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+  border: none !important;
+}
+
+/* ── Loading state ─────────────────────────────────────────────────────────── */
+.mc-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 20px;
+  gap: 12px;
+}
+
+.mc-loading-text {
+  font-size: 13.5px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+/* ── Spinner ────────────────────────────────────────────────────────────────── */
+.mc-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: mc-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+.mc-spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+}
+
+@keyframes mc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Submit button ─────────────────────────────────────────────────────────── */
+.mc-submit-btn {
+  width: 100%;
+  padding: 13px 24px;
+  background: #6366f1;
+  color: #ffffff;
+  border: none;
+  border-radius: 9px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
+  outline: none;
+}
+
+.mc-submit-btn:hover:not(:disabled) {
+  background: #4f46e5;
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
+  transform: translateY(-1px);
+}
+
+.mc-submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.mc-submit-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.mc-btn-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+/* ── Error banner ──────────────────────────────────────────────────────────── */
+.mc-error-banner {
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: #fca5a5;
+  line-height: 1.4;
+  animation: mc-fade-in 0.2s ease;
+}
+
+/* ── Success state ─────────────────────────────────────────────────────────── */
+.mc-success-wrap {
+  text-align: center;
+  padding: 30px 20px 16px;
+  animation: mc-fade-in 0.3s ease;
+}
+
+.mc-success-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(34, 197, 94, 0.15);
+  border: 2px solid rgba(34, 197, 94, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.mc-success-icon svg {
+  width: 28px;
+  height: 28px;
+  color: #22c55e;
+}
+
+.mc-success-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #f8fafc;
+  margin: 0 0 6px;
+}
+
+.mc-success-sub {
+  font-size: 13.5px;
+  color: #94a3b8;
+  margin: 0 0 24px;
+}
+
+.mc-done-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 11px 36px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
+}
+
+.mc-done-btn:hover {
+  background: #4f46e5;
+  transform: translateY(-1px);
+}
+
+/* ── Powered by ────────────────────────────────────────────────────────────── */
+.mc-powered-by {
+  text-align: center;
+  padding: 8px 0 16px;
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.mc-powered-by a {
+  color: #94a3b8;
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.15s ease;
+}
+
+.mc-powered-by a:hover {
+  color: #818cf8;
+}
+
+/* ── Animations ────────────────────────────────────────────────────────────── */
+@keyframes mc-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes mc-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   LIGHT THEME (High Contrast & Clean)
+   ══════════════════════════════════════════════════════════════════════════════ */
+
+[data-theme='light'] .mc-backdrop {
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+[data-theme='light'] .mc-modal {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  color: #0f172a;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme='light'] .mc-close-btn {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  color: #64748b;
+}
+
+[data-theme='light'] .mc-close-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+[data-theme='light'] .mc-title {
+  color: #0f172a;
+}
+
+[data-theme='light'] .mc-subtitle {
+  color: #64748b;
+}
+
+/* ── Light: Card area ─────────────────────────────────────────────────────── */
+[data-theme='light'] .mc-card-wrapper {
+  background: #ffffff;
+  border: 1.5px solid #cbd5e1;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+[data-theme='light'] .mc-card-wrapper:focus-within {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+[data-theme='light'] .mc-loading-text {
+  color: #64748b;
+}
+
+[data-theme='light'] .mc-spinner {
+  border-color: rgba(99, 102, 241, 0.2);
+  border-top-color: #6366f1;
+}
+
+[data-theme='light'] .mc-error-banner {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #dc2626;
+}
+
+[data-theme='light'] .mc-success-icon {
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+}
+
+[data-theme='light'] .mc-success-icon svg {
+  color: #16a34a;
+}
+
+[data-theme='light'] .mc-success-title {
+  color: #0f172a;
+}
+
+[data-theme='light'] .mc-success-sub {
+  color: #64748b;
+}
+
+[data-theme='light'] .mc-powered-by {
+  color: #94a3b8;
+}
+
+[data-theme='light'] .mc-powered-by a {
+  color: #6366f1;
+}
+
+[data-theme='light'] .mc-powered-by a:hover {
+  color: #4f46e5;
+}
+`,f={dev:"http://3.108.128.110:5000",demo:"https://qa-payments.mygigsters.com.au",prod:"https://prod-payments.mygigsters.com.au"},w={dev:"demo",demo:"demo",prod:"prod"};class h{constructor(){this.config=null,this.api=null,this.renderer=null,this.host=null,this.shadowRoot=null,this.cardElement=null,this.clientSecret=null,this.authToken=null,this.tokenExpiresAt=null,this.airwallexClientId=null,this.isInitialized=!1,this.isSubmitting=!1,this._handleKeyDown=this._handleKeyDown.bind(this)}async init(t){try{if(!t)throw new Error("Configuration object is required for MygigstersCard.init()");if(!t.apiKey)throw new Error("apiKey is required");if(!t.apiSecret)throw new Error("apiSecret is required");if(!t.customerId)throw new Error("customerId is required");const e=t.myGigsterId||t.accountId;if(!e)throw new Error("myGigsterId is required");if(!t.containerId)throw new Error("containerId is required");if(!document.getElementById(t.containerId))throw new Error(`Container element with ID '${t.containerId}' not found`);let o=t.env||"demo";if(o==="qa"&&(o="demo"),!f[o])throw new Error(`Unknown env "${o}". Use "dev", "demo", or "prod".`);const s=t.baseUrl||f[o];this.config={mode:"dark",onSuccess:()=>{},onError:l=>console.error("MyGigsters Card SDK Error:",l),onClose:()=>{},...t,myGigsterId:e,accountId:e,env:o,baseUrl:s};const r=document.getElementById("mygigsters-card-sdk-host");r?.parentNode&&r.parentNode.removeChild(r),this.api=new g(this.config.baseUrl),this.host=document.createElement("div"),this.host.id="mygigsters-card-sdk-host",this.host.style.cssText="display:block;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:2147483647;pointer-events:auto;",this.shadowRoot=this.host.attachShadow({mode:"closed"});const c=document.createElement("style");c.textContent=y,this.shadowRoot.appendChild(c);const n=document.createElement("div");n.id="mc-theme-container",n.setAttribute("data-theme",this.config.mode==="light"?"light":"dark"),this.shadowRoot.appendChild(n),document.body.appendChild(this.host),this.renderer=new b(this.shadowRoot,{onClose:()=>this.handleClose(),onSubmit:()=>this.handleSubmit()}),this.renderer.render(),this.isInitialized=!0,this.show(),window.addEventListener("keydown",this._handleKeyDown),await this.authenticate(),await this._initializeCard()}catch(e){throw this.renderer&&this.renderer.showInitError(e.message||"Initialization failed"),this.config?.onError&&this.config.onError(e),e}}_handleKeyDown(t){t.key==="Escape"&&this.isInitialized&&this.handleClose()}async authenticate(){try{console.info(`[MyGigsters Card SDK] Authenticating in "${this.config.env}" mode → ${this.config.baseUrl}`);const t=await this.api.authenticate(this.config.apiKey,this.config.apiSecret);this.authToken=t.token,this.airwallexClientId=t.clientId,t.expiresIn&&(this.tokenExpiresAt=Date.now()+t.expiresIn*1e3),console.info("[MyGigsters Card SDK] Authentication successful."),(this.config.env==="demo"||this.config.env==="dev")&&console.info(`ℹ️ Connected to [${this.config.env.toUpperCase()}] backend.`)}catch(t){const e=t.message||"";throw e.includes("401")||e.toLowerCase().includes("unauthorized")?new Error("Invalid API credentials: Please check your apiKey and apiSecret."):new Error(`Authentication failed: ${e}`)}}handleClose(){const t=this.config?.onClose;if(this.destroy(),t)try{t()}catch(e){console.error("Error in onClose callback:",e)}}async handleSubmit(){if(!this.isSubmitting&&this.renderer.state.cardComplete){this.isSubmitting=!0,this.renderer.setSubmitting(!0),this.renderer.setError("");try{const e=(await p.createPaymentConsent({customer_id:this.config.customerId,client_secret:this.clientSecret,currency:"AUD",element:this.cardElement,requires_cvc:!1,next_triggered_by:"merchant"})).payment_consent_id;if(!e)throw new Error("Failed to create payment consent from card element");const i=this.config.apiKey&&this.config.apiSecret?`Basic ${btoa(`${this.config.apiKey}:${this.config.apiSecret}`)}`:this.authToken?`Bearer ${this.authToken}`:null,s={...await this.api.saveConsent(this.config.customerId,e,i),paymentConsentId:e,customerId:this.config.customerId,myGigsterId:this.config.myGigsterId,accountId:this.config.accountId,timestamp:new Date().toISOString(),event:"card.saved"};this.renderer.showSuccess(s),this.config?.onSuccess&&this.config.onSuccess(s)}catch(t){const e=t.message||"Payment could not be completed. Please check your card details and try again.";this.renderer.setError(e),this.renderer.setSubmitting(!1),this.config?.onError&&this.config.onError(t)}finally{this.isSubmitting=!1}}}async _initializeCard(){try{const t=this.config.apiKey&&this.config.apiSecret?`Basic ${btoa(`${this.config.apiKey}:${this.config.apiSecret}`)}`:this.authToken?`Bearer ${this.authToken}`:null,{clientSecret:e}=await this.api.getClientSecret(this.config.customerId,this.config.accountId,t);this.clientSecret=e,await p.loadAirwallex();const i={env:w[this.config.env]||"demo",origin:window.location.origin};this.airwallexClientId&&(i.clientId=this.airwallexClientId),p.init(i);const o=this.config.mode==="light",s={color:o?"#0f172a":"#ffffff",fontSize:"15px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',"::placeholder":{color:o?"#94a3b8":"rgba(255, 255, 255, 0.45)",fontSize:"15px"}},r=p.createElement("card",{style:{base:s}});this.cardElement=r,this.renderer.setCardLoaded(),await new Promise(n=>setTimeout(n,0));const c=this.shadowRoot.querySelector("#card-root");if(!c)throw new Error("Card mount point not found");try{r.mount(c)}catch{r.mount("#card-root")}this.renderer.markCardMounted(),r.on("change",n=>{const l=n?.detail?.complete||!1;this.renderer.setCardComplete(l)})}catch(t){const e=t.message||"Failed to load card elements";this.renderer.showInitError(e),this.config?.onError&&this.config.onError(t)}}show(){if(!this.isInitialized)throw new Error("SDK not initialized. Call init() first.");this.host&&(this.host.style.display="block",this.host.style.width="100vw",this.host.style.height="100vh",this.host.style.pointerEvents="auto")}hide(){this.host&&(this.host.style.display="none",this.host.style.width="0",this.host.style.height="0",this.host.style.pointerEvents="none")}setTheme(t){if(!this.shadowRoot)return;const e=this.shadowRoot.querySelector("#mc-theme-container");e&&e.setAttribute("data-theme",t==="light"?"light":"dark"),this.config&&(this.config.mode=t)}destroy(){if(window.removeEventListener("keydown",this._handleKeyDown),this.cardElement)try{this.cardElement.unmount()}catch{}this.renderer&&this.renderer.destroy(),this.host?.parentNode&&this.host.parentNode.removeChild(this.host);const t=document.getElementById("mygigsters-card-sdk-host");t?.parentNode&&t.parentNode.removeChild(t),this.isInitialized=!1,this.isSubmitting=!1,this.config=null,this.api=null,this.renderer=null,this.host=null,this.shadowRoot=null,this.cardElement=null,this.clientSecret=null,this.authToken=null,this.tokenExpiresAt=null,this.airwallexClientId=null}}let a=null;const u={init:async d=>(a&&(a.destroy(),a=null),a=new h,await a.init(d),a),show:()=>{a?.show()},hide:()=>{a?.hide()},destroy:()=>{a&&(a.destroy(),a=null)},setTheme:d=>{a?.setTheme(d)},getInstance:()=>a};typeof window<"u"&&(window.MygigstersCard=u,window.MygigstersCardSDK=h,document.addEventListener("DOMContentLoaded",()=>{const d=document.querySelector('script[data-mygigsters-config][src*="card-sdk"]');if(d)try{const t=JSON.parse(d.dataset.mygigstersConfig);window.MygigstersCard.init(t).catch(e=>{console.error("MyGigsters Card SDK auto-init failed:",e)})}catch(t){console.error("Failed to parse MyGigsters Card SDK config:",t)}}));typeof window<"u"&&(window.MygigstersCard=u,window.MygigstersCardSDK=h);exports.MygigstersCard=u;exports.MygigstersCardSDK=h;exports.default=h;