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

package/dist/index.js

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -786,30 +787,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -817,33 +833,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1397,6 +1409,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1457,6 +1470,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * and eliminating the implicit reliance on the DOM as a render-state flag.
    */
   disconnectedCallback() {
+    console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
     this.#rendering = false;
     this.#readyPromise = null;
     this.#sessionData = null;
@@ -1565,10 +1579,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() {
@@ -1584,8 +1599,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #openModal() {
     console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
+      this.#recaptchaTokens = tokens;
+    }).catch((err) => {
+      console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1648,7 +1676,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
+      console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -775,30 +776,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -806,33 +822,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1386,6 +1398,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1446,6 +1459,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * and eliminating the implicit reliance on the DOM as a render-state flag.
    */
   disconnectedCallback() {
+    console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
     this.#rendering = false;
     this.#readyPromise = null;
     this.#sessionData = null;
@@ -1554,10 +1568,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() {
@@ -1573,8 +1588,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #openModal() {
     console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
+      this.#recaptchaTokens = tokens;
+    }).catch((err) => {
+      console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1637,7 +1665,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
+      console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -790,30 +791,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -821,33 +837,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1401,6 +1413,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1461,6 +1474,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * and eliminating the implicit reliance on the DOM as a render-state flag.
    */
   disconnectedCallback() {
+    console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
     this.#rendering = false;
     this.#readyPromise = null;
     this.#sessionData = null;
@@ -1569,10 +1583,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() {
@@ -1588,8 +1603,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #openModal() {
     console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
+      this.#recaptchaTokens = tokens;
+    }).catch((err) => {
+      console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1652,7 +1680,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
+      console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",

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

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -775,30 +776,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -806,33 +822,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1386,6 +1398,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1446,6 +1459,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * and eliminating the implicit reliance on the DOM as a render-state flag.
    */
   disconnectedCallback() {
+    console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
     this.#rendering = false;
     this.#readyPromise = null;
     this.#sessionData = null;
@@ -1554,10 +1568,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() {
@@ -1573,8 +1588,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #openModal() {
     console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
+      this.#recaptchaTokens = tokens;
+    }).catch((err) => {
+      console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1637,7 +1665,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
+      console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

package/dist/src/clients/payment-checkout/apple-session.js

@@ -179,30 +179,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -210,33 +225,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 export {
   startApplePaySession

package/dist/src/index.js

@@ -411,6 +411,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           detail: { skuId: offer.sku_id, country }
         })
       );
+      console.log("[web-apple-pay] ApplePayModal: dispatching apple-pay-confirmed-final", { skuId: offer.sku_id, country });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -786,30 +787,45 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    console.log("[web-apple-pay] startApplePaySession: ApplePaySession created");
+    session.onvalidatemerchant = async (event) => {
+      console.log("[web-apple-pay] onvalidatemerchant: received", { validationURL: event.validationURL });
+      try {
+        const validationHost = new URL(event.validationURL).host;
+        if (!validationHost.endsWith("apple.com")) {
+          console.warn("[web-apple-pay] onvalidatemerchant: invalid host, aborting", { validationHost });
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+        console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
+        const response = await validateAppleMerchant({
+          validationURL: event.validationURL,
+          recaptchaToken
         });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      console.log("[web-apple-pay] onvalidatemerchant: calling validateAppleMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+        if (!response?.merchantSession) {
+          console.warn("[web-apple-pay] onvalidatemerchant: no merchantSession in response, aborting");
+          trackFallbackCheckout(config.skuId);
+          session.abort();
+          window.location.href = redirectToCheckoutFallback({
+            skuId: config.skuId,
+            returnUrl: config.returnUrl,
+            inlineError: MSG_PAYMENT_GENERIC_ERROR
+          });
+          return;
+        }
+        console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
+        session.completeMerchantValidation(response.merchantSession);
+      } catch (err) {
+        console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
         trackFallbackCheckout(config.skuId);
         session.abort();
         window.location.href = redirectToCheckoutFallback({
@@ -817,33 +833,29 @@ function startApplePaySession(config) {
           returnUrl: config.returnUrl,
           inlineError: MSG_PAYMENT_GENERIC_ERROR
         });
-        return;
       }
-      console.log("[web-apple-pay] onvalidatemerchant: merchant validated successfully");
-      session.completeMerchantValidation(response.merchantSession);
-    } catch (err) {
-      console.error("[web-apple-pay] onvalidatemerchant: error during validation", err);
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
-      });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
-    config.onCancel?.();
-  };
-  console.log("[web-apple-pay] startApplePaySession: beginning session");
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.onpaymentauthorized = (event) => {
+      console.log("[web-apple-pay] onpaymentauthorized: payment authorized by user", { skuId: config.skuId });
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session);
+    };
+    session.oncancel = () => {
+      console.log("[web-apple-pay] oncancel: payment sheet cancelled by user", { skuId: config.skuId });
+      config.onCancel?.();
+    };
+    console.log("[web-apple-pay] startApplePaySession: beginning session");
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch (err) {
+    console.error("[web-apple-pay] startApplePaySession: failed to create or begin ApplePaySession", err);
+    trackFallbackCheckout(config.skuId);
+    window.location.href = redirectToCheckoutFallback({
+      skuId: config.skuId,
+      returnUrl: config.returnUrl,
+      inlineError: MSG_PAYMENT_GENERIC_ERROR
+    });
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -1397,6 +1409,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokens = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1457,6 +1470,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * and eliminating the implicit reliance on the DOM as a render-state flag.
    */
   disconnectedCallback() {
+    console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
     this.#rendering = false;
     this.#readyPromise = null;
     this.#sessionData = null;
@@ -1565,10 +1579,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() {
@@ -1584,8 +1599,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #openModal() {
     console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
+    getPurchaseRecaptchaTokens().then((tokens) => {
+      console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
+      this.#recaptchaTokens = tokens;
+    }).catch((err) => {
+      console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
+    });
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
     modal.offer = this.#offer;
@@ -1648,7 +1676,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
+      console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,

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.2",
+  "version": "0.1.3-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",