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

package/dist/index.js

@@ -1913,6 +1913,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 +1929,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 +1938,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 +1969,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2030,7 +2033,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 +2045,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 +2057,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 +2070,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 +2079,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;
@@ -2110,7 +2107,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: payment options BFF reports Apple Pay unavailable for this offer");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2119,7 +2115,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");
@@ -2140,7 +2135,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
@@ -2179,25 +2173,9 @@ 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;
+    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+    modal.open(recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

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

@@ -1908,6 +1908,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 +1924,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 +1933,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 +1964,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2025,7 +2028,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 +2040,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 +2052,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 +2065,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 +2074,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;
@@ -2105,7 +2102,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: payment options BFF reports Apple Pay unavailable for this offer");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2114,7 +2110,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");
@@ -2135,7 +2130,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
@@ -2174,25 +2168,9 @@ 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;
+    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+    modal.open(recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

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

@@ -1916,6 +1916,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";
@@ -1931,7 +1932,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) {
@@ -1940,6 +1941,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;
@@ -1968,7 +1972,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2033,7 +2036,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
-    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2046,10 +2048,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 {
@@ -2060,7 +2060,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;
@@ -2074,7 +2073,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;
@@ -2084,7 +2082,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;
@@ -2113,7 +2110,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: payment options BFF reports Apple Pay unavailable for this offer");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2122,7 +2118,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 +2138,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 +2176,9 @@ 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;
+    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+    modal.open(recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

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

@@ -1908,6 +1908,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 +1924,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 +1933,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 +1964,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2025,7 +2028,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 +2040,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 +2052,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 +2065,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 +2074,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;
@@ -2105,7 +2102,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: payment options BFF reports Apple Pay unavailable for this offer");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2114,7 +2110,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");
@@ -2135,7 +2130,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
@@ -2174,25 +2168,9 @@ 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;
+    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+    modal.open(recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

package/dist/src/index.js

@@ -1913,6 +1913,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 +1929,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 +1938,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 +1969,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
-  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -2030,7 +2033,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 +2045,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 +2057,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 +2070,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 +2079,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;
@@ -2110,7 +2107,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      console.log("[web-apple-pay] button removed from DOM \u2014 reason: payment options BFF reports Apple Pay unavailable for this offer");
       this.style.display = "none";
       this.querySelector(SEL_CONTAINER)?.remove();
       return true;
@@ -2119,7 +2115,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");
@@ -2140,7 +2135,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
@@ -2179,25 +2173,9 @@ 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;
+    const recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+    modal.open(recaptchaTokensPromise);
   }
   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.40",
+  "version": "0.1.3-beta.42",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",