@economist/web-apple-pay 0.1.3-beta.43 → 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
@@ -947,11 +959,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");
@@ -1592,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,
@@ -1608,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;
@@ -1622,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) {
@@ -2157,8 +2196,10 @@ 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);
     };
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
   }
   async #fetchSession() {
@@ -2206,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,
@@ -2215,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
@@ -942,11 +954,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");
@@ -1587,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,
@@ -1603,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;
@@ -1617,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) {
@@ -2152,8 +2191,10 @@ 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);
     };
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
   }
   async #fetchSession() {
@@ -2201,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,
@@ -2210,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);
     }
   }
 };

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

@@ -578,10 +578,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");
@@ -589,7 +590,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);
   });
 };
@@ -608,12 +613,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
@@ -950,11 +962,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");
@@ -1595,12 +1614,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,
@@ -1611,6 +1642,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;
@@ -1625,10 +1657,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) {
@@ -2160,8 +2199,10 @@ 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);
     };
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
   }
   async #fetchSession() {
@@ -2209,6 +2250,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,
@@ -2218,7 +2271,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-modal.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
@@ -942,11 +954,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");

package/dist/src/apple-pay-modal.stories.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
@@ -942,11 +954,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");
@@ -1587,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,
@@ -1603,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;
@@ -1617,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) {
@@ -2152,8 +2191,10 @@ 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);
     };
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
   }
   async #fetchSession() {
@@ -2201,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,
@@ -2210,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);
     }
   }
 };

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

@@ -108,10 +108,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");
@@ -119,7 +120,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);
   });
 };

package/dist/src/clients/payment-checkout/payment-handler.js

@@ -345,12 +345,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,
@@ -361,6 +373,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;
@@ -375,10 +388,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) {

package/dist/src/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
@@ -947,11 +959,18 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       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) => {
-        if (this.#isClosed) return;
+        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(() => {
+      }).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");
@@ -1592,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,
@@ -1608,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;
@@ -1622,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) {
@@ -2157,8 +2196,10 @@ 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);
     };
+    console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
   }
   async #fetchSession() {
@@ -2206,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,
@@ -2215,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/utils/recaptcha.js

@@ -11,10 +11,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");
@@ -22,7 +23,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);
   });
 };
@@ -41,12 +46,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;
+  }
 };
 export {
   getPurchaseRecaptchaTokens,

package/package.json

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