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

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

@@ -43,11 +43,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}`
     );
@@ -239,13 +246,26 @@ var shippingContactDetails = (shippingContact) => {
 };
 
 // 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 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;
   }
 };
@@ -259,24 +279,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;
 };
 
@@ -291,9 +303,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) {
@@ -307,11 +325,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
   });
 }
@@ -358,11 +375,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) {
@@ -372,6 +389,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) {

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

@@ -43,11 +43,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}`
     );

package/dist/src/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
   });
 }
@@ -1573,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) {
@@ -1587,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) {
@@ -2081,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
@@ -2120,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();

package/dist/src/stories/utils/story-env.js

@@ -32,6 +32,24 @@ var createFetchMock = (sessionResponse, sessionStatus = 200) => {
         headers: { "content-type": "application/json" }
       });
     }
+    if (requestUrl.includes("/v1/wallet/payment-options/sku/")) {
+      return new Response(
+        JSON.stringify({
+          options: {
+            apple_pay: {
+              provider: "apple-pay",
+              settings: {
+                supported_networks: ["visa", "masterCard", "amex"]
+              }
+            }
+          }
+        }),
+        {
+          status: 200,
+          headers: { "content-type": "application/json" }
+        }
+      );
+    }
     return new Response("Not Found", {
       status: 404,
       statusText: "Not Found"

package/dist/src/utils/expressCheckoutRedirect.d.ts

@@ -1,11 +1,24 @@
 /**
  * Centralized redirect URL builders for the Express Checkout payment handler.
  *
- * All redirects include a `returnUrl` parameter so downstream pages
- * (/checkout/complete, onboarding) can return the user to the original article.
+ * Before redirecting, the origin article URL is persisted to localStorage under
+ * the `checkout-redirect` key so that sma-checkout / the onboarding app can
+ * return the user to the article after checkout and onboarding complete.
  *
  * Matches sma-checkout: src/lib/navigate-to-checkout/index.tsx
  */
+/**
+ * Validates that a URL is safe to use as a post-checkout redirect destination,
+ * then writes it to localStorage under `checkout-redirect`.
+ *
+ * Allowed values:
+ *  - Relative paths (start with `/`)
+ *  - Absolute URLs on `economist.com` or any subdomain of it
+ *
+ * Any other value (e.g. an external domain) is silently rejected to prevent
+ * open-redirect vulnerabilities.
+ */
+export declare const writeCheckoutRedirect: (originUrl: string) => void;
 /**
  * Captures the current page URL (the article the user is reading).
  * Must be called before any redirect occurs.
@@ -29,26 +42,34 @@ export declare const buildQueryString: () => string;
 export declare const decodeSku: (sku: string) => string;
 /**
  * Builds the success redirect URL.
- * /checkout/complete?basketId={id}&lmo_offer={sku}&status={userStatus}&redirectToCheckout=true&returnUrl=...
+ * /checkout/complete?basketId={id}&lmo_offer={sku}&status={userStatus}&redirectToCheckout=true
+ *
+ * The origin article URL is written to localStorage by the caller via
+ * writeCheckoutRedirect() before this redirect fires.
  */
 export declare const redirectToCheckoutComplete: (params: {
     basketId: string;
     status: "nex" | "lex";
     skuId: string;
-    returnUrl: string;
     queryString?: string;
 }) => string;
 /**
  * Builds the fallback redirect URL for error scenarios.
- * /checkout?lmo_offer={sku}&inlineError=...&returnUrl=...
+ * /checkout?lmo_offer={offerPath}&inlineError=...
+ *
+ * The skuId is decoded via decodeSku() before being set as lmo_offer, producing
+ * a Limio offer path (e.g. /offers2/UK-UK.DIGITAL.1YAR.X.DISC.30.NYT) as
+ * checkout expects. If decoding fails (malformed SKU), the raw skuId is used.
  *
  * Builds on top of the current page URL (window.location.href) so that any
  * existing query params (UTM tags, campaign flags) are preserved — matching
  * sma-checkout: src/lib/navigate-to-checkout/index.tsx
+ *
+ * The origin article URL is written to localStorage by the caller via
+ * writeCheckoutRedirect() before this redirect fires.
  */
 export declare const redirectToCheckoutFallback: (params: {
     skuId: string;
-    returnUrl: string;
     inlineError?: string;
     emailError?: string;
     email?: string;

package/dist/src/utils/expressCheckoutRedirect.js

@@ -1,4 +1,20 @@
 // 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(
@@ -8,11 +24,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;
   }
 };
@@ -26,24 +39,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;
 };
 export {
@@ -51,5 +56,6 @@ export {
   captureOriginUrl,
   decodeSku,
   redirectToCheckoutComplete,
-  redirectToCheckoutFallback
+  redirectToCheckoutFallback,
+  writeCheckoutRedirect
 };

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