@economist/web-apple-pay 0.1.3-beta.20 → 0.1.3-beta.22

package/dist/index.js

@@ -516,11 +516,13 @@ var apple_pay_modal_template_default = `<style>
       </svg>
       Please accept the terms to continue
     </div>
-    <button class="apm__cta" id="apple-pay-modal-cta">
-      Continue with
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
-        <use href="#apple-pay-logo" />
-      </svg>
+    <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
+      <span class="apm__cta-content">
+        Continue with
+        <svg width="51" height="22" aria-hidden="true" role="img">
+          <use href="#apple-pay-logo" />
+        </svg>
+      </span>
     </button>
   </div>
 </div>
@@ -633,6 +635,7 @@ function getOfferTypeText(offerType) {
 }
 var TERMS_LINK = '<a href="https://www.economistgroup.com/terms-of-use" target="_blank" rel="noopener noreferrer">Terms and Conditions</a>';
 var PRIVACY_LINK = '<a href="https://www.economistgroup.com/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>';
+var MSG_RECAPTCHA_LOAD_ERROR = "Something went wrong. Please close and try again.";
 function getCheckboxTermsHtml(isNYT, isLoggedIn, autoRenewal) {
   const autoRenewalClause = autoRenewal ? " and auto-renewal terms above," : "";
   if (isNYT) {
@@ -924,6 +927,22 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       }).catch(() => {
         console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
+        if (cta) {
+          cta.removeAttribute("aria-busy");
+        }
+        const existingError = this.querySelector("#apple-pay-modal-error");
+        if (existingError) {
+          const icon = existingError.querySelector("svg");
+          existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          if (icon) existingError.prepend(icon);
+          existingError.classList.add("apm__error--visible");
+        } else {
+          const errorNotice = document.createElement("div");
+          errorNotice.setAttribute("role", "alert");
+          errorNotice.className = "apm__error apm__error--visible";
+          errorNotice.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          cta?.insertAdjacentElement("beforebegin", errorNotice);
+        }
       });
     }
     cta?.addEventListener("click", () => {
@@ -934,8 +953,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       }
       if (this.#recaptchaTokens) {
         this.onConfirm?.(this.#recaptchaTokens);
+        this.close();
       }
-      this.close();
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -1137,11 +1156,18 @@ var apiFetch = async (path, options = {}) => {
   });
   if (!response.ok) {
     const contentType = response.headers.get("content-type") || "";
+    console.warn("[web-apple-pay] apiFetch: non-2xx response", {
+      path,
+      status: response.status,
+      contentType
+    });
     if (contentType.includes("application/json")) {
       const errorBody = await response.json();
+      console.warn("[web-apple-pay] apiFetch: parsed JSON error body", { errorBody });
       throw new ApiError(response.status, errorBody);
     }
     const errorText = await response.text();
+    console.warn("[web-apple-pay] apiFetch: non-JSON error body", { errorText });
     throw new Error(
       `API request failed: ${response.status} ${response.statusText} - ${errorText}`
     );
@@ -1179,6 +1205,22 @@ var getExpressCheckoutSession = () => {
 };
 
 // src/utils/expressCheckoutRedirect.ts
+var CHECKOUT_REDIRECT_KEY = "checkout-redirect";
+var ALLOWED_REDIRECT_HOSTNAME = "economist.com";
+var writeCheckoutRedirect = (originUrl) => {
+  if (originUrl.startsWith("/")) {
+    localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+    return;
+  }
+  try {
+    const { hostname } = new URL(originUrl);
+    const isAllowed = hostname === ALLOWED_REDIRECT_HOSTNAME || hostname.endsWith(`.${ALLOWED_REDIRECT_HOSTNAME}`);
+    if (isAllowed) {
+      localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+    }
+  } catch {
+  }
+};
 var captureOriginUrl = () => window.location.href;
 var buildQueryString = () => {
   const countryCode = new URLSearchParams(window.location.search).get(
@@ -1188,11 +1230,8 @@ var buildQueryString = () => {
 };
 var decodeSku = (sku) => {
   try {
-    const decoded = atob(sku.substring(sku.indexOf("-") + 1));
-    console.log("[web-apple-pay] decodeSku", { input: sku, decoded });
-    return decoded;
-  } catch (err) {
-    console.warn("[web-apple-pay] decodeSku: failed to decode, returning raw", { input: sku, err });
+    return atob(sku.substring(sku.indexOf("-") + 1));
+  } catch {
     return sku;
   }
 };
@@ -1206,24 +1245,16 @@ var redirectToCheckoutComplete = (params) => {
   url.searchParams.set("lmo_offer", params.skuId);
   url.searchParams.set("status", params.status);
   url.searchParams.set("redirectToCheckout", "true");
-  url.searchParams.set("returnUrl", params.returnUrl);
   return url.pathname + url.search;
 };
 var redirectToCheckoutFallback = (params) => {
-  const decodedOffer = decodeSku(params.skuId);
-  console.log("[web-apple-pay] redirectToCheckoutFallback", {
-    rawSkuId: params.skuId,
-    decodedOffer
-  });
   const url = new URL(window.location.href);
   url.pathname = "/checkout";
-  url.searchParams.set("lmo_offer", decodedOffer);
+  url.searchParams.set("lmo_offer", decodeSku(params.skuId));
   if (params.inlineError)
     url.searchParams.set("inlineError", params.inlineError);
   if (params.email) url.searchParams.set("email", params.email);
   if (params.emailError) url.searchParams.set("emailError", params.emailError);
-  url.searchParams.set("returnUrl", params.returnUrl);
-  console.log("[web-apple-pay] fallback redirect URL", url.pathname + url.search);
   return url.pathname + url.search;
 };
 
@@ -1313,10 +1344,10 @@ var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
 function redirectToFallbackCheckout(config) {
+  writeCheckoutRedirect(config.returnUrl);
   trackFallbackCheckout(config.skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId: config.skuId,
-    returnUrl: config.returnUrl,
     inlineError: MSG_PAYMENT_GENERIC_ERROR
   });
 }
@@ -1506,9 +1537,15 @@ var failApplePaySession = (session, errors = []) => {
 };
 function parseWalletApiError(err) {
   const body = err instanceof ApiError ? err.body : err;
+  console.warn("[web-apple-pay] parseWalletApiError: raw error", {
+    isApiError: err instanceof ApiError,
+    body
+  });
   if (body && typeof body === "object" && "errorType" in body && "message" in body) {
+    console.warn("[web-apple-pay] parseWalletApiError: structured BFF error", body);
     return body;
   }
+  console.warn("[web-apple-pay] parseWalletApiError: unstructured error \u2014 no errorType found");
   return null;
 }
 function validateContacts(event, sessionData, supportedBillingCountries) {
@@ -1522,11 +1559,10 @@ function validateContacts(event, sessionData, supportedBillingCountries) {
   return void 0;
 }
 function redirectFallback(skuId, returnUrl, options) {
-  console.log("[web-apple-pay] redirectFallback called", { skuId, returnUrl, options });
+  writeCheckoutRedirect(returnUrl);
   trackFallbackCheckout(skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId,
-    returnUrl,
     ...options
   });
 }
@@ -1541,7 +1577,12 @@ var ERROR_HANDLERS = {
   ),
   ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
   REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
-  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
+    emailError: MSG_REGISTRATION,
+    email: validatedEmail
+  }),
+  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED }),
+  RECAPTCHA_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
 };
 function handleStructuredError(ctx) {
   const handler = ERROR_HANDLERS[ctx.walletError.errorType];
@@ -1573,11 +1614,11 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    writeCheckoutRedirect(returnUrl);
     window.location.href = redirectToCheckoutComplete({
       basketId: result.basketId,
       status: userStatus,
       skuId: decodeSku(skuId),
-      returnUrl,
       queryString
     });
   } catch (err) {
@@ -1587,6 +1628,10 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     }
     console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
     const walletError = parseWalletApiError(err);
+    console.warn("[web-apple-pay] handlePaymentAuthorized: walletError result", {
+      walletError,
+      validatedEmail
+    });
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
@@ -2081,7 +2126,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
-      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      this.#scheduleRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2120,10 +2165,27 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
-      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
   }
+  /**
+   * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.
+   * If the fetch rejects, the field is cleared so the next `modal.open()` call
+   * falls back to a new attempt via the modal's own null-fallback path — preventing
+   * a single transient failure from permanently disabling the CTA on all retries.
+   * The identity guard prevents a late rejection from clobbering a newer attempt.
+   */
+  #scheduleRecaptchaTokens() {
+    const attempt = getPurchaseRecaptchaTokens();
+    attempt.catch((err) => {
+      console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
+      if (this.#recaptchaTokensPromise === attempt) {
+        this.#recaptchaTokensPromise = null;
+      }
+    });
+    this.#recaptchaTokensPromise = attempt;
+  }
   async #fetchSession() {
     try {
       return await getExpressCheckoutSession();

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

@@ -516,11 +516,13 @@ var apple_pay_modal_template_default = `<style>
       </svg>
       Please accept the terms to continue
     </div>
-    <button class="apm__cta" id="apple-pay-modal-cta">
-      Continue with
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
-        <use href="#apple-pay-logo" />
-      </svg>
+    <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
+      <span class="apm__cta-content">
+        Continue with
+        <svg width="51" height="22" aria-hidden="true" role="img">
+          <use href="#apple-pay-logo" />
+        </svg>
+      </span>
     </button>
   </div>
 </div>
@@ -628,6 +630,7 @@ function getOfferTypeText(offerType) {
 }
 var TERMS_LINK = '<a href="https://www.economistgroup.com/terms-of-use" target="_blank" rel="noopener noreferrer">Terms and Conditions</a>';
 var PRIVACY_LINK = '<a href="https://www.economistgroup.com/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>';
+var MSG_RECAPTCHA_LOAD_ERROR = "Something went wrong. Please close and try again.";
 function getCheckboxTermsHtml(isNYT, isLoggedIn, autoRenewal) {
   const autoRenewalClause = autoRenewal ? " and auto-renewal terms above," : "";
   if (isNYT) {
@@ -919,6 +922,22 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       }).catch(() => {
         console.error("[web-apple-pay] apple-pay-modal: failed to pre-fetch reCAPTCHA tokens; CTA remains disabled");
+        if (cta) {
+          cta.removeAttribute("aria-busy");
+        }
+        const existingError = this.querySelector("#apple-pay-modal-error");
+        if (existingError) {
+          const icon = existingError.querySelector("svg");
+          existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          if (icon) existingError.prepend(icon);
+          existingError.classList.add("apm__error--visible");
+        } else {
+          const errorNotice = document.createElement("div");
+          errorNotice.setAttribute("role", "alert");
+          errorNotice.className = "apm__error apm__error--visible";
+          errorNotice.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          cta?.insertAdjacentElement("beforebegin", errorNotice);
+        }
       });
     }
     cta?.addEventListener("click", () => {
@@ -929,8 +948,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       }
       if (this.#recaptchaTokens) {
         this.onConfirm?.(this.#recaptchaTokens);
+        this.close();
       }
-      this.close();
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -1132,11 +1151,18 @@ var apiFetch = async (path, options = {}) => {
   });
   if (!response.ok) {
     const contentType = response.headers.get("content-type") || "";
+    console.warn("[web-apple-pay] apiFetch: non-2xx response", {
+      path,
+      status: response.status,
+      contentType
+    });
     if (contentType.includes("application/json")) {
       const errorBody = await response.json();
+      console.warn("[web-apple-pay] apiFetch: parsed JSON error body", { errorBody });
       throw new ApiError(response.status, errorBody);
     }
     const errorText = await response.text();
+    console.warn("[web-apple-pay] apiFetch: non-JSON error body", { errorText });
     throw new Error(
       `API request failed: ${response.status} ${response.statusText} - ${errorText}`
     );
@@ -1174,6 +1200,22 @@ var getExpressCheckoutSession = () => {
 };
 
 // src/utils/expressCheckoutRedirect.ts
+var CHECKOUT_REDIRECT_KEY = "checkout-redirect";
+var ALLOWED_REDIRECT_HOSTNAME = "economist.com";
+var writeCheckoutRedirect = (originUrl) => {
+  if (originUrl.startsWith("/")) {
+    localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+    return;
+  }
+  try {
+    const { hostname } = new URL(originUrl);
+    const isAllowed = hostname === ALLOWED_REDIRECT_HOSTNAME || hostname.endsWith(`.${ALLOWED_REDIRECT_HOSTNAME}`);
+    if (isAllowed) {
+      localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+    }
+  } catch {
+  }
+};
 var captureOriginUrl = () => window.location.href;
 var buildQueryString = () => {
   const countryCode = new URLSearchParams(window.location.search).get(
@@ -1183,11 +1225,8 @@ var buildQueryString = () => {
 };
 var decodeSku = (sku) => {
   try {
-    const decoded = atob(sku.substring(sku.indexOf("-") + 1));
-    console.log("[web-apple-pay] decodeSku", { input: sku, decoded });
-    return decoded;
-  } catch (err) {
-    console.warn("[web-apple-pay] decodeSku: failed to decode, returning raw", { input: sku, err });
+    return atob(sku.substring(sku.indexOf("-") + 1));
+  } catch {
     return sku;
   }
 };
@@ -1201,24 +1240,16 @@ var redirectToCheckoutComplete = (params) => {
   url.searchParams.set("lmo_offer", params.skuId);
   url.searchParams.set("status", params.status);
   url.searchParams.set("redirectToCheckout", "true");
-  url.searchParams.set("returnUrl", params.returnUrl);
   return url.pathname + url.search;
 };
 var redirectToCheckoutFallback = (params) => {
-  const decodedOffer = decodeSku(params.skuId);
-  console.log("[web-apple-pay] redirectToCheckoutFallback", {
-    rawSkuId: params.skuId,
-    decodedOffer
-  });
   const url = new URL(window.location.href);
   url.pathname = "/checkout";
-  url.searchParams.set("lmo_offer", decodedOffer);
+  url.searchParams.set("lmo_offer", decodeSku(params.skuId));
   if (params.inlineError)
     url.searchParams.set("inlineError", params.inlineError);
   if (params.email) url.searchParams.set("email", params.email);
   if (params.emailError) url.searchParams.set("emailError", params.emailError);
-  url.searchParams.set("returnUrl", params.returnUrl);
-  console.log("[web-apple-pay] fallback redirect URL", url.pathname + url.search);
   return url.pathname + url.search;
 };
 
@@ -1308,10 +1339,10 @@ var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
 
 // src/clients/payment-checkout/apple-session.ts
 function redirectToFallbackCheckout(config) {
+  writeCheckoutRedirect(config.returnUrl);
   trackFallbackCheckout(config.skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId: config.skuId,
-    returnUrl: config.returnUrl,
     inlineError: MSG_PAYMENT_GENERIC_ERROR
   });
 }
@@ -1501,9 +1532,15 @@ var failApplePaySession = (session, errors = []) => {
 };
 function parseWalletApiError(err) {
   const body = err instanceof ApiError ? err.body : err;
+  console.warn("[web-apple-pay] parseWalletApiError: raw error", {
+    isApiError: err instanceof ApiError,
+    body
+  });
   if (body && typeof body === "object" && "errorType" in body && "message" in body) {
+    console.warn("[web-apple-pay] parseWalletApiError: structured BFF error", body);
     return body;
   }
+  console.warn("[web-apple-pay] parseWalletApiError: unstructured error \u2014 no errorType found");
   return null;
 }
 function validateContacts(event, sessionData, supportedBillingCountries) {
@@ -1517,11 +1554,10 @@ function validateContacts(event, sessionData, supportedBillingCountries) {
   return void 0;
 }
 function redirectFallback(skuId, returnUrl, options) {
-  console.log("[web-apple-pay] redirectFallback called", { skuId, returnUrl, options });
+  writeCheckoutRedirect(returnUrl);
   trackFallbackCheckout(skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId,
-    returnUrl,
     ...options
   });
 }
@@ -1536,7 +1572,12 @@ var ERROR_HANDLERS = {
   ),
   ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
   REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
-  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
+    emailError: MSG_REGISTRATION,
+    email: validatedEmail
+  }),
+  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED }),
+  RECAPTCHA_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
 };
 function handleStructuredError(ctx) {
   const handler = ERROR_HANDLERS[ctx.walletError.errorType];
@@ -1568,11 +1609,11 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    writeCheckoutRedirect(returnUrl);
     window.location.href = redirectToCheckoutComplete({
       basketId: result.basketId,
       status: userStatus,
       skuId: decodeSku(skuId),
-      returnUrl,
       queryString
     });
   } catch (err) {
@@ -1582,6 +1623,10 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
     }
     console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
     const walletError = parseWalletApiError(err);
+    console.warn("[web-apple-pay] handlePaymentAuthorized: walletError result", {
+      walletError,
+      validatedEmail
+    });
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
@@ -2076,7 +2121,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
-      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      this.#scheduleRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2115,10 +2160,27 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
-      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      this.#scheduleRecaptchaTokens();
     };
     modal.open(this.#recaptchaTokensPromise);
   }
+  /**
+   * Starts a fresh reCAPTCHA token pre-fetch and stores its promise.
+   * If the fetch rejects, the field is cleared so the next `modal.open()` call
+   * falls back to a new attempt via the modal's own null-fallback path — preventing
+   * a single transient failure from permanently disabling the CTA on all retries.
+   * The identity guard prevents a late rejection from clobbering a newer attempt.
+   */
+  #scheduleRecaptchaTokens() {
+    const attempt = getPurchaseRecaptchaTokens();
+    attempt.catch((err) => {
+      console.error("[web-apple-pay] reCAPTCHA token pre-fetch failed; will retry on modal open", err);
+      if (this.#recaptchaTokensPromise === attempt) {
+        this.#recaptchaTokensPromise = null;
+      }
+    });
+    this.#recaptchaTokensPromise = attempt;
+  }
   async #fetchSession() {
     try {
       return await getExpressCheckoutSession();