@economist/web-apple-pay 0.1.1-beta.0 → 0.1.1-beta.1

package/dist/index.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1351,11 +1359,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
+      console.log("[web-apple-pay] createIfEnabled: no offer provided \u2192 null");
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      console.log("[web-apple-pay] createIfEnabled: excluded variant \u2192 null", { variant: offer.product?.variant });
       return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      console.log("[web-apple-pay] createIfEnabled: feature flag absent \u2192 null");
+      return null;
+    }
+    console.log("[web-apple-pay] createIfEnabled: creating button", { skuId: offer.sku_id, country, entryPoint });
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1423,7 +1439,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
+    console.log("[web-apple-pay] connectedCallback: element connected");
     if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
+      console.log("[web-apple-pay] connectedCallback: already rendering or rendered, skipping");
       return;
     }
     this.#rendering = true;
@@ -1450,6 +1468,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    console.log("[web-apple-pay] #run: starting render pipeline");
     try {
       if (await this.#checkAvailability()) return;
       if (await this.#checkSession()) return;
@@ -1468,9 +1487,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
+      console.log("[web-apple-pay] #checkAvailability: Apple Pay unavailable \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkAvailability: Apple Pay available");
     return false;
   }
   /**
@@ -1479,7 +1500,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
+    console.log("[web-apple-pay] #checkSession: session fetched", { loggedIn: this.#sessionData?.loggedIn, userType: this.#sessionData?.userType });
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      console.log("[web-apple-pay] #checkSession: ineligible user \u2192 hiding", { userType: this.#sessionData.userType });
       this.style.display = "none";
       return true;
     }
@@ -1488,14 +1511,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
+      console.log("[web-apple-pay] #checkOffer: no offer set \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkOffer: offer present", { skuId: this.#offer.sku_id });
     return false;
   }
   /** Captures the current page URL once at mount for reuse across the session lifetime. */
   #captureReturnUrl() {
     this.#returnUrl = captureOriginUrl();
+    console.log("[web-apple-pay] #captureReturnUrl:", this.#returnUrl);
   }
   /**
    * Computes supported billing countries once at mount.
@@ -1507,6 +1533,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#country,
       this.#offer.product?.variant ?? ""
     );
+    console.log("[web-apple-pay] #computeBillingCountries:", this.#supportedBillingCountries);
   }
   /**
    * Returns `true` (hide) when the wallet BFF reports Apple Pay is unavailable
@@ -1516,6 +1543,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     console.log("[web-apple-pay] #fetchAndCacheOptions: fetched payment options", { paymentOptions: this.#paymentOptions });
     if (!this.#paymentOptions?.options?.apple_pay) {
+      console.log("[web-apple-pay] #fetchAndCacheOptions: apple_pay not in options \u2192 hiding");
       this.style.display = "none";
       return true;
     }
@@ -1523,6 +1551,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
+    console.log("[web-apple-pay] #renderTemplate: rendering Apple Pay button", { skuId: this.#offer?.sku_id, country: this.#country });
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -1537,10 +1566,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.addEventListener("click", () => {
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
+      console.log("[web-apple-pay] apple-pay-confirmed received on document", { skuId, country });
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1555,6 +1585,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
+    console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
     if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
@@ -1568,24 +1599,31 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchSession() {
     try {
-      return await getExpressCheckoutSession();
-    } catch {
+      const session = await getExpressCheckoutSession();
+      console.log("[web-apple-pay] #fetchSession: success", { loggedIn: session.loggedIn, userType: session.userType });
+      return session;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchSession: failed, falling back to anonymous session", err);
       return null;
     }
   }
   async #fetchPaymentOptions() {
     try {
-      return await getPaymentOptions({
+      const options = await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-    } catch {
+      console.log("[web-apple-pay] #fetchPaymentOptions: success", { hasApplePay: !!options?.options?.apple_pay });
+      return options;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchPaymentOptions: failed", err);
       return null;
     }
   }
   #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    console.log("[web-apple-pay] #buildSessionParams", { skuId, country, userLoggedIn: sessionData.loggedIn });
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -1608,6 +1646,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     };
   }
   async #initiateApplePay(skuId, country) {
+    console.log("[web-apple-pay] #initiateApplePay: starting", { skuId, country });
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;

package/dist/src/apple-pay-button.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1340,11 +1348,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
+      console.log("[web-apple-pay] createIfEnabled: no offer provided \u2192 null");
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      console.log("[web-apple-pay] createIfEnabled: excluded variant \u2192 null", { variant: offer.product?.variant });
       return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      console.log("[web-apple-pay] createIfEnabled: feature flag absent \u2192 null");
+      return null;
+    }
+    console.log("[web-apple-pay] createIfEnabled: creating button", { skuId: offer.sku_id, country, entryPoint });
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1412,7 +1428,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
+    console.log("[web-apple-pay] connectedCallback: element connected");
     if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
+      console.log("[web-apple-pay] connectedCallback: already rendering or rendered, skipping");
       return;
     }
     this.#rendering = true;
@@ -1439,6 +1457,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    console.log("[web-apple-pay] #run: starting render pipeline");
     try {
       if (await this.#checkAvailability()) return;
       if (await this.#checkSession()) return;
@@ -1457,9 +1476,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
+      console.log("[web-apple-pay] #checkAvailability: Apple Pay unavailable \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkAvailability: Apple Pay available");
     return false;
   }
   /**
@@ -1468,7 +1489,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
+    console.log("[web-apple-pay] #checkSession: session fetched", { loggedIn: this.#sessionData?.loggedIn, userType: this.#sessionData?.userType });
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      console.log("[web-apple-pay] #checkSession: ineligible user \u2192 hiding", { userType: this.#sessionData.userType });
       this.style.display = "none";
       return true;
     }
@@ -1477,14 +1500,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
+      console.log("[web-apple-pay] #checkOffer: no offer set \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkOffer: offer present", { skuId: this.#offer.sku_id });
     return false;
   }
   /** Captures the current page URL once at mount for reuse across the session lifetime. */
   #captureReturnUrl() {
     this.#returnUrl = captureOriginUrl();
+    console.log("[web-apple-pay] #captureReturnUrl:", this.#returnUrl);
   }
   /**
    * Computes supported billing countries once at mount.
@@ -1496,6 +1522,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#country,
       this.#offer.product?.variant ?? ""
     );
+    console.log("[web-apple-pay] #computeBillingCountries:", this.#supportedBillingCountries);
   }
   /**
    * Returns `true` (hide) when the wallet BFF reports Apple Pay is unavailable
@@ -1505,6 +1532,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     console.log("[web-apple-pay] #fetchAndCacheOptions: fetched payment options", { paymentOptions: this.#paymentOptions });
     if (!this.#paymentOptions?.options?.apple_pay) {
+      console.log("[web-apple-pay] #fetchAndCacheOptions: apple_pay not in options \u2192 hiding");
       this.style.display = "none";
       return true;
     }
@@ -1512,6 +1540,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
+    console.log("[web-apple-pay] #renderTemplate: rendering Apple Pay button", { skuId: this.#offer?.sku_id, country: this.#country });
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -1526,10 +1555,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.addEventListener("click", () => {
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
+      console.log("[web-apple-pay] apple-pay-confirmed received on document", { skuId, country });
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1544,6 +1574,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
+    console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
     if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
@@ -1557,24 +1588,31 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchSession() {
     try {
-      return await getExpressCheckoutSession();
-    } catch {
+      const session = await getExpressCheckoutSession();
+      console.log("[web-apple-pay] #fetchSession: success", { loggedIn: session.loggedIn, userType: session.userType });
+      return session;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchSession: failed, falling back to anonymous session", err);
       return null;
     }
   }
   async #fetchPaymentOptions() {
     try {
-      return await getPaymentOptions({
+      const options = await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-    } catch {
+      console.log("[web-apple-pay] #fetchPaymentOptions: success", { hasApplePay: !!options?.options?.apple_pay });
+      return options;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchPaymentOptions: failed", err);
       return null;
     }
   }
   #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    console.log("[web-apple-pay] #buildSessionParams", { skuId, country, userLoggedIn: sessionData.loggedIn });
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -1597,6 +1635,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     };
   }
   async #initiateApplePay(skuId, country) {
+    console.log("[web-apple-pay] #initiateApplePay: starting", { skuId, country });
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;

package/dist/src/apple-pay-button.stories.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1355,11 +1363,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
+      console.log("[web-apple-pay] createIfEnabled: no offer provided \u2192 null");
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      console.log("[web-apple-pay] createIfEnabled: excluded variant \u2192 null", { variant: offer.product?.variant });
       return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      console.log("[web-apple-pay] createIfEnabled: feature flag absent \u2192 null");
+      return null;
+    }
+    console.log("[web-apple-pay] createIfEnabled: creating button", { skuId: offer.sku_id, country, entryPoint });
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1427,7 +1443,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
+    console.log("[web-apple-pay] connectedCallback: element connected");
     if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
+      console.log("[web-apple-pay] connectedCallback: already rendering or rendered, skipping");
       return;
     }
     this.#rendering = true;
@@ -1454,6 +1472,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    console.log("[web-apple-pay] #run: starting render pipeline");
     try {
       if (await this.#checkAvailability()) return;
       if (await this.#checkSession()) return;
@@ -1472,9 +1491,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
+      console.log("[web-apple-pay] #checkAvailability: Apple Pay unavailable \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkAvailability: Apple Pay available");
     return false;
   }
   /**
@@ -1483,7 +1504,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
+    console.log("[web-apple-pay] #checkSession: session fetched", { loggedIn: this.#sessionData?.loggedIn, userType: this.#sessionData?.userType });
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      console.log("[web-apple-pay] #checkSession: ineligible user \u2192 hiding", { userType: this.#sessionData.userType });
       this.style.display = "none";
       return true;
     }
@@ -1492,14 +1515,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
+      console.log("[web-apple-pay] #checkOffer: no offer set \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkOffer: offer present", { skuId: this.#offer.sku_id });
     return false;
   }
   /** Captures the current page URL once at mount for reuse across the session lifetime. */
   #captureReturnUrl() {
     this.#returnUrl = captureOriginUrl();
+    console.log("[web-apple-pay] #captureReturnUrl:", this.#returnUrl);
   }
   /**
    * Computes supported billing countries once at mount.
@@ -1511,6 +1537,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#country,
       this.#offer.product?.variant ?? ""
     );
+    console.log("[web-apple-pay] #computeBillingCountries:", this.#supportedBillingCountries);
   }
   /**
    * Returns `true` (hide) when the wallet BFF reports Apple Pay is unavailable
@@ -1520,6 +1547,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     console.log("[web-apple-pay] #fetchAndCacheOptions: fetched payment options", { paymentOptions: this.#paymentOptions });
     if (!this.#paymentOptions?.options?.apple_pay) {
+      console.log("[web-apple-pay] #fetchAndCacheOptions: apple_pay not in options \u2192 hiding");
       this.style.display = "none";
       return true;
     }
@@ -1527,6 +1555,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
+    console.log("[web-apple-pay] #renderTemplate: rendering Apple Pay button", { skuId: this.#offer?.sku_id, country: this.#country });
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -1541,10 +1570,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.addEventListener("click", () => {
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
+      console.log("[web-apple-pay] apple-pay-confirmed received on document", { skuId, country });
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1559,6 +1589,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
+    console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
     if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
@@ -1572,24 +1603,31 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchSession() {
     try {
-      return await getExpressCheckoutSession();
-    } catch {
+      const session = await getExpressCheckoutSession();
+      console.log("[web-apple-pay] #fetchSession: success", { loggedIn: session.loggedIn, userType: session.userType });
+      return session;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchSession: failed, falling back to anonymous session", err);
       return null;
     }
   }
   async #fetchPaymentOptions() {
     try {
-      return await getPaymentOptions({
+      const options = await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-    } catch {
+      console.log("[web-apple-pay] #fetchPaymentOptions: success", { hasApplePay: !!options?.options?.apple_pay });
+      return options;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchPaymentOptions: failed", err);
       return null;
     }
   }
   #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    console.log("[web-apple-pay] #buildSessionParams", { skuId, country, userLoggedIn: sessionData.loggedIn });
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -1612,6 +1650,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     };
   }
   async #initiateApplePay(skuId, country) {
+    console.log("[web-apple-pay] #initiateApplePay: starting", { skuId, country });
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;

package/dist/src/apple-pay-modal.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true

package/dist/src/apple-pay-modal.stories.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1340,11 +1348,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
+      console.log("[web-apple-pay] createIfEnabled: no offer provided \u2192 null");
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      console.log("[web-apple-pay] createIfEnabled: excluded variant \u2192 null", { variant: offer.product?.variant });
       return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      console.log("[web-apple-pay] createIfEnabled: feature flag absent \u2192 null");
+      return null;
+    }
+    console.log("[web-apple-pay] createIfEnabled: creating button", { skuId: offer.sku_id, country, entryPoint });
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1412,7 +1428,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
+    console.log("[web-apple-pay] connectedCallback: element connected");
     if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
+      console.log("[web-apple-pay] connectedCallback: already rendering or rendered, skipping");
       return;
     }
     this.#rendering = true;
@@ -1439,6 +1457,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    console.log("[web-apple-pay] #run: starting render pipeline");
     try {
       if (await this.#checkAvailability()) return;
       if (await this.#checkSession()) return;
@@ -1457,9 +1476,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
+      console.log("[web-apple-pay] #checkAvailability: Apple Pay unavailable \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkAvailability: Apple Pay available");
     return false;
   }
   /**
@@ -1468,7 +1489,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
+    console.log("[web-apple-pay] #checkSession: session fetched", { loggedIn: this.#sessionData?.loggedIn, userType: this.#sessionData?.userType });
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      console.log("[web-apple-pay] #checkSession: ineligible user \u2192 hiding", { userType: this.#sessionData.userType });
       this.style.display = "none";
       return true;
     }
@@ -1477,14 +1500,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
+      console.log("[web-apple-pay] #checkOffer: no offer set \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkOffer: offer present", { skuId: this.#offer.sku_id });
     return false;
   }
   /** Captures the current page URL once at mount for reuse across the session lifetime. */
   #captureReturnUrl() {
     this.#returnUrl = captureOriginUrl();
+    console.log("[web-apple-pay] #captureReturnUrl:", this.#returnUrl);
   }
   /**
    * Computes supported billing countries once at mount.
@@ -1496,6 +1522,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#country,
       this.#offer.product?.variant ?? ""
     );
+    console.log("[web-apple-pay] #computeBillingCountries:", this.#supportedBillingCountries);
   }
   /**
    * Returns `true` (hide) when the wallet BFF reports Apple Pay is unavailable
@@ -1505,6 +1532,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     console.log("[web-apple-pay] #fetchAndCacheOptions: fetched payment options", { paymentOptions: this.#paymentOptions });
     if (!this.#paymentOptions?.options?.apple_pay) {
+      console.log("[web-apple-pay] #fetchAndCacheOptions: apple_pay not in options \u2192 hiding");
       this.style.display = "none";
       return true;
     }
@@ -1512,6 +1540,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
+    console.log("[web-apple-pay] #renderTemplate: rendering Apple Pay button", { skuId: this.#offer?.sku_id, country: this.#country });
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -1526,10 +1555,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.addEventListener("click", () => {
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
+      console.log("[web-apple-pay] apple-pay-confirmed received on document", { skuId, country });
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1544,6 +1574,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
+    console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
     if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
@@ -1557,24 +1588,31 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchSession() {
     try {
-      return await getExpressCheckoutSession();
-    } catch {
+      const session = await getExpressCheckoutSession();
+      console.log("[web-apple-pay] #fetchSession: success", { loggedIn: session.loggedIn, userType: session.userType });
+      return session;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchSession: failed, falling back to anonymous session", err);
       return null;
     }
   }
   async #fetchPaymentOptions() {
     try {
-      return await getPaymentOptions({
+      const options = await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-    } catch {
+      console.log("[web-apple-pay] #fetchPaymentOptions: success", { hasApplePay: !!options?.options?.apple_pay });
+      return options;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchPaymentOptions: failed", err);
       return null;
     }
   }
   #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    console.log("[web-apple-pay] #buildSessionParams", { skuId, country, userLoggedIn: sessionData.loggedIn });
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -1597,6 +1635,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     };
   }
   async #initiateApplePay(skuId, country) {
+    console.log("[web-apple-pay] #initiateApplePay: starting", { skuId, country });
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;

package/dist/src/index.js

@@ -307,7 +307,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.#country = value;
   }
   connectedCallback() {
+    console.log("[web-apple-pay] ApplePayModal connectedCallback");
     if (this.querySelector(".apm-overlay")) {
+      console.log("[web-apple-pay] ApplePayModal connectedCallback: already rendered, skipping");
       return;
     }
     ensureApplePayLogoSymbol();
@@ -321,6 +323,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
+    console.log("[web-apple-pay] ApplePayModal: rendering for offer", { skuId: offer.sku_id, country });
     const offerNameElement = this.querySelector(
       "#apple-pay-modal-offer-name"
     );
@@ -393,11 +396,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      console.log("[web-apple-pay] ApplePayModal: CTA clicked", { skuId: offer.sku_id, country, isUS });
       if (isUS && checkbox && !checkbox.checked) {
+        console.log("[web-apple-pay] ApplePayModal: T&C checkbox not accepted, showing error");
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed", { skuId: offer.sku_id, country });
       this.dispatchEvent(
         new CustomEvent("apple-pay-confirmed", {
           bubbles: true,
@@ -405,7 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
-      this.close();
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +419,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    console.log("[web-apple-pay] ApplePayModal: open()");
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +434,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    console.log("[web-apple-pay] ApplePayModal: close()");
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1351,11 +1359,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
+      console.log("[web-apple-pay] createIfEnabled: no offer provided \u2192 null");
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      console.log("[web-apple-pay] createIfEnabled: excluded variant \u2192 null", { variant: offer.product?.variant });
       return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      console.log("[web-apple-pay] createIfEnabled: feature flag absent \u2192 null");
+      return null;
+    }
+    console.log("[web-apple-pay] createIfEnabled: creating button", { skuId: offer.sku_id, country, entryPoint });
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1423,7 +1439,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Lifecycle ──────────────────────────────────────────────────────────────
   async connectedCallback() {
+    console.log("[web-apple-pay] connectedCallback: element connected");
     if (this.#rendering || this.querySelector(SEL_CONTAINER)) {
+      console.log("[web-apple-pay] connectedCallback: already rendering or rendered, skipping");
       return;
     }
     this.#rendering = true;
@@ -1450,6 +1468,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
+    console.log("[web-apple-pay] #run: starting render pipeline");
     try {
       if (await this.#checkAvailability()) return;
       if (await this.#checkSession()) return;
@@ -1468,9 +1487,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
+      console.log("[web-apple-pay] #checkAvailability: Apple Pay unavailable \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkAvailability: Apple Pay available");
     return false;
   }
   /**
@@ -1479,7 +1500,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
+    console.log("[web-apple-pay] #checkSession: session fetched", { loggedIn: this.#sessionData?.loggedIn, userType: this.#sessionData?.userType });
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
+      console.log("[web-apple-pay] #checkSession: ineligible user \u2192 hiding", { userType: this.#sessionData.userType });
       this.style.display = "none";
       return true;
     }
@@ -1488,14 +1511,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
+      console.log("[web-apple-pay] #checkOffer: no offer set \u2192 hiding");
       this.style.display = "none";
       return true;
     }
+    console.log("[web-apple-pay] #checkOffer: offer present", { skuId: this.#offer.sku_id });
     return false;
   }
   /** Captures the current page URL once at mount for reuse across the session lifetime. */
   #captureReturnUrl() {
     this.#returnUrl = captureOriginUrl();
+    console.log("[web-apple-pay] #captureReturnUrl:", this.#returnUrl);
   }
   /**
    * Computes supported billing countries once at mount.
@@ -1507,6 +1533,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#country,
       this.#offer.product?.variant ?? ""
     );
+    console.log("[web-apple-pay] #computeBillingCountries:", this.#supportedBillingCountries);
   }
   /**
    * Returns `true` (hide) when the wallet BFF reports Apple Pay is unavailable
@@ -1516,6 +1543,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     console.log("[web-apple-pay] #fetchAndCacheOptions: fetched payment options", { paymentOptions: this.#paymentOptions });
     if (!this.#paymentOptions?.options?.apple_pay) {
+      console.log("[web-apple-pay] #fetchAndCacheOptions: apple_pay not in options \u2192 hiding");
       this.style.display = "none";
       return true;
     }
@@ -1523,6 +1551,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
+    console.log("[web-apple-pay] #renderTemplate: rendering Apple Pay button", { skuId: this.#offer?.sku_id, country: this.#country });
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -1537,10 +1566,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.addEventListener("click", () => {
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
+    document.addEventListener("apple-pay-confirmed", (event) => {
       const { skuId, country } = event.detail;
+      console.log("[web-apple-pay] apple-pay-confirmed received on document", { skuId, country });
       this.#initiateApplePay(skuId, country);
-    });
+    }, { once: true });
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1555,6 +1585,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
+    console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
     if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
@@ -1568,24 +1599,31 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchSession() {
     try {
-      return await getExpressCheckoutSession();
-    } catch {
+      const session = await getExpressCheckoutSession();
+      console.log("[web-apple-pay] #fetchSession: success", { loggedIn: session.loggedIn, userType: session.userType });
+      return session;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchSession: failed, falling back to anonymous session", err);
       return null;
     }
   }
   async #fetchPaymentOptions() {
     try {
-      return await getPaymentOptions({
+      const options = await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-    } catch {
+      console.log("[web-apple-pay] #fetchPaymentOptions: success", { hasApplePay: !!options?.options?.apple_pay });
+      return options;
+    } catch (err) {
+      console.warn("[web-apple-pay] #fetchPaymentOptions: failed", err);
       return null;
     }
   }
   #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+    console.log("[web-apple-pay] #buildSessionParams", { skuId, country, userLoggedIn: sessionData.loggedIn });
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -1608,6 +1646,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     };
   }
   async #initiateApplePay(skuId, country) {
+    console.log("[web-apple-pay] #initiateApplePay: starting", { skuId, country });
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "0.1.1-beta.0",
+  "version": "0.1.1-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",