@economist/web-apple-pay 1.9.5 → 1.10.1

package/dist/index.js

@@ -1311,6 +1311,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
@@ -1353,7 +1354,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -1361,14 +1362,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });
@@ -2006,8 +2007,23 @@ var getExperimentKeyFromNextData = (flagKey) => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 
 // src/apple-pay-button.ts
+var ENTRY_POINT_CONFIG = {
+  ["dual_offer_banner" /* DUAL_OFFER_BANNER */]: {
+    isEligible: isEligibleForApplePayExpressExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["article_paywall" /* PAYWALL */]: {
+    isEligible: isEligibleForApplePayExpressPaywallExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY
+  },
+  ["article_regwall" /* REGWALL */]: {
+    isEligible: () => true,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  }
+};
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
@@ -2026,9 +2042,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
    *
-   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-   * for setting up `window.experimentIntegration` before calling this method.
+   * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+   * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+   * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+   *
+   * The host page is responsible for setting up `window.experimentIntegration`
+   * before calling this method.
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2038,11 +2057,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * `window.experimentIntegration`. Once all consumers are migrated, the URL param
    * fallback will be removed.
    *
-   * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-   * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-   * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-   * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-   * the dual-offer banner is only mounted for anonymous visitors.
+   * **Eligibility:**
+   * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+   * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+   * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2058,13 +2076,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     );
-    const isBannerEntryPoint = !entryPoint || entryPoint === "dual_offer_banner" /* DUAL_OFFER_BANNER */;
-    const isEligible = !isBannerEntryPoint || isEligibleForApplePayExpressExperiment();
-    if (isBannerEntryPoint && !hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
+    const resolvedEntryPoint = entryPoint || "dual_offer_banner" /* DUAL_OFFER_BANNER */;
+    const config = ENTRY_POINT_CONFIG[resolvedEntryPoint];
+    if (!config) {
+      return null;
+    }
+    const { isEligible: eligibilityCheck, experimentFlagKey } = config;
+    const isEligible = eligibilityCheck();
+    if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
     const experimentValue = window.experimentIntegration?.getVariant?.(
-      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+      experimentFlagKey
     );
     const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
     if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
@@ -2072,7 +2095,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         if (available) {
           trackApplePayExperimentExposure(
             experimentValue,
-            getExperimentKeyFromNextData(APPLE_PAY_EXPRESS_EXPERIMENT_KEY)
+            getExperimentKeyFromNextData(experimentFlagKey),
+            experimentFlagKey
           );
         }
       });
@@ -2187,18 +2211,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2210,8 +2248,7 @@ 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")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2219,8 +2256,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2247,8 +2283,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2393,6 +2428,9 @@ function defineApplePayElements() {
 }
 export {
   APPLE_PAY_EXCLUDED_VARIANTS,
+  APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_VARIANTS,
   ApplePayButton,
   ApplePayEntryPoint,
   ApplePayModal,

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

@@ -8,9 +8,12 @@ export declare class ApplePayButton extends HTMLElement {
     /**
      * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
      *
-     * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-     * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-     * for setting up `window.experimentIntegration` before calling this method.
+     * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+     * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+     * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+     *
+     * The host page is responsible for setting up `window.experimentIntegration`
+     * before calling this method.
      *
      * - `treatment` → button created and returned
      * - `control` / missing / anything else → returns null (button suppressed)
@@ -20,11 +23,10 @@ export declare class ApplePayButton extends HTMLElement {
      * `window.experimentIntegration`. Once all consumers are migrated, the URL param
      * fallback will be removed.
      *
-     * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-     * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-     * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-     * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-     * the dual-offer banner is only mounted for anonymous visitors.
+     * **Eligibility:**
+     * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+     * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+     * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
      *
      * @param offer - The offer to display in the Apple Pay flow.
      * @param country - The user's country code.

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

@@ -1300,6 +1300,7 @@ var redirectToCheckoutFallback = (params) => {
 
 // src/constants.ts
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
@@ -1342,7 +1343,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -1350,14 +1351,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });
@@ -1995,8 +1996,23 @@ var getExperimentKeyFromNextData = (flagKey) => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 
 // src/apple-pay-button.ts
+var ENTRY_POINT_CONFIG = {
+  ["dual_offer_banner" /* DUAL_OFFER_BANNER */]: {
+    isEligible: isEligibleForApplePayExpressExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["article_paywall" /* PAYWALL */]: {
+    isEligible: isEligibleForApplePayExpressPaywallExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY
+  },
+  ["article_regwall" /* REGWALL */]: {
+    isEligible: () => true,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  }
+};
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
@@ -2015,9 +2031,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
    *
-   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-   * for setting up `window.experimentIntegration` before calling this method.
+   * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+   * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+   * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+   *
+   * The host page is responsible for setting up `window.experimentIntegration`
+   * before calling this method.
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2027,11 +2046,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * `window.experimentIntegration`. Once all consumers are migrated, the URL param
    * fallback will be removed.
    *
-   * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-   * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-   * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-   * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-   * the dual-offer banner is only mounted for anonymous visitors.
+   * **Eligibility:**
+   * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+   * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+   * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2047,13 +2065,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     );
-    const isBannerEntryPoint = !entryPoint || entryPoint === "dual_offer_banner" /* DUAL_OFFER_BANNER */;
-    const isEligible = !isBannerEntryPoint || isEligibleForApplePayExpressExperiment();
-    if (isBannerEntryPoint && !hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
+    const resolvedEntryPoint = entryPoint || "dual_offer_banner" /* DUAL_OFFER_BANNER */;
+    const config = ENTRY_POINT_CONFIG[resolvedEntryPoint];
+    if (!config) {
+      return null;
+    }
+    const { isEligible: eligibilityCheck, experimentFlagKey } = config;
+    const isEligible = eligibilityCheck();
+    if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
     const experimentValue = window.experimentIntegration?.getVariant?.(
-      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+      experimentFlagKey
     );
     const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
     if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
@@ -2061,7 +2084,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         if (available) {
           trackApplePayExperimentExposure(
             experimentValue,
-            getExperimentKeyFromNextData(APPLE_PAY_EXPRESS_EXPERIMENT_KEY)
+            getExperimentKeyFromNextData(experimentFlagKey),
+            experimentFlagKey
           );
         }
       });
@@ -2176,18 +2200,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2199,8 +2237,7 @@ 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")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2208,8 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2236,8 +2272,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

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

@@ -1308,6 +1308,7 @@ var redirectToCheckoutFallback = (params) => {
 
 // src/constants.ts
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
@@ -1350,7 +1351,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -1358,14 +1359,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });
@@ -2003,8 +2004,23 @@ var getExperimentKeyFromNextData = (flagKey) => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 
 // src/apple-pay-button.ts
+var ENTRY_POINT_CONFIG = {
+  ["dual_offer_banner" /* DUAL_OFFER_BANNER */]: {
+    isEligible: isEligibleForApplePayExpressExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["article_paywall" /* PAYWALL */]: {
+    isEligible: isEligibleForApplePayExpressPaywallExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY
+  },
+  ["article_regwall" /* REGWALL */]: {
+    isEligible: () => true,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  }
+};
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
@@ -2023,9 +2039,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
    *
-   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-   * for setting up `window.experimentIntegration` before calling this method.
+   * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+   * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+   * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+   *
+   * The host page is responsible for setting up `window.experimentIntegration`
+   * before calling this method.
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2035,11 +2054,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * `window.experimentIntegration`. Once all consumers are migrated, the URL param
    * fallback will be removed.
    *
-   * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-   * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-   * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-   * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-   * the dual-offer banner is only mounted for anonymous visitors.
+   * **Eligibility:**
+   * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+   * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+   * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2055,13 +2073,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     );
-    const isBannerEntryPoint = !entryPoint || entryPoint === "dual_offer_banner" /* DUAL_OFFER_BANNER */;
-    const isEligible = !isBannerEntryPoint || isEligibleForApplePayExpressExperiment();
-    if (isBannerEntryPoint && !hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
+    const resolvedEntryPoint = entryPoint || "dual_offer_banner" /* DUAL_OFFER_BANNER */;
+    const config = ENTRY_POINT_CONFIG[resolvedEntryPoint];
+    if (!config) {
+      return null;
+    }
+    const { isEligible: eligibilityCheck, experimentFlagKey } = config;
+    const isEligible = eligibilityCheck();
+    if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
     const experimentValue = window.experimentIntegration?.getVariant?.(
-      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+      experimentFlagKey
     );
     const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
     if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
@@ -2069,7 +2092,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         if (available) {
           trackApplePayExperimentExposure(
             experimentValue,
-            getExperimentKeyFromNextData(APPLE_PAY_EXPRESS_EXPERIMENT_KEY)
+            getExperimentKeyFromNextData(experimentFlagKey),
+            experimentFlagKey
           );
         }
       });
@@ -2184,18 +2208,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2207,8 +2245,7 @@ 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")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2216,8 +2253,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2244,8 +2280,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

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

@@ -1300,6 +1300,7 @@ var redirectToCheckoutFallback = (params) => {
 
 // src/constants.ts
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
@@ -1342,7 +1343,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -1350,14 +1351,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });
@@ -1995,8 +1996,23 @@ var getExperimentKeyFromNextData = (flagKey) => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 
 // src/apple-pay-button.ts
+var ENTRY_POINT_CONFIG = {
+  ["dual_offer_banner" /* DUAL_OFFER_BANNER */]: {
+    isEligible: isEligibleForApplePayExpressExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["article_paywall" /* PAYWALL */]: {
+    isEligible: isEligibleForApplePayExpressPaywallExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY
+  },
+  ["article_regwall" /* REGWALL */]: {
+    isEligible: () => true,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  }
+};
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
@@ -2015,9 +2031,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
    *
-   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-   * for setting up `window.experimentIntegration` before calling this method.
+   * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+   * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+   * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+   *
+   * The host page is responsible for setting up `window.experimentIntegration`
+   * before calling this method.
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2027,11 +2046,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * `window.experimentIntegration`. Once all consumers are migrated, the URL param
    * fallback will be removed.
    *
-   * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-   * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-   * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-   * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-   * the dual-offer banner is only mounted for anonymous visitors.
+   * **Eligibility:**
+   * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+   * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+   * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2047,13 +2065,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     );
-    const isBannerEntryPoint = !entryPoint || entryPoint === "dual_offer_banner" /* DUAL_OFFER_BANNER */;
-    const isEligible = !isBannerEntryPoint || isEligibleForApplePayExpressExperiment();
-    if (isBannerEntryPoint && !hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
+    const resolvedEntryPoint = entryPoint || "dual_offer_banner" /* DUAL_OFFER_BANNER */;
+    const config = ENTRY_POINT_CONFIG[resolvedEntryPoint];
+    if (!config) {
+      return null;
+    }
+    const { isEligible: eligibilityCheck, experimentFlagKey } = config;
+    const isEligible = eligibilityCheck();
+    if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
     const experimentValue = window.experimentIntegration?.getVariant?.(
-      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+      experimentFlagKey
     );
     const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
     if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
@@ -2061,7 +2084,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         if (available) {
           trackApplePayExperimentExposure(
             experimentValue,
-            getExperimentKeyFromNextData(APPLE_PAY_EXPRESS_EXPERIMENT_KEY)
+            getExperimentKeyFromNextData(experimentFlagKey),
+            experimentFlagKey
           );
         }
       });
@@ -2176,18 +2200,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2199,8 +2237,7 @@ 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")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2208,8 +2245,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2236,8 +2272,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;

package/dist/src/constants.d.ts

@@ -4,10 +4,12 @@ export declare enum ApplePayEntryPoint {
     DUAL_OFFER_BANNER = "dual_offer_banner"
 }
 /**
- * Amplitude experiment key for Apple Pay Express Checkout on banners.
+ * Amplitude experiment key for Apple Pay Express Checkout on homepage banners
+ * (dual-offer banner) and article banner regwalls.
+ *
  * This package reads the variant for this key internally via
  * `window.experimentIntegration.getVariant()` — set up by the host page
- * before `createIfEnabled` is called. Gates all entry points (paywall, regwall, banner).
+ * before `createIfEnabled` is called.
  *
  * Fail-closed: missing integration, missing key, `control`, or Amplitude fetch
  * failure on the host → button is hidden (unless QA URL param is present).
@@ -16,6 +18,20 @@ export declare enum ApplePayEntryPoint {
  * (Engagement / Insider / Podcasts).
  */
 export declare const APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+/**
+ * Amplitude experiment key for Apple Pay Express Checkout on article paywalls
+ * (`ApplePayEntryPoint.PAYWALL`, e.g. single-offer-paywall / multi-offer paywall).
+ *
+ * Same fail-closed / QA-param behaviour as {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}.
+ * Eligibility for this flag ignores homepage and requires Safari/Apple device
+ * (plus `isApplePayAvailable` before `$exposure`).
+ */
+export declare const APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
+/**
+ * Known Amplitude experiment flag keys for Apple Pay Express Checkout.
+ * Narrowed so callers cannot pass an arbitrary typo'd string.
+ */
+export type ApplePayExperimentFlagKey = typeof APPLE_PAY_EXPRESS_EXPERIMENT_KEY | typeof APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY;
 /**
  * Amplitude variant values for the Apple Pay Express Checkout experiment.
  * CONTROL   → button hidden (baseline)

package/dist/src/constants.js

@@ -6,12 +6,14 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
 };
 export {
   APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY,
   APPLE_PAY_EXPRESS_VARIANTS,
   ApplePayEntryPoint
 };

package/dist/src/index.d.ts

@@ -2,7 +2,8 @@ export { ApplePayButton, APPLE_PAY_EXCLUDED_VARIANTS, } from './apple-pay-button
 export { ApplePayModal } from './apple-pay-modal';
 export { ensureApplePayLogoSymbol } from './apple-pay-logo';
 export { configureApplePay } from './clients/payment-checkout/config';
-export { ApplePayEntryPoint } from './constants';
+export { ApplePayEntryPoint, APPLE_PAY_EXPRESS_EXPERIMENT_KEY, APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY, APPLE_PAY_EXPRESS_VARIANTS, } from './constants';
+export type { ApplePayExperimentFlagKey } from './constants';
 export type { ApplePayRuntimeConfig } from './clients/payment-checkout/config';
 export type { Offer } from './types/offer.types';
 export declare function defineApplePayElements(): void;

package/dist/src/index.js

@@ -1311,6 +1311,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
+var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
 var APPLE_PAY_EXPRESS_VARIANTS = {
   CONTROL: "control",
   TREATMENT: "treatment"
@@ -1353,7 +1354,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -1361,14 +1362,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });
@@ -2006,8 +2007,23 @@ var getExperimentKeyFromNextData = (flagKey) => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 
 // src/apple-pay-button.ts
+var ENTRY_POINT_CONFIG = {
+  ["dual_offer_banner" /* DUAL_OFFER_BANNER */]: {
+    isEligible: isEligibleForApplePayExpressExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["article_paywall" /* PAYWALL */]: {
+    isEligible: isEligibleForApplePayExpressPaywallExperiment,
+    experimentFlagKey: APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY
+  },
+  ["article_regwall" /* REGWALL */]: {
+    isEligible: () => true,
+    experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  }
+};
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
@@ -2026,9 +2042,12 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /**
    * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
    *
-   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
-   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
-   * for setting up `window.experimentIntegration` before calling this method.
+   * Reads the experiment variant from `window.experimentIntegration.getVariant`:
+   * - {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY} for `PAYWALL`
+   * - {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY} for `REGWALL` / `DUAL_OFFER_BANNER`
+   *
+   * The host page is responsible for setting up `window.experimentIntegration`
+   * before calling this method.
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2038,11 +2057,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * `window.experimentIntegration`. Once all consumers are migrated, the URL param
    * fallback will be removed.
    *
-   * **SMA-3301 eligibility:** the homepage + Safari/iPhone eligibility gate
-   * only applies to the `DUAL_OFFER_BANNER` entry point (or when `entryPoint`
-   * is omitted). `PAYWALL`/`REGWALL` entry points render on article pages and
-   * keep their pre-SMA-3301 behaviour unaffected. Anonymous is assumed because
-   * the dual-offer banner is only mounted for anonymous visitors.
+   * **Eligibility:**
+   * - `DUAL_OFFER_BANNER` (or omitted): homepage + Safari/iPhone (SMA-3301)
+   * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
+   * - `REGWALL`: no host-side placement gate (pre-SMA-3301 article behaviour)
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2058,13 +2076,18 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     );
-    const isBannerEntryPoint = !entryPoint || entryPoint === "dual_offer_banner" /* DUAL_OFFER_BANNER */;
-    const isEligible = !isBannerEntryPoint || isEligibleForApplePayExpressExperiment();
-    if (isBannerEntryPoint && !hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
+    const resolvedEntryPoint = entryPoint || "dual_offer_banner" /* DUAL_OFFER_BANNER */;
+    const config = ENTRY_POINT_CONFIG[resolvedEntryPoint];
+    if (!config) {
+      return null;
+    }
+    const { isEligible: eligibilityCheck, experimentFlagKey } = config;
+    const isEligible = eligibilityCheck();
+    if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
     const experimentValue = window.experimentIntegration?.getVariant?.(
-      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+      experimentFlagKey
     );
     const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
     if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
@@ -2072,7 +2095,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         if (available) {
           trackApplePayExperimentExposure(
             experimentValue,
-            getExperimentKeyFromNextData(APPLE_PAY_EXPRESS_EXPERIMENT_KEY)
+            getExperimentKeyFromNextData(experimentFlagKey),
+            experimentFlagKey
           );
         }
       });
@@ -2187,18 +2211,32 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       if (await this.#fetchAndCacheOptions()) return;
       this.#finishLoading();
     } catch {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
     } finally {
       this.#rendering = false;
     }
   }
+  /**
+   * Stop the loading spinner before tear-down so Safari does not leave a GPU
+   * ghost of `.apple-pay-btn.wap-loading::before` after the container is removed.
+   */
+  #hide() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      button.removeAttribute("aria-busy");
+      button.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    }
+    this.getAnimations?.({ subtree: true }).forEach((animation) => animation.cancel());
+    void this.offsetHeight;
+    this.style.display = "none";
+    this.querySelector(SEL_CONTAINER)?.remove();
+  }
   /** Returns `true` (hide) when Apple Pay is unavailable on this device/browser. */
   async #checkAvailability() {
     const available = await isApplePayAvailable();
     if (!available) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2210,8 +2248,7 @@ 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")) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2219,8 +2256,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   /** Returns `true` (hide) when no offer has been set before mount. */
   #checkOffer() {
     if (!this.#offer) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2247,8 +2283,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
     if (!this.#paymentOptions?.options?.apple_pay) {
-      this.style.display = "none";
-      this.querySelector(SEL_CONTAINER)?.remove();
+      this.#hide();
       return true;
     }
     return false;
@@ -2393,6 +2428,9 @@ function defineApplePayElements() {
 }
 export {
   APPLE_PAY_EXCLUDED_VARIANTS,
+  APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_VARIANTS,
   ApplePayButton,
   ApplePayEntryPoint,
   ApplePayModal,

package/dist/src/utils/applePayExpressEligibility.d.ts

@@ -2,15 +2,19 @@
  * Host-side eligibility for Apple Pay Express Feature Experiment (SMA-3301).
  *
  * Gates createIfEnabled before getVariant / $exposure so only the intended
- * population (homepage + Safari/iPhone) participates. Anonymous is assumed
- * because the dual-offer banner is only mounted for anonymous visitors.
- * Exposure is further gated on isApplePayAvailable() (BYPASS_APPLE_PAY_CHECKS
- * respected). Amplitude audience targeting uses generic user_properties from
- * Engagement.
+ * population participates. Exposure is further gated on isApplePayAvailable()
+ * (BYPASS_APPLE_PAY_CHECKS respected). Amplitude audience targeting uses
+ * generic user_properties from Engagement.
  */
 export declare const isApplePayExpressHomepage: (pathname?: string) => boolean;
 /**
- * True when the visitor may enter the Apple Pay Express experiment path
- * (assignment read + $exposure + optional treatment button).
+ * Dual-offer homepage banner: homepage + Safari/iPhone.
+ * Anonymous is assumed because the dual-offer banner is only mounted for
+ * anonymous visitors.
  */
 export declare const isEligibleForApplePayExpressExperiment: () => boolean;
+/**
+ * Article paywalls (`ApplePayEntryPoint.PAYWALL`): Safari/Apple device only.
+ * Homepage targeting does not apply — paywalls render on article pages.
+ */
+export declare const isEligibleForApplePayExpressPaywallExperiment: () => boolean;

package/dist/src/utils/applePayExpressEligibility.js

@@ -8,7 +8,9 @@ var isAppleDeviceOrSafari = () => {
 // src/utils/applePayExpressEligibility.ts
 var isApplePayExpressHomepage = (pathname = window.location.pathname) => pathname === "/";
 var isEligibleForApplePayExpressExperiment = () => isApplePayExpressHomepage() && isAppleDeviceOrSafari();
+var isEligibleForApplePayExpressPaywallExperiment = () => isAppleDeviceOrSafari();
 export {
   isApplePayExpressHomepage,
-  isEligibleForApplePayExpressExperiment
+  isEligibleForApplePayExpressExperiment,
+  isEligibleForApplePayExpressPaywallExperiment
 };

package/dist/src/utils/expressCheckoutTracking.d.ts

@@ -11,6 +11,7 @@
  *
  * Event names are aligned to the PRD spec (section 10 — Tracking & Analytics).
  */
+import { type ApplePayExperimentFlagKey } from '../constants';
 declare global {
     interface Window {
         tedl?: {
@@ -51,11 +52,15 @@ export type ImpressionMetadata = {
  * Amplitude Experiment exposure for Apple Pay Express (SMA-3301).
  *
  * Fired from createIfEnabled only after isApplePayAvailable() succeeds
- * (control or treatment). Deduped per pathname + variant so repeated banner
- * renders on the same page do not over-count. Includes experiment_key from
- * Engagement SSR (__NEXT_DATA__) when present for run attribution.
+ * (control or treatment). Deduped per pathname + flag_key + variant so
+ * repeated renders on the same page do not over-count. Includes
+ * experiment_key from Engagement SSR (__NEXT_DATA__) when present for run
+ * attribution.
+ *
+ * @param flagKey - Amplitude flag_key. Defaults to the banners experiment;
+ *   paywalls pass {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}.
  */
-export declare const trackApplePayExperimentExposure: (variant: string, experimentKey?: string) => void;
+export declare const trackApplePayExperimentExposure: (variant: string, experimentKey?: string, flagKey?: ApplePayExperimentFlagKey) => void;
 /** Wallet button displayed — emits all 5 required analytics dimensions. */
 export declare const trackExpressWalletImpression: (skuId: string, { entryPoint, country }: ImpressionMetadata) => void;
 /** Wallet button clicked */

package/dist/src/utils/expressCheckoutTracking.js

@@ -42,7 +42,7 @@ var track = (action, extra) => {
     ...extra
   });
 };
-var trackApplePayExperimentExposure = (variant, experimentKey) => {
+var trackApplePayExperimentExposure = (variant, experimentKey, flagKey = APPLE_PAY_EXPRESS_EXPERIMENT_KEY) => {
   const isActiveVariant = variant === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || variant === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
   if (!isActiveVariant) {
     return;
@@ -50,14 +50,14 @@ var trackApplePayExperimentExposure = (variant, experimentKey) => {
   const exposures = window.__applePayExperimentExposures ?? {};
   window.__applePayExperimentExposures = exposures;
   const pathname = window.location?.pathname ?? "";
-  const dedupeKey = `${pathname}:${APPLE_PAY_EXPRESS_EXPERIMENT_KEY}:${variant}`;
+  const dedupeKey = `${pathname}:${flagKey}:${variant}`;
   if (exposures[dedupeKey]) {
     return;
   }
   exposures[dedupeKey] = true;
   emitTedlEvent({
     name: "$exposure",
-    flag_key: APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+    flag_key: flagKey,
     variant,
     ...experimentKey ? { experiment_key: experimentKey } : {}
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "1.9.5",
+  "version": "1.10.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",