@mygigsters/card-sdk 1.0.1 → 1.0.3

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import h from "airwallex-payment-elements";
-class g {
+import m from "airwallex-payment-elements";
+class y {
   constructor(t) {
     this.baseUrl = t.replace(/\/+$/, "");
   }
@@ -12,69 +12,61 @@ class g {
    * @param {object} [extraHeaders] - Additional headers
    * @returns {Promise<object>}
    */
-  async _post(t, e, i = null, o = {}) {
-    const s = {
+  async _post(t, e, o = null, r = {}) {
+    const i = {
       "Content-Type": "application/json",
-      ...o
+      ...r
     };
-    i && (s.Authorization = i.startsWith("Basic ") || i.startsWith("Bearer ") ? i : `Bearer ${i}`);
-    const r = await fetch(`${this.baseUrl}/api/v1${t}`, {
+    o && (i.Authorization = o.startsWith("Basic ") || o.startsWith("Bearer ") ? o : `Bearer ${o}`);
+    const s = await fetch(`${this.baseUrl}/api/v1${t}`, {
       method: "POST",
-      headers: s,
+      headers: i,
       body: JSON.stringify(e)
-    }), c = await r.text();
-    let n = null;
-    if (c && c.trim().length > 0)
+    }), n = await s.text();
+    let a = null;
+    if (n && n.trim().length > 0)
       try {
-        n = JSON.parse(c);
+        a = JSON.parse(n);
       } catch {
-        n = null;
+        a = null;
       }
-    if (!r.ok) {
-      const l = n && (n.message || n.error) || c || r.statusText || `HTTP ${r.status}`;
+    if (!s.ok) {
+      const l = a && (a.message || a.error) || n || s.statusText || `HTTP ${s.status}`;
       throw new Error(l);
     }
-    return n ?? {};
+    return a ?? {};
   }
-  // ── 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 }>}
+   * Makes a JSON GET request.
+   * @param {string} path           - API path (appended to baseUrl + /api/v1)
+   * @param {string|null} [token]   - Optional Bearer token
+   * @param {object} [extraHeaders] - Additional headers
+   * @returns {Promise<object>}
    */
-  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;
+  async _get(t, e = null, o = {}) {
+    const r = {
+      "Content-Type": "application/json",
+      ...o
+    };
+    e && (r.Authorization = e.startsWith("Basic ") || e.startsWith("Bearer ") ? e : `Bearer ${e}`);
+    const i = await fetch(`${this.baseUrl}/api/v1${t}`, {
+      method: "GET",
+      headers: r
+    }), s = await i.text();
+    let n = null;
     if (s && s.trim().length > 0)
       try {
-        r = JSON.parse(s);
+        n = JSON.parse(s);
       } catch {
-        r = null;
+        n = null;
       }
-    if (!o.ok) {
-      const c = r && (r.message || r.error) || s || o.statusText || `HTTP ${o.status}`;
-      throw new Error(c);
+    if (!i.ok) {
+      const a = n && (n.message || n.error) || s || i.statusText || `HTTP ${i.status}`;
+      throw new Error(a);
     }
-    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
-    };
+    return n ?? {};
   }
+  // ── Public methods ────────────────────────────────────────────────────────
   /**
    * Retrieve a client secret for Airwallex card element initialization.
    *
@@ -86,23 +78,23 @@ class g {
    * @param {string|null} [token] - Bearer token if authenticated
    * @returns {Promise<{ clientSecret: string }>}
    */
-  async getClientSecret(t, e, i = null) {
+  async getClientSecret(t, e, o = null) {
     console.log("🔐 CardAPI.getClientSecret()", {
       customerId: t,
       accountId: e,
-      hasToken: !!i
+      hasToken: !!o
     });
-    const o = await this._post(
+    const r = 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)
+      o
+    ), i = r.client_secret || r.clientSecret || r?.data?.client_secret || r?.data?.clientSecret;
+    if (!i)
       throw new Error("Failed to retrieve client secret from server");
-    return { clientSecret: s };
+    return { clientSecret: i };
   }
   /**
    * Save the payment consent after Airwallex createPaymentConsent succeeds.
@@ -115,16 +107,45 @@ class g {
    * @param {string|null} [token] - Bearer token if authenticated
    * @returns {Promise<object>}
    */
-  async saveConsent(t, e, i = null) {
+  async saveConsent(t, e, o = null) {
     return this._post(
       "/customer/save-consent",
       {
         customerId: t,
         paymentConsentId: e
       },
-      i
+      o
     );
   }
+  /**
+   * Fetch profile details to verify user identity (myGigsterId).
+   *
+   * GET /api/v1/client/profile
+   * Response schema: { success: true, status: 200, data: { myGigsterId: "..." } }
+   *
+   * @param {string|null} [token] - Bearer token if authenticated
+   * @returns {Promise<{ myGigsterId: string, data: object, raw: object }>}
+   */
+  async profileDetails(t = null) {
+    console.log("👤 CardAPI.profileDetails() calling /client/profile", { hasToken: !!t });
+    let e = null;
+    try {
+      e = await this._get("/client/profile", t);
+    } catch (r) {
+      if (r.message && (r.message.includes("405") || r.message.includes("Method Not Allowed")))
+        e = await this._post("/client/profile", {}, t);
+      else
+        throw r;
+    }
+    const o = e?.data?.myGigsterId || e?.data?.mygigsterId || e?.accountId;
+    if (!o)
+      throw new Error("Failed to retrieve myGigsterId from profile API response");
+    return {
+      myGigsterId: o,
+      data: e?.data || e,
+      raw: e
+    };
+  }
 }
 const p = {
   close: `<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -134,7 +155,7 @@ const p = {
     <path stroke-linecap="round" stroke-linejoin="round" d="M20 6L9 17l-5-5"/>
   </svg>`
 };
-class b {
+class w {
   constructor(t, e) {
     this.shadowRoot = t, this.callbacks = e, this.state = {
       loading: !0,
@@ -200,21 +221,21 @@ class b {
     `, 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();
+    this.shadowRoot.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach((r) => {
+      r.addEventListener("click", (i) => {
+        i.preventDefault(), i.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());
+    e && e.addEventListener("click", (r) => {
+      r.target === e && (r.preventDefault(), r.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());
+    const o = this.shadowRoot.querySelector("#mc-submit-btn");
+    o && o.addEventListener("click", (r) => {
+      r.preventDefault(), r.stopPropagation(), this.callbacks.onSubmit();
+    }), this.shadowRoot.addEventListener("click", (r) => {
+      const i = r.target;
+      i && (i.closest(".mc-close-btn") || i.closest("#mc-close-btn") || i.closest(".mc-dismiss-btn") || i.closest("#mc-dismiss-btn")) && (r.preventDefault(), r.stopPropagation(), this.callbacks.onClose());
     });
   }
   // ── Surgical state patches (safe after card mount) ──────────────────────
@@ -224,8 +245,8 @@ class b {
    */
   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");
+    const t = this.shadowRoot.querySelector("#mc-loading"), e = this.shadowRoot.querySelector("#mc-card-wrapper"), o = this.shadowRoot.querySelector("#mc-submit-btn");
+    t && (t.style.display = "none"), e && (e.style.display = "block"), o && (o.style.display = "flex");
   }
   /**
    * Mark the Airwallex card as mounted — after this, no full re-renders.
@@ -261,18 +282,45 @@ class b {
     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.
+   * Show an initialization error when the SDK fails to load or verification fails.
+   * Replaces the modal body with a production-grade error card.
    * Only safe to call BEFORE the card element is mounted.
    */
-  showInitError(t) {
+  showInitError(t, e = "Verification Failed") {
     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>
+    const o = this.shadowRoot.querySelector(".mc-modal");
+    if (!o) return;
+    o.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-error-wrap">
+          <div class="mc-error-icon">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+              <circle cx="12" cy="12" r="10" stroke="#ef4444"/>
+              <line x1="12" y1="8" x2="12" y2="12" stroke="#ef4444"/>
+              <line x1="12" y1="16" x2="12.01" y2="16" stroke="#ef4444"/>
+            </svg>
+          </div>
+          <h2 class="mc-error-title">${this._escapeHtml(e)}</h2>
+          <div class="mc-error-detail">${this._escapeHtml(t)}</div>
+          <p class="mc-error-sub">SDK initialization has been blocked. Please verify your credentials and try again.</p>
+          <button class="mc-dismiss-btn" id="mc-dismiss-btn" type="button">Close</button>
         </div>
-      `);
+      </div>
+
+      <div class="mc-powered-by">
+        Powered by <a href="https://mygigsters.com.au" target="_blank" rel="noopener">MyGigsters</a>
+      </div>
+    `, o.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach((i) => {
+      i.addEventListener("click", (s) => {
+        s.preventDefault(), s.stopPropagation(), this.callbacks.onClose();
+      });
+    });
+    const r = o.querySelector("#mc-dismiss-btn");
+    r && r.addEventListener("click", (i) => {
+      i.preventDefault(), i.stopPropagation(), this.callbacks.onClose();
+    });
   }
   /**
    * Replace the entire modal body with a success state.
@@ -296,12 +344,12 @@ class b {
       <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.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach((o) => {
+      o.addEventListener("click", (r) => {
+        r.preventDefault(), r.stopPropagation(), this.callbacks.onClose();
       });
-    }), e.querySelector("#mc-done-btn")?.addEventListener("click", (i) => {
-      i.preventDefault(), i.stopPropagation(), this.callbacks.onClose();
+    }), e.querySelector("#mc-done-btn")?.addEventListener("click", (o) => {
+      o.preventDefault(), o.stopPropagation(), this.callbacks.onClose();
     }));
   }
   // ── Helpers ─────────────────────────────────────────────────────────────
@@ -315,7 +363,7 @@ class b {
     t && (t.innerHTML = ""), this._cardMounted = !1;
   }
 }
-const y = `
+const x = `
 /* ── Reset inside shadow DOM ───────────────────────────────────────────────── */
 *, *::before, *::after {
   box-sizing: border-box;
@@ -585,6 +633,79 @@ const y = `
   animation: mc-fade-in 0.2s ease;
 }
 
+/* ── Error state (init / verification failure) ─────────────────────────────── */
+.mc-error-wrap {
+  text-align: center;
+  padding: 30px 20px 16px;
+  animation: mc-fade-in 0.3s ease;
+}
+
+.mc-error-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(239, 68, 68, 0.15);
+  border: 2px solid rgba(239, 68, 68, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.mc-error-icon svg {
+  width: 28px;
+  height: 28px;
+  color: #ef4444;
+}
+
+.mc-error-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #f8fafc;
+  margin: 0 0 8px;
+}
+
+.mc-error-detail {
+  font-size: 13px;
+  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.25);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin: 0 0 12px;
+  word-break: break-word;
+  line-height: 1.45;
+}
+
+.mc-error-sub {
+  font-size: 13px;
+  color: #94a3b8;
+  margin: 0 0 20px;
+  line-height: 1.4;
+}
+
+.mc-dismiss-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 11px 36px;
+  background: #ef4444;
+  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(239, 68, 68, 0.35);
+}
+
+.mc-dismiss-btn:hover {
+  background: #dc2626;
+  transform: translateY(-1px);
+}
+
 /* ── Success state ─────────────────────────────────────────────────────────── */
 .mc-success-wrap {
   text-align: center;
@@ -744,6 +865,37 @@ const y = `
   color: #dc2626;
 }
 
+[data-theme='light'] .mc-error-icon {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+[data-theme='light'] .mc-error-icon svg {
+  color: #dc2626;
+}
+
+[data-theme='light'] .mc-error-title {
+  color: #0f172a;
+}
+
+[data-theme='light'] .mc-error-detail {
+  background: #fff5f5;
+  border-color: #fed7d7;
+  color: #c53030;
+}
+
+[data-theme='light'] .mc-error-sub {
+  color: #64748b;
+}
+
+[data-theme='light'] .mc-dismiss-btn {
+  background: #dc2626;
+}
+
+[data-theme='light'] .mc-dismiss-btn:hover {
+  background: #b91c1c;
+}
+
 [data-theme='light'] .mc-success-icon {
   background: #f0fdf4;
   border-color: #bbf7d0;
@@ -772,19 +924,19 @@ const y = `
 [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
+`, g = {
+  dev: "http://localhost:5000",
+  // ← Remote dev server (uncomment to use)
   demo: "https://qa-payments.mygigsters.com.au",
   // QA Demo environment
   prod: "https://prod-payments.mygigsters.com.au"
   // Production environment
-}, w = {
+}, v = {
   dev: "demo",
   demo: "demo",
   prod: "prod"
 };
-class m {
+class f {
   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);
   }
@@ -792,91 +944,113 @@ class m {
   // PUBLIC: init
   // ─────────────────────────────────────────────────────────────────────────
   /**
-   * Initialize the Card SDK.
+   * Initialize the Card SDK using a pre-fetched token from GET /api/v1/client/me.
+   *
+   * ── FLOW B — Pre-fetched Token ─────────────────────────────────────────────
+   *   1. Call GET /api/v1/client/me on your server or frontend using Basic Auth:
+   *      Authorization: Basic base64(apiKey:apiSecret)
+   *   2. Extract `token` and `myGigsterId` from the response `data`.
+   *   3. Pass `token` and `myGigsterId` directly to `MygigstersCard.init()`.
+   *
+   *   try {
+   *     await MygigstersCard.init({
+   *       containerId:  'card-mount',
+   *       token:        resolvedToken,   // ← from /client/me (no apiKey/apiSecret here!)
+   *       customerId:   customerId,
+   *       myGigsterId:  myGigsterId,
+   *       env:          env,
+   *       mode:         'dark',
+   *       onSuccess:    (res) => console.log('Card saved!', res),
+   *     });
+   *   } catch (err) {
+   *     console.error(err);
+   *   }
    *
-   * @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
+   * @param {object}              config
+   * @param {string}              config.token         - Pre-fetched Bearer token from GET /client/me (required)
+   * @param {string}              config.customerId    - Airwallex Customer ID (required)
+   * @param {string}              [config.myGigsterId] - MyGigster ID from /client/me (required)
+   * @param {string}              [config.accountId]   - Alias for myGigsterId
+   * @param {string}              config.containerId   - ID of the DOM container (required)
+   * @param {'dev'|'demo'|'prod'} [config.env='demo']  - Environment
+   * @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.token)
+        throw new Error(
+          "token is required. Call GET /api/v1/client/me first to get the token, then pass it to MygigstersCard.init()"
+        );
       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");
+      const e = t.myGigsterId || t.accountId;
+      if (!e)
+        throw new Error(
+          "myGigsterId is required. Pass myGigsterId returned by GET /api/v1/client/me"
+        );
       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 = {
+      let r = t.env || "demo";
+      if (r === "qa" && (r = "demo"), !g[r])
+        throw new Error(`Unknown env "${r}". Use "dev", "demo", or "prod".`);
+      const i = t.baseUrl || g[r];
+      this.api = new y(i), this.authToken = t.token, this.config = {
         mode: "dark",
         onSuccess: () => {
         },
-        onError: (l) => console.error("MyGigsters Card SDK Error:", l),
+        onError: (h) => console.error("MyGigsters Card SDK Error:", h),
         onClose: () => {
         },
         ...t,
         myGigsterId: e,
         accountId: e,
-        env: o,
-        baseUrl: s
+        env: r,
+        baseUrl: i
       };
-      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(
+      const s = document.getElementById("mygigsters-card-sdk-host");
+      s?.parentNode && s.parentNode.removeChild(s), 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 n = document.createElement("style");
+      n.textContent = x, this.shadowRoot.appendChild(n);
+      const a = document.createElement("div");
+      a.id = "mc-theme-container", a.setAttribute(
         "data-theme",
         this.config.mode === "light" ? "light" : "dark"
-      ), this.shadowRoot.appendChild(n), document.body.appendChild(this.host), this.renderer = new b(this.shadowRoot, {
+      ), this.shadowRoot.appendChild(a), document.body.appendChild(this.host), this.renderer = new w(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();
+      }), this.renderer.render(), this.isInitialized = !0, this.show(), window.addEventListener("keydown", this._handleKeyDown);
+      const l = this.authToken ? `Bearer ${this.authToken}` : null;
+      console.info("[MyGigsters Card SDK] Verifying myGigsterId via profileDetails API...");
+      const u = (await this.api.profileDetails(l))?.myGigsterId;
+      if (!u)
+        throw new Error(
+          "Verification failed: Profile API response did not contain a valid myGigsterId."
+        );
+      if (String(u).trim() !== String(e).trim()) {
+        const h = new Error(
+          "Security check failed: The provided myGigsterId does not match the authenticated client profile. SDK initialization blocked."
+        );
+        throw h.code = "MYGIGSTER_ID_MISMATCH", h;
+      }
+      console.info("[MyGigsters Card SDK] myGigsterId verified successfully."), console.info(`[MyGigsters Card SDK] Initialized in "${r}" mode → ${i}`), await this._initializeCard();
     } catch (e) {
-      throw this.renderer && this.renderer.showInitError(e.message || "Initialization failed"), this.config?.onError && this.config.onError(e), e;
+      if (this.renderer) {
+        const o = e.code === "MYGIGSTER_ID_MISMATCH" ? "Security Verification Failed" : "Initialization Failed";
+        this.renderer.showInitError(e.message || "Initialization failed", o);
+      }
+      throw 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() {
@@ -892,7 +1066,7 @@ class m {
     if (!this.isSubmitting && this.renderer.state.cardComplete) {
       this.isSubmitting = !0, this.renderer.setSubmitting(!0), this.renderer.setError("");
       try {
-        const e = (await h.createPaymentConsent({
+        const e = (await m.createPaymentConsent({
           customer_id: this.config.customerId,
           client_secret: this.clientSecret,
           currency: "AUD",
@@ -902,11 +1076,11 @@ class m {
         })).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 = {
+        const o = this.authToken ? `Bearer ${this.authToken}` : null, i = {
           ...await this.api.saveConsent(
             this.config.customerId,
             e,
-            i
+            o
           ),
           paymentConsentId: e,
           customerId: this.config.customerId,
@@ -915,7 +1089,7 @@ class m {
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           event: "card.saved"
         };
-        this.renderer.showSuccess(s), this.config?.onSuccess && this.config.onSuccess(s);
+        this.renderer.showSuccess(i), this.config?.onSuccess && this.config.onSuccess(i);
       } 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);
@@ -929,38 +1103,38 @@ class m {
   // ─────────────────────────────────────────────────────────────────────────
   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(
+      const t = 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",
+      this.clientSecret = e, await m.loadAirwallex();
+      const o = {
+        env: v[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",
+      this.airwallexClientId && (o.clientId = this.airwallexClientId), m.init(o);
+      const r = this.config.mode === "light", i = {
+        color: r ? "#0f172a" : "#ffffff",
         fontSize: "15px",
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         "::placeholder": {
-          color: o ? "#94a3b8" : "rgba(255, 255, 255, 0.45)",
+          color: r ? "#94a3b8" : "rgba(255, 255, 255, 0.45)",
           fontSize: "15px"
         }
-      }, r = h.createElement("card", {
-        style: { base: s }
+      }, s = m.createElement("card", {
+        style: { base: i }
       });
-      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");
+      this.cardElement = s, this.renderer.setCardLoaded(), await new Promise((a) => setTimeout(a, 0));
+      const n = this.shadowRoot.querySelector("#card-root");
+      if (!n) throw new Error("Card mount point not found");
       try {
-        r.mount(c);
+        s.mount(n);
       } catch {
-        r.mount("#card-root");
+        s.mount("#card-root");
       }
-      this.renderer.markCardMounted(), r.on("change", (n) => {
-        const l = n?.detail?.complete || !1;
+      this.renderer.markCardMounted(), s.on("change", (a) => {
+        const l = a?.detail?.complete || !1;
         this.renderer.setCardComplete(l);
       });
     } catch (t) {
@@ -999,24 +1173,24 @@ class m {
     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),
+let c = null;
+const b = {
+  init: async (d) => (c && (c.destroy(), c = null), c = new f(), await c.init(d), c),
   show: () => {
-    a?.show();
+    c?.show();
   },
   hide: () => {
-    a?.hide();
+    c?.hide();
   },
   destroy: () => {
-    a && (a.destroy(), a = null);
+    c && (c.destroy(), c = null);
   },
   setTheme: (d) => {
-    a?.setTheme(d);
+    c?.setTheme(d);
   },
-  getInstance: () => a
+  getInstance: () => c
 };
-typeof window < "u" && (window.MygigstersCard = u, window.MygigstersCardSDK = m, document.addEventListener("DOMContentLoaded", () => {
+typeof window < "u" && (window.MygigstersCard = b, window.MygigstersCardSDK = f, document.addEventListener("DOMContentLoaded", () => {
   const d = document.querySelector(
     'script[data-mygigsters-config][src*="card-sdk"]'
   );
@@ -1030,9 +1204,9 @@ typeof window < "u" && (window.MygigstersCard = u, window.MygigstersCardSDK = m,
       console.error("Failed to parse MyGigsters Card SDK config:", t);
     }
 }));
-typeof window < "u" && (window.MygigstersCard = u, window.MygigstersCardSDK = m);
+typeof window < "u" && (window.MygigstersCard = b, window.MygigstersCardSDK = f);
 export {
-  u as MygigstersCard,
-  m as MygigstersCardSDK,
-  m as default
+  b as MygigstersCard,
+  f as MygigstersCardSDK,
+  f as default
 };