@economist/web-apple-pay 0.1.3-beta.41 → 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
@@ -1913,6 +1898,7 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
 };
 
 // src/apple-pay-button.ts
+var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
 var DEFAULT_TOTAL = "0.00";
@@ -1928,7 +1914,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the offer is eligible.
+   * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1937,6 +1923,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1965,7 +1954,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2030,7 +2018,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
-    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2043,10 +2030,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      console.log("[web-apple-pay] button shown \u2014 reason: all checks passed, Apple Pay is available and offer is eligible");
       this.#finishLoading();
-    } catch (error) {
-      console.warn("[web-apple-pay] button hidden \u2014 reason: unexpected error in render pipeline", error);
+    } catch {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
@@ -2057,7 +2042,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: Apple Pay unavailable on this device/browser");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2071,7 +2055,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      console.log(`[web-apple-pay] button removed from DOM \u2014 reason: session check failed, userType="${this.#sessionData.userType}"`);
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2081,7 +2064,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: no offer set on element before mount");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2109,16 +2091,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions) {
-      console.warn("[web-apple-pay] button removed from DOM \u2014 reason: getPaymentOptions threw an error (see previous log for details)");
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
-      return true;
-    }
-    if (!this.#paymentOptions.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: BFF responded but apple_pay is absent from payment options", {
-        receivedOptions: this.#paymentOptions.options
-      });
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2127,7 +2100,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
-    console.log("[web-apple-pay] button shown \u2014 reason: template injected into DOM (loading state), awaiting pipeline checks");
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -2148,7 +2120,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
@@ -2187,25 +2158,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
-      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(() => {
-      if (this.#recaptchaTokensPromise === attempt) {
-        this.#recaptchaTokensPromise = null;
-      }
-    });
-    this.#recaptchaTokensPromise = attempt;
+    modal.open();
   }
   async #fetchSession() {
     try {
@@ -2216,16 +2170,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchPaymentOptions() {
     try {
-      const options = await getPaymentOptions({
+      return await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-      console.log("[web-apple-pay] getPaymentOptions response received", options);
-      return options;
-    } catch (error) {
-      console.warn("[web-apple-pay] getPaymentOptions fetch failed \u2014 returning null", error);
+    } catch {
       return null;
     }
   }

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

@@ -6,7 +6,7 @@ export declare class ApplePayButton extends HTMLElement {
     static readonly tag = "teg-apple-pay-button";
     static define(): void;
     /**
-     * Creates and configures an ApplePayButton if the offer is eligible.
+     * Creates and configures an ApplePayButton if the feature flag is present.
      */
     static createIfEnabled(offer: Offer | undefined, country: string, entryPoint?: ApplePayEntryPoint): ApplePayButton | null;
     get offer(): Offer | null;

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
@@ -1908,6 +1893,7 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
 };
 
 // src/apple-pay-button.ts
+var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
 var DEFAULT_TOTAL = "0.00";
@@ -1923,7 +1909,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the offer is eligible.
+   * Creates and configures an ApplePayButton if the feature flag is present.
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1932,6 +1918,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
+    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+      return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
@@ -1960,7 +1949,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2025,7 +2013,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
-    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2038,10 +2025,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      console.log("[web-apple-pay] button shown \u2014 reason: all checks passed, Apple Pay is available and offer is eligible");
       this.#finishLoading();
-    } catch (error) {
-      console.warn("[web-apple-pay] button hidden \u2014 reason: unexpected error in render pipeline", error);
+    } catch {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
@@ -2052,7 +2037,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: Apple Pay unavailable on this device/browser");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2066,7 +2050,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #checkSession() {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
-      console.log(`[web-apple-pay] button removed from DOM \u2014 reason: session check failed, userType="${this.#sessionData.userType}"`);
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2076,7 +2059,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: no offer set on element before mount");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2104,16 +2086,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions) {
-      console.warn("[web-apple-pay] button removed from DOM \u2014 reason: getPaymentOptions threw an error (see previous log for details)");
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
-      return true;
-    }
-    if (!this.#paymentOptions.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: BFF responded but apple_pay is absent from payment options", {
-        receivedOptions: this.#paymentOptions.options
-      });
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2122,7 +2095,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   /** Injects the button template and wires click and confirm event listeners. */
   #renderTemplate() {
-    console.log("[web-apple-pay] button shown \u2014 reason: template injected into DOM (loading state), awaiting pipeline checks");
     this.style.removeProperty("display");
     ensureApplePayLogoSymbol();
     const template = document.createElement("template");
@@ -2143,7 +2115,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
@@ -2182,25 +2153,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
-      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(() => {
-      if (this.#recaptchaTokensPromise === attempt) {
-        this.#recaptchaTokensPromise = null;
-      }
-    });
-    this.#recaptchaTokensPromise = attempt;
+    modal.open();
   }
   async #fetchSession() {
     try {
@@ -2211,16 +2165,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   async #fetchPaymentOptions() {
     try {
-      const options = await getPaymentOptions({
+      return await getPaymentOptions({
         sku: this.#offer.sku_id,
         countryCode: this.#country,
         currencyCode: this.#offer.price?.currency_code ?? DEFAULT_CURRENCY,
         checkoutUrl: this.#returnUrl
       });
-      console.log("[web-apple-pay] getPaymentOptions response received", options);
-      return options;
-    } catch (error) {
-      console.warn("[web-apple-pay] getPaymentOptions fetch failed \u2014 returning null", error);
+    } catch {
       return null;
     }
   }