npm - @economist/web-apple-pay - Versions diffs - 0.1.3-beta.43 → 0.1.3-beta.45 - Mend

@economist/web-apple-pay 0.1.3-beta.43 → 0.1.3-beta.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.js +79 -16
package/dist/src/apple-pay-button.js +79 -16
package/dist/src/apple-pay-button.stories.js +79 -16
package/dist/src/apple-pay-modal.js +32 -13
package/dist/src/apple-pay-modal.stories.js +79 -16
package/dist/src/clients/payment-checkout/apple-session.js +21 -7
package/dist/src/clients/payment-checkout/payment-handler.js +20 -0
package/dist/src/index.js +79 -16
package/dist/src/utils/recaptcha.js +23 -11
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -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");
@@ -1362,22 +1381,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -1398,6 +1423,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -1410,7 +1436,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }
@@ -1592,12 +1620,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 +1648,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 +1663,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 +2205,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 +2256,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 +2277,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 CHANGED Viewed

@@ -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");
@@ -1357,22 +1376,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -1393,6 +1418,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -1405,7 +1431,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }
@@ -1587,12 +1615,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 +1643,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 +1658,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 +2200,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 +2251,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 +2272,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 CHANGED Viewed

@@ -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");
@@ -1365,22 +1384,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -1401,6 +1426,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -1413,7 +1439,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }
@@ -1595,12 +1623,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 +1651,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 +1666,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 +2208,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 +2259,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 +2280,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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");
@@ -1357,22 +1376,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -1393,6 +1418,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -1405,7 +1431,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }
@@ -1587,12 +1615,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 +1643,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 +1658,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 +2200,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 +2251,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 +2272,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 CHANGED Viewed

@@ -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);
   });
 };
@@ -196,22 +201,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -232,6 +243,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -244,7 +256,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }

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

@@ -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 CHANGED Viewed

@@ -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");
@@ -1362,22 +1381,28 @@ async function handleMerchantValidation(event, session, config) {
   try {
     const validationHost = new URL(event.validationURL).host;
     if (!validationHost.endsWith("apple.com")) {
+      console.error("[web-apple-pay] Merchant validation URL is not from apple.com \u2014 aborting session", { validationURL: event.validationURL });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation started", { validationHost });
     const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    console.info("[web-apple-pay] verifyMerchant reCAPTCHA token acquired \u2014 calling validateAppleMerchant");
     const response = await validateAppleMerchant({
       validationURL: event.validationURL,
       recaptchaToken
     });
     if (!response?.merchantSession) {
+      console.error("[web-apple-pay] Merchant validation response missing merchantSession \u2014 aborting session", { response });
       session.abort();
       redirectToFallbackCheckout(config);
       return;
     }
+    console.info("[web-apple-pay] Merchant validation succeeded \u2014 completing merchant validation");
     session.completeMerchantValidation(response.merchantSession);
-  } catch {
+  } catch (error) {
+    console.error("[web-apple-pay] Merchant validation threw an error \u2014 aborting session", error);
     session.abort();
     redirectToFallbackCheckout(config);
   }
@@ -1398,6 +1423,7 @@ function startApplePaySession(config) {
   };
   try {
     const session = new ApplePaySession(3, paymentRequest);
+    console.info("[web-apple-pay] ApplePaySession created successfully");
     session.onvalidatemerchant = async (event) => {
       await handleMerchantValidation(event, session, config);
     };
@@ -1410,7 +1436,9 @@ function startApplePaySession(config) {
     };
     trackWalletPaymentSheetOpen(config.skuId);
     session.begin();
-  } catch {
+    console.info("[web-apple-pay] ApplePaySession.begin() called \u2014 payment sheet should appear");
+  } catch (error) {
+    console.error("[web-apple-pay] ApplePaySession creation or begin() threw \u2014 redirecting to fallback checkout", error);
     redirectToFallbackCheckout(config);
   }
 }
@@ -1592,12 +1620,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 +1648,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 +1663,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 +2205,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 +2256,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 +2277,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.45",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",