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

package/dist/index.js

@@ -835,17 +835,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -942,28 +937,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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");
@@ -973,25 +969,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1006,6 +990,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
@@ -2174,8 +2159,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    modal.open();
   }
   async #fetchSession() {
     try {

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

@@ -830,17 +830,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -937,28 +932,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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 +964,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1001,6 +985,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
@@ -2169,8 +2154,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    modal.open();
   }
   async #fetchSession() {
     try {

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

@@ -838,17 +838,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -945,28 +940,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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 +972,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1009,6 +993,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
@@ -2177,8 +2162,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    modal.open();
   }
   async #fetchSession() {
     try {

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

@@ -7,21 +7,17 @@ export declare class ApplePayModal extends HTMLElement {
     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 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.
      */
     onConfirm: ((recaptchaTokens: 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

@@ -830,17 +830,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -937,28 +932,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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 +964,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1001,6 +985,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

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

@@ -830,17 +830,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -937,28 +932,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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 +964,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1001,6 +985,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
@@ -2169,8 +2154,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    modal.open();
   }
   async #fetchSession() {
     try {

package/dist/src/index.js

@@ -835,17 +835,12 @@ 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 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.
    */
   onConfirm = null;
   set offer(value) {
@@ -942,28 +937,29 @@ 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");
-        }
+      errorElement?.classList.remove("apm__error--visible");
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
+        if (this.#isClosed) return;
+        this.onConfirm?.(recaptchaTokens);
+        this.close();
       }).catch(() => {
-        if (cta) {
-          cta.removeAttribute("aria-busy");
-        }
+        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");
@@ -973,25 +969,13 @@ 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.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1006,6 +990,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
@@ -2174,8 +2159,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
     };
-    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
-    modal.open(recaptchaTokensPromise);
+    modal.open();
   }
   async #fetchSession() {
     try {

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