@economist/web-apple-pay 0.1.3-beta.42 → 0.1.3-beta.44

package/dist/index.js

@@ -575,10 +575,11 @@ var loadRecaptchaScript = (siteKey) => {
     );
     if (existingScript) {
       existingScript.addEventListener("load", () => resolve());
-      existingScript.addEventListener(
-        "error",
-        () => reject(new Error("Failed to load existing reCAPTCHA script"))
-      );
+      existingScript.addEventListener("error", () => {
+        const error = new Error("Failed to load existing reCAPTCHA script");
+        console.error("[web-apple-pay] reCAPTCHA script load failed (existing script)", error);
+        reject(error);
+      });
       return;
     }
     const script = document.createElement("script");
@@ -586,7 +587,11 @@ var loadRecaptchaScript = (siteKey) => {
     script.async = true;
     script.defer = true;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    script.onerror = () => {
+      const error = new Error("Failed to load reCAPTCHA script");
+      console.error("[web-apple-pay] reCAPTCHA script load failed (new script)", error);
+      reject(error);
+    };
     document.head.appendChild(script);
   });
 };
@@ -605,12 +610,19 @@ var getRecaptchaToken = async (action) => {
   });
 };
 var getPurchaseRecaptchaTokens = async () => {
-  const [checkEligibility, newBasket, registerUser] = await Promise.all([
-    getRecaptchaToken("checkEligibility"),
-    getRecaptchaToken("newBasket"),
-    getRecaptchaToken("registerUser")
-  ]);
-  return { checkEligibility, newBasket, registerUser };
+  console.info("[web-apple-pay] Requesting reCAPTCHA tokens (checkEligibility, newBasket, registerUser)");
+  try {
+    const [checkEligibility, newBasket, registerUser] = await Promise.all([
+      getRecaptchaToken("checkEligibility"),
+      getRecaptchaToken("newBasket"),
+      getRecaptchaToken("registerUser")
+    ]);
+    console.info("[web-apple-pay] All reCAPTCHA tokens acquired successfully");
+    return { checkEligibility, newBasket, registerUser };
+  } catch (error) {
+    console.error("[web-apple-pay] Failed to acquire one or more reCAPTCHA tokens", error);
+    throw error;
+  }
 };
 
 // src/apple-pay-modal.ts
@@ -835,17 +847,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #country = "";
   #triggerElement = null;
   #keyHandler = null;
-  #recaptchaTokens = null;
-  #recaptchaTokensPromise = null;
+  #isClosed = false;
   /**
-   * Synchronous callback invoked directly from the CTA click handler once the
-   * user confirms. The caller (ApplePayButton) must call startApplePaySession
-   * inside this callback to preserve the browser's user-gesture chain — Safari
-   * requires new ApplePaySession() to execute within the original click stack.
-   *
-   * reCAPTCHA tokens are guaranteed non-null here: the CTA remains disabled
-   * until the token pre-fetch resolves, so this callback is never reached
-   * without valid tokens.
+   * Callback invoked from the CTA click handler once the user confirms.
+   * The caller (ApplePayButton) must call startApplePaySession inside this
+   * callback to preserve the browser's user-gesture chain — Safari requires
+   * new ApplePaySession() to execute within the original click stack.
    */
   onConfirm = null;
   set offer(value) {
@@ -942,28 +949,36 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       });
     }
-    if (this.#recaptchaTokensPromise) {
-      if (cta) {
-        cta.setAttribute("disabled", "");
-        cta.setAttribute("aria-disabled", "true");
-        cta.setAttribute("aria-busy", "true");
+    cta?.addEventListener("click", () => {
+      if (cta.disabled) return;
+      if (isUS && checkbox && !checkbox.checked) {
+        errorElement?.classList.add("apm__error--visible");
+        checkboxLabel?.classList.add("apm__checkbox-label--error");
+        return;
       }
-      this.#recaptchaTokensPromise.then((tokens) => {
-        this.#recaptchaTokens = tokens;
-        if (cta) {
-          cta.removeAttribute("disabled");
-          cta.removeAttribute("aria-disabled");
-          cta.removeAttribute("aria-busy");
-        }
-      }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
+        if (this.#isClosed) {
+          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
+          return;
         }
+        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
+      }).catch((error) => {
+        console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        cta.disabled = false;
+        cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
         if (existingError) {
           const icon = existingError.querySelector("svg");
           existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
           if (icon) existingError.prepend(icon);
+          existingError.setAttribute("role", "alert");
           existingError.classList.add("apm__error--visible");
         } else {
           const errorNotice = document.createElement("div");
@@ -973,25 +988,13 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           cta?.insertAdjacentElement("beforebegin", errorNotice);
         }
       });
-    }
-    cta?.addEventListener("click", () => {
-      if (isUS && checkbox && !checkbox.checked) {
-        errorElement?.classList.add("apm__error--visible");
-        checkboxLabel?.classList.add("apm__checkbox-label--error");
-        return;
-      }
-      if (this.#recaptchaTokens) {
-        this.onConfirm?.(this.#recaptchaTokens);
-        this.close();
-      }
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
       () => this.close()
     );
   }
-  open(recaptchaTokensPromise) {
-    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
+  open() {
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1006,6 +1009,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    this.#isClosed = true;
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1607,12 +1611,24 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  console.info("[web-apple-pay] Payment authorised \u2014 starting purchase flow", {
+    skuId,
+    country,
+    loggedIn: sessionData.loggedIn,
+    userType: sessionData.userType,
+    recaptchaTokensPresent: {
+      checkEligibility: !!config.recaptchaTokens.checkEligibility,
+      newBasket: !!config.recaptchaTokens.newBasket,
+      registerUser: !!config.recaptchaTokens.registerUser
+    }
+  });
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    console.info("[web-apple-pay] Contact validation passed \u2014 calling purchase API");
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1623,6 +1639,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
+    console.info("[web-apple-pay] Purchase API succeeded", { skuId, basketId: result.basketId });
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
@@ -1637,10 +1654,17 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     });
   } catch (err) {
     if (err instanceof ContactValidationError) {
+      console.warn("[web-apple-pay] Contact validation failed \u2014 keeping Apple Pay sheet open", err);
       failApplePaySession(session, err.errors);
       return;
     }
     const walletError = parseWalletApiError(err);
+    console.error("[web-apple-pay] Purchase API failed", {
+      skuId,
+      errorType: walletError?.errorType ?? "UNKNOWN",
+      message: walletError?.message,
+      err
+    });
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
@@ -2172,10 +2196,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const skuId = this.#offer.sku_id;
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
+      console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
+    modal.open();
   }
   async #fetchSession() {
     try {
@@ -2222,6 +2247,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
+      console.info("[web-apple-pay] Starting Apple Pay session", {
+        skuId,
+        country,
+        loggedIn: sessionData.loggedIn,
+        userType: sessionData.userType,
+        hasPaymentOptions: !!paymentOptions,
+        recaptchaTokensPresent: {
+          checkEligibility: !!recaptchaTokens.checkEligibility,
+          newBasket: !!recaptchaTokens.newBasket,
+          registerUser: !!recaptchaTokens.registerUser
+        }
+      });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,
@@ -2231,7 +2268,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           recaptchaTokens
         )
       );
-    } catch {
+    } catch (error) {
+      console.error("[web-apple-pay] Failed to start Apple Pay session", error);
     }
   }
 };

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

@@ -570,10 +570,11 @@ var loadRecaptchaScript = (siteKey) => {
     );
     if (existingScript) {
       existingScript.addEventListener("load", () => resolve());
-      existingScript.addEventListener(
-        "error",
-        () => reject(new Error("Failed to load existing reCAPTCHA script"))
-      );
+      existingScript.addEventListener("error", () => {
+        const error = new Error("Failed to load existing reCAPTCHA script");
+        console.error("[web-apple-pay] reCAPTCHA script load failed (existing script)", error);
+        reject(error);
+      });
       return;
     }
     const script = document.createElement("script");
@@ -581,7 +582,11 @@ var loadRecaptchaScript = (siteKey) => {
     script.async = true;
     script.defer = true;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    script.onerror = () => {
+      const error = new Error("Failed to load reCAPTCHA script");
+      console.error("[web-apple-pay] reCAPTCHA script load failed (new script)", error);
+      reject(error);
+    };
     document.head.appendChild(script);
   });
 };
@@ -600,12 +605,19 @@ var getRecaptchaToken = async (action) => {
   });
 };
 var getPurchaseRecaptchaTokens = async () => {
-  const [checkEligibility, newBasket, registerUser] = await Promise.all([
-    getRecaptchaToken("checkEligibility"),
-    getRecaptchaToken("newBasket"),
-    getRecaptchaToken("registerUser")
-  ]);
-  return { checkEligibility, newBasket, registerUser };
+  console.info("[web-apple-pay] Requesting reCAPTCHA tokens (checkEligibility, newBasket, registerUser)");
+  try {
+    const [checkEligibility, newBasket, registerUser] = await Promise.all([
+      getRecaptchaToken("checkEligibility"),
+      getRecaptchaToken("newBasket"),
+      getRecaptchaToken("registerUser")
+    ]);
+    console.info("[web-apple-pay] All reCAPTCHA tokens acquired successfully");
+    return { checkEligibility, newBasket, registerUser };
+  } catch (error) {
+    console.error("[web-apple-pay] Failed to acquire one or more reCAPTCHA tokens", error);
+    throw error;
+  }
 };
 
 // src/apple-pay-modal.ts
@@ -830,17 +842,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #country = "";
   #triggerElement = null;
   #keyHandler = null;
-  #recaptchaTokens = null;
-  #recaptchaTokensPromise = null;
+  #isClosed = false;
   /**
-   * Synchronous callback invoked directly from the CTA click handler once the
-   * user confirms. The caller (ApplePayButton) must call startApplePaySession
-   * inside this callback to preserve the browser's user-gesture chain — Safari
-   * requires new ApplePaySession() to execute within the original click stack.
-   *
-   * reCAPTCHA tokens are guaranteed non-null here: the CTA remains disabled
-   * until the token pre-fetch resolves, so this callback is never reached
-   * without valid tokens.
+   * Callback invoked from the CTA click handler once the user confirms.
+   * The caller (ApplePayButton) must call startApplePaySession inside this
+   * callback to preserve the browser's user-gesture chain — Safari requires
+   * new ApplePaySession() to execute within the original click stack.
    */
   onConfirm = null;
   set offer(value) {
@@ -937,28 +944,36 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       });
     }
-    if (this.#recaptchaTokensPromise) {
-      if (cta) {
-        cta.setAttribute("disabled", "");
-        cta.setAttribute("aria-disabled", "true");
-        cta.setAttribute("aria-busy", "true");
+    cta?.addEventListener("click", () => {
+      if (cta.disabled) return;
+      if (isUS && checkbox && !checkbox.checked) {
+        errorElement?.classList.add("apm__error--visible");
+        checkboxLabel?.classList.add("apm__checkbox-label--error");
+        return;
       }
-      this.#recaptchaTokensPromise.then((tokens) => {
-        this.#recaptchaTokens = tokens;
-        if (cta) {
-          cta.removeAttribute("disabled");
-          cta.removeAttribute("aria-disabled");
-          cta.removeAttribute("aria-busy");
-        }
-      }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
+        if (this.#isClosed) {
+          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
+          return;
         }
+        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
+      }).catch((error) => {
+        console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        cta.disabled = false;
+        cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
         if (existingError) {
           const icon = existingError.querySelector("svg");
           existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
           if (icon) existingError.prepend(icon);
+          existingError.setAttribute("role", "alert");
           existingError.classList.add("apm__error--visible");
         } else {
           const errorNotice = document.createElement("div");
@@ -968,25 +983,13 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           cta?.insertAdjacentElement("beforebegin", errorNotice);
         }
       });
-    }
-    cta?.addEventListener("click", () => {
-      if (isUS && checkbox && !checkbox.checked) {
-        errorElement?.classList.add("apm__error--visible");
-        checkboxLabel?.classList.add("apm__checkbox-label--error");
-        return;
-      }
-      if (this.#recaptchaTokens) {
-        this.onConfirm?.(this.#recaptchaTokens);
-        this.close();
-      }
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
       () => this.close()
     );
   }
-  open(recaptchaTokensPromise) {
-    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
+  open() {
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1001,6 +1004,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    this.#isClosed = true;
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1602,12 +1606,24 @@ function handleStructuredError(ctx) {
 async function handlePaymentAuthorized(event, session, sessionData, config) {
   const { skuId, returnUrl, country } = config;
   let validatedEmail;
+  console.info("[web-apple-pay] Payment authorised \u2014 starting purchase flow", {
+    skuId,
+    country,
+    loggedIn: sessionData.loggedIn,
+    userType: sessionData.userType,
+    recaptchaTokensPresent: {
+      checkEligibility: !!config.recaptchaTokens.checkEligibility,
+      newBasket: !!config.recaptchaTokens.newBasket,
+      registerUser: !!config.recaptchaTokens.registerUser
+    }
+  });
   try {
     validatedEmail = validateContacts(
       event,
       sessionData,
       config.supportedBillingCountries
     );
+    console.info("[web-apple-pay] Contact validation passed \u2014 calling purchase API");
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -1618,6 +1634,7 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       },
       recaptchaTokens: config.recaptchaTokens
     });
+    console.info("[web-apple-pay] Purchase API succeeded", { skuId, basketId: result.basketId });
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
@@ -1632,10 +1649,17 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     });
   } catch (err) {
     if (err instanceof ContactValidationError) {
+      console.warn("[web-apple-pay] Contact validation failed \u2014 keeping Apple Pay sheet open", err);
       failApplePaySession(session, err.errors);
       return;
     }
     const walletError = parseWalletApiError(err);
+    console.error("[web-apple-pay] Purchase API failed", {
+      skuId,
+      errorType: walletError?.errorType ?? "UNKNOWN",
+      message: walletError?.message,
+      err
+    });
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
@@ -2167,10 +2191,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const skuId = this.#offer.sku_id;
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
+      console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
+    modal.open();
   }
   async #fetchSession() {
     try {
@@ -2217,6 +2242,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
+      console.info("[web-apple-pay] Starting Apple Pay session", {
+        skuId,
+        country,
+        loggedIn: sessionData.loggedIn,
+        userType: sessionData.userType,
+        hasPaymentOptions: !!paymentOptions,
+        recaptchaTokensPresent: {
+          checkEligibility: !!recaptchaTokens.checkEligibility,
+          newBasket: !!recaptchaTokens.newBasket,
+          registerUser: !!recaptchaTokens.registerUser
+        }
+      });
       startApplePaySession(
         this.#buildSessionParams(
           skuId,
@@ -2226,7 +2263,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           recaptchaTokens
         )
       );
-    } catch {
+    } catch (error) {
+      console.error("[web-apple-pay] Failed to start Apple Pay session", error);
     }
   }
 };