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

package/dist/index.js

@@ -849,10 +849,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -957,20 +959,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
@@ -1429,7 +1430,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -2204,9 +2209,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
+    modal.onConfirm = (recaptchaTokensPromise) => {
       console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
     console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
@@ -2230,7 +2235,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 {
@@ -2242,31 +2247,33 @@ 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) {
+        console.error("[web-apple-pay] #initiateApplePay called before payment options were fetched");
+        return;
+      }
       console.info("[web-apple-pay] Starting Apple Pay session", {
         skuId,
         country,
         loggedIn: sessionData.loggedIn,
         userType: sessionData.userType,
-        hasPaymentOptions: !!paymentOptions,
-        recaptchaTokensPresent: {
-          checkEligibility: !!recaptchaTokens.checkEligibility,
-          newBasket: !!recaptchaTokens.newBasket,
-          registerUser: !!recaptchaTokens.registerUser
-        }
+        hasPaymentOptions: true
       });
       startApplePaySession(
         this.#buildSessionParams(
@@ -2274,7 +2281,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch (error) {

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

@@ -844,10 +844,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -952,20 +954,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
@@ -1424,7 +1425,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -2199,9 +2204,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
+    modal.onConfirm = (recaptchaTokensPromise) => {
       console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
     console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
@@ -2225,7 +2230,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 {
@@ -2237,31 +2242,33 @@ 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) {
+        console.error("[web-apple-pay] #initiateApplePay called before payment options were fetched");
+        return;
+      }
       console.info("[web-apple-pay] Starting Apple Pay session", {
         skuId,
         country,
         loggedIn: sessionData.loggedIn,
         userType: sessionData.userType,
-        hasPaymentOptions: !!paymentOptions,
-        recaptchaTokensPresent: {
-          checkEligibility: !!recaptchaTokens.checkEligibility,
-          newBasket: !!recaptchaTokens.newBasket,
-          registerUser: !!recaptchaTokens.registerUser
-        }
+        hasPaymentOptions: true
       });
       startApplePaySession(
         this.#buildSessionParams(
@@ -2269,7 +2276,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch (error) {

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

@@ -852,10 +852,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -960,20 +962,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
@@ -1432,7 +1433,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -2207,9 +2212,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
+    modal.onConfirm = (recaptchaTokensPromise) => {
       console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
     console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
@@ -2233,7 +2238,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 {
@@ -2245,31 +2250,33 @@ 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) {
+        console.error("[web-apple-pay] #initiateApplePay called before payment options were fetched");
+        return;
+      }
       console.info("[web-apple-pay] Starting Apple Pay session", {
         skuId,
         country,
         loggedIn: sessionData.loggedIn,
         userType: sessionData.userType,
-        hasPaymentOptions: !!paymentOptions,
-        recaptchaTokensPresent: {
-          checkEligibility: !!recaptchaTokens.checkEligibility,
-          newBasket: !!recaptchaTokens.newBasket,
-          registerUser: !!recaptchaTokens.registerUser
-        }
+        hasPaymentOptions: true
       });
       startApplePaySession(
         this.#buildSessionParams(
@@ -2277,7 +2284,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch (error) {

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

@@ -7,12 +7,14 @@ export declare class ApplePayModal extends HTMLElement {
     static readonly tag = "teg-apple-pay-modal";
     static define(): void;
     /**
-     * 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.
+     * 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);

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

@@ -844,10 +844,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -952,20 +954,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");

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

@@ -844,10 +844,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -952,20 +954,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
@@ -1424,7 +1425,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -2199,9 +2204,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
+    modal.onConfirm = (recaptchaTokensPromise) => {
       console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
     console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
@@ -2225,7 +2230,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 {
@@ -2237,31 +2242,33 @@ 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) {
+        console.error("[web-apple-pay] #initiateApplePay called before payment options were fetched");
+        return;
+      }
       console.info("[web-apple-pay] Starting Apple Pay session", {
         skuId,
         country,
         loggedIn: sessionData.loggedIn,
         userType: sessionData.userType,
-        hasPaymentOptions: !!paymentOptions,
-        recaptchaTokensPresent: {
-          checkEligibility: !!recaptchaTokens.checkEligibility,
-          newBasket: !!recaptchaTokens.newBasket,
-          registerUser: !!recaptchaTokens.registerUser
-        }
+        hasPaymentOptions: true
       });
       startApplePaySession(
         this.#buildSessionParams(
@@ -2269,7 +2276,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch (error) {

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

@@ -249,7 +249,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();

package/dist/src/index.js

@@ -849,10 +849,12 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #keyHandler = null;
   #isClosed = false;
   /**
-   * 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.
+   * 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) {
@@ -957,20 +959,19 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
         return;
       }
       errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
       cta.disabled = true;
       cta.setAttribute("aria-busy", "true");
       console.info("[web-apple-pay] CTA clicked \u2014 fetching reCAPTCHA tokens");
-      getPurchaseRecaptchaTokens().then((recaptchaTokens) => {
-        console.info("[web-apple-pay] reCAPTCHA tokens resolved successfully");
-        if (this.#isClosed) {
-          console.warn("[web-apple-pay] Modal was closed before reCAPTCHA resolved \u2014 aborting Apple Pay initiation");
-          return;
-        }
-        console.info("[web-apple-pay] Calling onConfirm to initiate Apple Pay session");
-        this.onConfirm?.(recaptchaTokens);
+      const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+      if (!this.#isClosed && this.onConfirm) {
+        console.info("[web-apple-pay] Calling onConfirm synchronously to initiate Apple Pay session");
+        this.onConfirm(recaptchaTokensPromise);
         this.close();
-      }).catch((error) => {
+      }
+      recaptchaTokensPromise.catch((error) => {
         console.error("[web-apple-pay] reCAPTCHA token fetch failed", error);
+        if (this.#isClosed) return;
         cta.disabled = false;
         cta.removeAttribute("aria-busy");
         const existingError = this.querySelector("#apple-pay-modal-error");
@@ -1429,7 +1430,11 @@ function startApplePaySession(config) {
     };
     session.onpaymentauthorized = (event) => {
       trackWalletPaymentAuthorised(config.skuId);
-      config.onPaymentAuthorized(event, session);
+      config.onPaymentAuthorized(event, session).catch((err) => {
+        console.error("[web-apple-pay] onPaymentAuthorized threw an unhandled error \u2014 aborting session", err);
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
+      });
     };
     session.oncancel = () => {
       config.onCancel?.();
@@ -2204,9 +2209,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     }
     const skuId = this.#offer.sku_id;
     const country = this.#country;
-    modal.onConfirm = (recaptchaTokens) => {
+    modal.onConfirm = (recaptchaTokensPromise) => {
       console.info("[web-apple-pay] onConfirm received from modal \u2014 initiating Apple Pay session", { skuId, country });
-      this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#initiateApplePay(skuId, country, recaptchaTokensPromise);
     };
     console.info("[web-apple-pay] Opening Apple Pay modal", { skuId, country });
     modal.open();
@@ -2230,7 +2235,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 {
@@ -2242,31 +2247,33 @@ 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) {
+        console.error("[web-apple-pay] #initiateApplePay called before payment options were fetched");
+        return;
+      }
       console.info("[web-apple-pay] Starting Apple Pay session", {
         skuId,
         country,
         loggedIn: sessionData.loggedIn,
         userType: sessionData.userType,
-        hasPaymentOptions: !!paymentOptions,
-        recaptchaTokensPresent: {
-          checkEligibility: !!recaptchaTokens.checkEligibility,
-          newBasket: !!recaptchaTokens.newBasket,
-          registerUser: !!recaptchaTokens.registerUser
-        }
+        hasPaymentOptions: true
       });
       startApplePaySession(
         this.#buildSessionParams(
@@ -2274,7 +2281,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokensPromise
         )
       );
     } catch (error) {

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