@mygigsters/card-sdk 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,1038 @@
+import h from "airwallex-payment-elements";
+class g {
+  constructor(t) {
+    this.baseUrl = t.replace(/\/+$/, "");
+  }
+  // ── Internal helpers ──────────────────────────────────────────────────────
+  /**
+   * Makes a JSON POST request.
+   * @param {string} path           - API path (appended to baseUrl + /api/v1)
+   * @param {object} body           - Request body
+   * @param {string|null} [token]   - Optional Bearer token
+   * @param {object} [extraHeaders] - Additional headers
+   * @returns {Promise<object>}
+   */
+  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 ?? {};
+  }
+  // ── Public methods ────────────────────────────────────────────────────────
+  /**
+   * Authenticate using apiKey and apiSecret via /api/v1/sdk-initialization.
+   * Mirrors BeneficiaryAPI authentication architecture.
+   *
+   * @param {string} apiKey    - UUID-style API key
+   * @param {string} apiSecret - One-time API secret
+   * @returns {Promise<{ token: string, clientId: string, expiresIn: number, tokenType: string }>}
+   */
+  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
+    };
+  }
+  /**
+   * Retrieve a client secret for Airwallex card element initialization.
+   *
+   * POST /api/v1/customer/client-secret
+   * Body: { customerId, accountId }
+   *
+   * @param {string} customerId
+   * @param {string} accountId
+   * @param {string|null} [token] - Bearer token if authenticated
+   * @returns {Promise<{ clientSecret: string }>}
+   */
+  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 };
+  }
+  /**
+   * Save the payment consent after Airwallex createPaymentConsent succeeds.
+   *
+   * POST /api/v1/customer/save-consent
+   * Body: { customerId, paymentConsentId }
+   *
+   * @param {string} customerId
+   * @param {string} paymentConsentId
+   * @param {string|null} [token] - Bearer token if authenticated
+   * @returns {Promise<object>}
+   */
+  async saveConsent(t, e, i = null) {
+    return this._post(
+      "/customer/save-consent",
+      {
+        customerId: t,
+        paymentConsentId: e
+      },
+      i
+    );
+  }
+}
+const p = {
+  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;
+  }
+  // ── Container helper ────────────────────────────────────────────────────
+  _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;
+  }
+  // ══════════════════════════════════════════════════════════════════════════
+  // SINGLE-STEP CARD FORM
+  // ══════════════════════════════════════════════════════════════════════════
+  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">${p.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());
+    });
+  }
+  // ── Surgical state patches (safe after card mount) ──────────────────────
+  /**
+   * Call when Airwallex card element is ready and about to be mounted.
+   * Hides the spinner and reveals the card wrapper + submit button.
+   */
+  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");
+  }
+  /**
+   * Mark the Airwallex card as mounted — after this, no full re-renders.
+   */
+  markCardMounted() {
+    this._cardMounted = !0;
+  }
+  /**
+   * Enable/disable the submit button based on card completeness.
+   * Surgical patch — only touches the button element.
+   */
+  setCardComplete(t) {
+    this.state.cardComplete = t;
+    const e = this.shadowRoot.querySelector("#mc-submit-btn");
+    e && (e.disabled = !t || this.state.submitting);
+  }
+  /**
+   * Show/hide the submitting state on the button.
+   * Surgical patch — only touches the button element.
+   */
+  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");
+  }
+  /**
+   * Show/hide an error banner inside the modal.
+   * Surgical patch — never destroys the Airwallex iframe.
+   */
+  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"));
+  }
+  /**
+   * Show an initialization error when the SDK fails to load.
+   * Only safe to call BEFORE the card element is mounted.
+   */
+  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>
+      `);
+  }
+  /**
+   * Replace the entire modal body with a success state.
+   * This is safe because we no longer need the Airwallex iframe.
+   */
+  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">${p.close}</button>
+
+      <div class="mc-body">
+        <div class="mc-success-wrap">
+          <div class="mc-success-icon">${p.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();
+    }));
+  }
+  // ── Helpers ─────────────────────────────────────────────────────────────
+  _escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+  // ── Cleanup ─────────────────────────────────────────────────────────────
+  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",
+  // ← Comment this line when dev server is removed
+  demo: "https://qa-payments.mygigsters.com.au",
+  // QA Demo environment
+  prod: "https://prod-payments.mygigsters.com.au"
+  // Production environment
+}, w = {
+  dev: "demo",
+  demo: "demo",
+  prod: "prod"
+};
+class m {
+  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);
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // PUBLIC: init
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Initialize the Card SDK.
+   *
+   * @param {object}                    config
+   * @param {string}                    config.apiKey       - API key (required)
+   * @param {string}                    config.apiSecret    - API secret (required)
+   * @param {string}                    config.customerId   - Customer ID (required)
+   * @param {string}                    [config.myGigsterId]- MyGigster ID (required from frontend)
+   * @param {string}                    [config.accountId]  - Account ID (legacy alias for myGigsterId)
+   * @param {string}                    config.containerId  - ID of the DOM container
+   * @param {'dev'|'demo'|'prod'}       [config.env='demo'] - Environment ("dev" | "demo" | "prod")
+   * @param {string}                    [config.baseUrl]    - Custom base URL override
+   * @param {'light'|'dark'}            [config.mode='dark']- UI theme
+   * @param {function}                  [config.onSuccess]  - Callback on successful card save
+   * @param {function}                  [config.onError]    - Callback on error
+   * @param {function}                  [config.onClose]    - Callback when modal closes
+   */
+  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();
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // PUBLIC: authenticate
+  // ─────────────────────────────────────────────────────────────────────────
+  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}`);
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // HANDLERS
+  // ─────────────────────────────────────────────────────────────────────────
+  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 h.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: (/* @__PURE__ */ 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;
+      }
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // PRIVATE: Card initialization sequence
+  // ─────────────────────────────────────────────────────────────────────────
+  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 h.loadAirwallex();
+      const i = {
+        env: w[this.config.env] || "demo",
+        origin: window.location.origin
+      };
+      this.airwallexClientId && (i.clientId = this.airwallexClientId), h.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 = h.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);
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // PUBLIC: show / hide / destroy / setTheme / getInstance
+  // ─────────────────────────────────────────────────────────────────────────
+  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");
+  }
+  /**
+   * Update the theme after initialization.
+   * @param {'light'|'dark'} mode
+   */
+  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 m(), 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 = m, 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 = m);
+export {
+  u as MygigstersCard,
+  m as MygigstersCardSDK,
+  m as default
+};