@economist/web-apple-pay 1.7.8 → 1.7.10

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

@@ -578,10 +578,9 @@ var loadRecaptchaScript = (siteKey) => {
     );
     if (existingScript) {
       existingScript.addEventListener("load", () => resolve());
-      existingScript.addEventListener(
-        "error",
-        () => reject(new Error("Failed to load existing reCAPTCHA script"))
-      );
+      existingScript.addEventListener("error", () => {
+        reject(new Error("Failed to load existing reCAPTCHA script"));
+      });
       return;
     }
     const script = document.createElement("script");
@@ -589,7 +588,9 @@ var loadRecaptchaScript = (siteKey) => {
     script.async = true;
     script.defer = true;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    script.onerror = () => {
+      reject(new Error("Failed to load reCAPTCHA script"));
+    };
     document.head.appendChild(script);
   });
 };
@@ -838,17 +839,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #country = "";
   #triggerElement = null;
   #keyHandler = null;
-  #recaptchaTokens = null;
-  #recaptchaTokensPromise = null;
+  #isClosed = false;
   /**
-   * Synchronous callback invoked directly from the CTA click handler once the
-   * user confirms. The caller (ApplePayButton) must call startApplePaySession
-   * inside this callback to preserve the browser's user-gesture chain — Safari
-   * requires new ApplePaySession() to execute within the original click stack.
-   *
-   * reCAPTCHA tokens are guaranteed non-null here: the CTA remains disabled
-   * until the token pre-fetch resolves, so this callback is never reached
-   * without valid tokens.
+   * Callback invoked synchronously from the CTA click handler.
+   * Receives a Promise of reCAPTCHA tokens — the promise is already in-flight
+   * by the time this is called. The caller (ApplePayButton) must call
+   * new ApplePaySession() synchronously inside this callback to stay within
+   * Safari's user-gesture window. The token promise resolves before
+   * onPaymentAuthorized fires (user still needs to authenticate on the sheet).
    */
   onConfirm = null;
   set offer(value) {
@@ -945,28 +943,32 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       });
     }
-    if (this.#recaptchaTokensPromise) {
-      if (cta) {
-        cta.setAttribute("disabled", "");
-        cta.setAttribute("aria-disabled", "true");
-        cta.setAttribute("aria-busy", "true");
+    cta?.addEventListener("click", () => {
+      if (cta.disabled) return;
+      if (isUS && checkbox && !checkbox.checked) {
+        errorElement?.classList.add("apm__error--visible");
+        checkboxLabel?.classList.add("apm__checkbox-label--error");
+        return;
       }
-      this.#recaptchaTokensPromise.then((tokens) => {
-        this.#recaptchaTokens = tokens;
-        if (cta) {
-          cta.removeAttribute("disabled");
-          cta.removeAttribute("aria-disabled");
-          cta.removeAttribute("aria-busy");
-        }
-      }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        this.onConfirm(recaptchaTokensPromise);
+        this.close();
+      }
+      recaptchaTokensPromise.catch(() => {
+        if (this.#isClosed) return;
+        cta.disabled = false;
+        cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
         if (existingError) {
           const icon = existingError.querySelector("svg");
           existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
           if (icon) existingError.prepend(icon);
+          existingError.setAttribute("role", "alert");
           existingError.classList.add("apm__error--visible");
         } else {
           const errorNotice = document.createElement("div");
@@ -976,25 +978,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           cta?.insertAdjacentElement("beforebegin", errorNotice);
         }
       });
-    }
-    cta?.addEventListener("click", () => {
-      if (isUS && checkbox && !checkbox.checked) {
-        errorElement?.classList.add("apm__error--visible");
-        checkboxLabel?.classList.add("apm__checkbox-label--error");
-        return;
-      }
-      if (this.#recaptchaTokens) {
-        this.onConfirm?.(this.#recaptchaTokens);
-        this.close();
-      }
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
       () => this.close()
     );
   }
-  open(recaptchaTokensPromise) {
-    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
+  open() {
+    this.#isClosed = false;
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1009,6 +1000,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    this.#isClosed = true;
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -1123,7 +1115,7 @@ var isAppleDeviceOrSafari = () => {
   const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
   return isIOSOrMacTouchDevice || isSafariBrowser;
 };
-var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
     return true;
@@ -1421,7 +1413,10 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch(() => {
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -1972,7 +1967,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2037,15 +2031,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
-    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
     try {
+      this.#renderTemplate();
       if (await this.#checkAvailability()) return;
       if (this.#checkOffer()) return;
-      this.#renderTemplate();
       if (await this.#checkSession()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
@@ -2063,6 +2056,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const available = await isApplePayAvailable();
     if (!available) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -2084,6 +2078,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #checkOffer() {
     if (!this.#offer) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -2138,7 +2133,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
-      this.#scheduleRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2175,27 +2169,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
-      this.#scheduleRecaptchaTokens();
+    modal.onConfirm = (recaptchaTokensPromise) => {
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
-    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(() => {
-      if (this.#recaptchaTokensPromise === attempt) {
-        this.#recaptchaTokensPromise = null;
-      }
-    });
-    this.#recaptchaTokensPromise = attempt;
+    modal.open();
   }
   async #fetchSession() {
     try {
@@ -2216,7 +2193,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       return null;
     }
   }
-  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokensPromise) {
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
@@ -2228,30 +2205,41 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       skuId,
       returnUrl: this.#returnUrl,
       userLoggedIn: sessionData.loggedIn,
-      onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
-        skuId,
-        country,
-        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-        returnUrl: this.#returnUrl,
-        supportedBillingCountries: this.#supportedBillingCountries,
-        recaptchaTokens
-      })
+      onPaymentAuthorized: async (event, session) => {
+        const recaptchaTokens = await recaptchaTokensPromise;
+        return handlePaymentAuthorized(event, session, sessionData, {
+          skuId,
+          country,
+          currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
+          returnUrl: this.#returnUrl,
+          supportedBillingCountries: this.#supportedBillingCountries,
+          recaptchaTokens
+        });
+      }
     };
   }
-  #initiateApplePay(skuId, country, recaptchaTokens) {
+  #initiateApplePay(skuId, country, recaptchaTokensPromise) {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
+      if (!paymentOptions) {
+        return;
+      }
       startApplePaySession(
         this.#buildSessionParams(
           skuId,
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch {
+      redirectToFallbackCheckout({
+        returnUrl: this.#returnUrl,
+        skuId,
+        countryCode: country
+      });
     }
   }
 };

package/dist/src/apple-pay-modal.d.ts

@@ -1,27 +1,22 @@
 import type { Offer } from './types/offer.types';
-import { getPurchaseRecaptchaTokens } from './utils/recaptcha';
-/** Resolved reCAPTCHA token set, mirroring the recaptcha utility return type. */
-type RecaptchaTokens = Awaited<ReturnType<typeof getPurchaseRecaptchaTokens>>;
+import { type RecaptchaTokens } from './utils/recaptcha';
 export declare class ApplePayModal extends HTMLElement {
     #private;
     static readonly tag = "teg-apple-pay-modal";
     static define(): void;
     /**
-     * Synchronous callback invoked directly from the CTA click handler once the
-     * user confirms. The caller (ApplePayButton) must call startApplePaySession
-     * inside this callback to preserve the browser's user-gesture chain — Safari
-     * requires new ApplePaySession() to execute within the original click stack.
-     *
-     * reCAPTCHA tokens are guaranteed non-null here: the CTA remains disabled
-     * until the token pre-fetch resolves, so this callback is never reached
-     * without valid tokens.
+     * Callback invoked synchronously from the CTA click handler.
+     * Receives a Promise of reCAPTCHA tokens — the promise is already in-flight
+     * by the time this is called. The caller (ApplePayButton) must call
+     * new ApplePaySession() synchronously inside this callback to stay within
+     * Safari's user-gesture window. The token promise resolves before
+     * onPaymentAuthorized fires (user still needs to authenticate on the sheet).
      */
-    onConfirm: ((recaptchaTokens: RecaptchaTokens) => void) | null;
+    onConfirm: ((recaptchaTokensPromise: Promise<RecaptchaTokens>) => void) | null;
     set offer(value: Offer | null);
     get country(): string;
     set country(value: string);
     connectedCallback(): void;
-    open(recaptchaTokensPromise?: Promise<RecaptchaTokens> | null): void;
+    open(): void;
     close(): void;
 }
-export {};

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

@@ -570,10 +570,9 @@ var loadRecaptchaScript = (siteKey) => {
     );
     if (existingScript) {
       existingScript.addEventListener("load", () => resolve());
-      existingScript.addEventListener(
-        "error",
-        () => reject(new Error("Failed to load existing reCAPTCHA script"))
-      );
+      existingScript.addEventListener("error", () => {
+        reject(new Error("Failed to load existing reCAPTCHA script"));
+      });
       return;
     }
     const script = document.createElement("script");
@@ -581,7 +580,9 @@ var loadRecaptchaScript = (siteKey) => {
     script.async = true;
     script.defer = true;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    script.onerror = () => {
+      reject(new Error("Failed to load reCAPTCHA script"));
+    };
     document.head.appendChild(script);
   });
 };
@@ -830,17 +831,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #country = "";
   #triggerElement = null;
   #keyHandler = null;
-  #recaptchaTokens = null;
-  #recaptchaTokensPromise = null;
+  #isClosed = false;
   /**
-   * Synchronous callback invoked directly from the CTA click handler once the
-   * user confirms. The caller (ApplePayButton) must call startApplePaySession
-   * inside this callback to preserve the browser's user-gesture chain — Safari
-   * requires new ApplePaySession() to execute within the original click stack.
-   *
-   * reCAPTCHA tokens are guaranteed non-null here: the CTA remains disabled
-   * until the token pre-fetch resolves, so this callback is never reached
-   * without valid tokens.
+   * Callback invoked synchronously from the CTA click handler.
+   * Receives a Promise of reCAPTCHA tokens — the promise is already in-flight
+   * by the time this is called. The caller (ApplePayButton) must call
+   * new ApplePaySession() synchronously inside this callback to stay within
+   * Safari's user-gesture window. The token promise resolves before
+   * onPaymentAuthorized fires (user still needs to authenticate on the sheet).
    */
   onConfirm = null;
   set offer(value) {
@@ -937,28 +935,32 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         }
       });
     }
-    if (this.#recaptchaTokensPromise) {
-      if (cta) {
-        cta.setAttribute("disabled", "");
-        cta.setAttribute("aria-disabled", "true");
-        cta.setAttribute("aria-busy", "true");
+    cta?.addEventListener("click", () => {
+      if (cta.disabled) return;
+      if (isUS && checkbox && !checkbox.checked) {
+        errorElement?.classList.add("apm__error--visible");
+        checkboxLabel?.classList.add("apm__checkbox-label--error");
+        return;
       }
-      this.#recaptchaTokensPromise.then((tokens) => {
-        this.#recaptchaTokens = tokens;
-        if (cta) {
-          cta.removeAttribute("disabled");
-          cta.removeAttribute("aria-disabled");
-          cta.removeAttribute("aria-busy");
-        }
-      }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        this.onConfirm(recaptchaTokensPromise);
+        this.close();
+      }
+      recaptchaTokensPromise.catch(() => {
+        if (this.#isClosed) return;
+        cta.disabled = false;
+        cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
         if (existingError) {
           const icon = existingError.querySelector("svg");
           existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
           if (icon) existingError.prepend(icon);
+          existingError.setAttribute("role", "alert");
           existingError.classList.add("apm__error--visible");
         } else {
           const errorNotice = document.createElement("div");
@@ -968,25 +970,14 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
           cta?.insertAdjacentElement("beforebegin", errorNotice);
         }
       });
-    }
-    cta?.addEventListener("click", () => {
-      if (isUS && checkbox && !checkbox.checked) {
-        errorElement?.classList.add("apm__error--visible");
-        checkboxLabel?.classList.add("apm__checkbox-label--error");
-        return;
-      }
-      if (this.#recaptchaTokens) {
-        this.onConfirm?.(this.#recaptchaTokens);
-        this.close();
-      }
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
       () => this.close()
     );
   }
-  open(recaptchaTokensPromise) {
-    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
+  open() {
+    this.#isClosed = false;
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1001,6 +992,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    this.#isClosed = true;
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true