@economist/web-apple-pay 1.10.0 → 1.10.2-beta.1

package/README.md

@@ -54,6 +54,56 @@ container.appendChild(button);
 
 When clicked, the button creates and opens `teg-apple-pay-modal` automatically.
 
+### 3) Gated creation — `createIfEnabled`
+
+Hosts that mount Apple Pay on a wall, banner, or popup should use
+`ApplePayButton.createIfEnabled(offer, country, entryPoint)` instead of
+`document.createElement`. It applies Amplitude experiment and placement rules
+per entry point, then returns a configured button or `null`.
+
+```ts
+import {
+  ApplePayButton,
+  ApplePayEntryPoint,
+} from '@economist/web-apple-pay';
+
+const button = ApplePayButton.createIfEnabled(
+  offer,
+  'US',
+  ApplePayEntryPoint.FREE_TRIAL_POPUP,
+);
+
+if (button) {
+  container.appendChild(button);
+  await button.whenReady();
+  if (button.style.display === 'none') {
+    button.remove();
+  }
+}
+```
+
+#### Entry points
+
+| `ApplePayEntryPoint` | Value | Amplitude flag | Placement eligibility |
+| --- | --- | --- | --- |
+| `PAYWALL` | `article_paywall` | `apple-pay-express-checkout-on-paywalls` | Safari / Apple device |
+| `REGWALL` | `article_regwall` | `apple-pay-express-checkout-on-banners` | none |
+| `DUAL_OFFER_BANNER` (default if omitted) | `dual_offer_banner` | `apple-pay-express-checkout-on-banners` | homepage + Safari / iPhone |
+| `FREE_TRIAL_POPUP` | `free_trial_popup` | **none** — always shown | none |
+
+`FREE_TRIAL_POPUP` does not read `window.experimentIntegration` and does not
+emit `$exposure`. The button is created whenever the offer is valid (excluded
+variants still suppress it). The component still hides itself after mount if
+Apple Pay is unavailable on the device.
+
+For every other entry point:
+
+- Host must set `window.experimentIntegration.getVariant` before calling
+  `createIfEnabled`.
+- `treatment` → button created; `control` / missing / anything else → `null`.
+- QA override: `?FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` shows the button without
+  emitting `$exposure`.
+
 ## Runtime configuration
 
 ### `configureApplePay(config)`
@@ -120,7 +170,9 @@ Consumers should listen for this event and continue payment orchestration.
 - `defineApplePayElements()`: registers both custom elements.
 - `configureApplePay(config)`: sets required runtime config (merchant ID and wallet API base URL, with optional debug bypass).
 - `ApplePayButton`: button component class.
+  - `createIfEnabled(offer, country, entryPoint?)`: returns a configured button or `null` after applying Amplitude / placement rules for the entry point. `FREE_TRIAL_POPUP` is not experiment-gated.
   - `whenReady(): Promise<void>` — resolves when the current render lifecycle completes (available or hidden). Resolves immediately if called before the element is connected.
+- `ApplePayEntryPoint`: where the button is mounted (`PAYWALL`, `REGWALL`, `DUAL_OFFER_BANNER`, `FREE_TRIAL_POPUP`).
 - `ApplePayModal`: modal component class.
 - `ensureApplePayLogoSymbol()`: logo symbol injection helper.
 - `Offer`: offer contract type used by component props.
@@ -133,7 +185,8 @@ Check:
 
 - `configureApplePay(...)` was called before rendering (with a valid `merchantId` and `walletApiBaseUrl`)
 - device/browser supports Apple Pay (Safari on Apple device required)
-- query string/feature flag gating for your page is satisfied
+- for paywall / regwall / dual-offer banner: Amplitude variant is `treatment`, or the `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` QA param is present
+- `FREE_TRIAL_POPUP` is not Amplitude-gated — if the button is missing, check offer variant and device support instead
 - offer variant is not excluded (`bundle`, `insider_print`)
 
 ### Logged-in checkbox copy looks wrong
@@ -184,3 +237,4 @@ Story coverage matrix:
 - `ApplePayButton` behavior and state variants are available as individual canvas stories in Storybook.
 - `ApplePayModal` docs page shows the stable default example.
 - `ApplePayModal` behavior and state variants are available as individual canvas stories in Storybook.
+

package/dist/index.js

@@ -1308,6 +1308,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
@@ -2022,6 +2023,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2045,9 +2049,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * 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`
+   * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
    *
    * The host page is responsible for setting up `window.experimentIntegration`
-   * before calling this method.
+   * before calling this method (except `FREE_TRIAL_POPUP`).
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2060,7 +2065,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * **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)
+   * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2086,24 +2091,24 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
-    const experimentValue = window.experimentIntegration?.getVariant?.(
-      experimentFlagKey
-    );
-    const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
-      void isApplePayAvailable().then((available) => {
-        if (available) {
-          trackApplePayExperimentExposure(
-            experimentValue,
-            getExperimentKeyFromNextData(experimentFlagKey),
-            experimentFlagKey
-          );
-        }
-      });
-    }
-    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (!isTreatment && !hasUrlParamFlag) {
-      return null;
+    if (experimentFlagKey) {
+      const experimentValue = window.experimentIntegration?.getVariant?.(experimentFlagKey);
+      const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
+        void isApplePayAvailable().then((available) => {
+          if (available) {
+            trackApplePayExperimentExposure(
+              experimentValue,
+              getExperimentKeyFromNextData(experimentFlagKey),
+              experimentFlagKey
+            );
+          }
+        });
+      }
+      const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (!isTreatment && !hasUrlParamFlag) {
+        return null;
+      }
     }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
@@ -2211,18 +2216,34 @@ 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;
@@ -2234,8 +2255,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;
@@ -2243,8 +2263,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;
@@ -2271,8 +2290,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.d.ts

@@ -11,9 +11,10 @@ export declare class ApplePayButton extends HTMLElement {
      * 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`
+     * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
      *
      * The host page is responsible for setting up `window.experimentIntegration`
-     * before calling this method.
+     * before calling this method (except `FREE_TRIAL_POPUP`).
      *
      * - `treatment` → button created and returned
      * - `control` / missing / anything else → returns null (button suppressed)
@@ -26,7 +27,7 @@ export declare class ApplePayButton extends HTMLElement {
      * **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)
+     * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
      *
      * @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

@@ -2011,6 +2011,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2034,9 +2037,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * 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`
+   * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
    *
    * The host page is responsible for setting up `window.experimentIntegration`
-   * before calling this method.
+   * before calling this method (except `FREE_TRIAL_POPUP`).
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2049,7 +2053,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * **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)
+   * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2075,24 +2079,24 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
-    const experimentValue = window.experimentIntegration?.getVariant?.(
-      experimentFlagKey
-    );
-    const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
-      void isApplePayAvailable().then((available) => {
-        if (available) {
-          trackApplePayExperimentExposure(
-            experimentValue,
-            getExperimentKeyFromNextData(experimentFlagKey),
-            experimentFlagKey
-          );
-        }
-      });
-    }
-    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (!isTreatment && !hasUrlParamFlag) {
-      return null;
+    if (experimentFlagKey) {
+      const experimentValue = window.experimentIntegration?.getVariant?.(experimentFlagKey);
+      const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
+        void isApplePayAvailable().then((available) => {
+          if (available) {
+            trackApplePayExperimentExposure(
+              experimentValue,
+              getExperimentKeyFromNextData(experimentFlagKey),
+              experimentFlagKey
+            );
+          }
+        });
+      }
+      const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (!isTreatment && !hasUrlParamFlag) {
+        return null;
+      }
     }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
@@ -2200,18 +2204,34 @@ 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;
@@ -2223,8 +2243,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;
@@ -2232,8 +2251,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;
@@ -2260,8 +2278,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

@@ -2019,6 +2019,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2042,9 +2045,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * 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`
+   * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
    *
    * The host page is responsible for setting up `window.experimentIntegration`
-   * before calling this method.
+   * before calling this method (except `FREE_TRIAL_POPUP`).
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2057,7 +2061,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * **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)
+   * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2083,24 +2087,24 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
-    const experimentValue = window.experimentIntegration?.getVariant?.(
-      experimentFlagKey
-    );
-    const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
-      void isApplePayAvailable().then((available) => {
-        if (available) {
-          trackApplePayExperimentExposure(
-            experimentValue,
-            getExperimentKeyFromNextData(experimentFlagKey),
-            experimentFlagKey
-          );
-        }
-      });
-    }
-    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (!isTreatment && !hasUrlParamFlag) {
-      return null;
+    if (experimentFlagKey) {
+      const experimentValue = window.experimentIntegration?.getVariant?.(experimentFlagKey);
+      const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
+        void isApplePayAvailable().then((available) => {
+          if (available) {
+            trackApplePayExperimentExposure(
+              experimentValue,
+              getExperimentKeyFromNextData(experimentFlagKey),
+              experimentFlagKey
+            );
+          }
+        });
+      }
+      const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (!isTreatment && !hasUrlParamFlag) {
+        return null;
+      }
     }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
@@ -2208,18 +2212,34 @@ 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;
@@ -2231,8 +2251,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;
@@ -2240,8 +2259,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;
@@ -2268,8 +2286,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

@@ -2011,6 +2011,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2034,9 +2037,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * 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`
+   * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
    *
    * The host page is responsible for setting up `window.experimentIntegration`
-   * before calling this method.
+   * before calling this method (except `FREE_TRIAL_POPUP`).
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2049,7 +2053,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * **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)
+   * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2075,24 +2079,24 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
-    const experimentValue = window.experimentIntegration?.getVariant?.(
-      experimentFlagKey
-    );
-    const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
-      void isApplePayAvailable().then((available) => {
-        if (available) {
-          trackApplePayExperimentExposure(
-            experimentValue,
-            getExperimentKeyFromNextData(experimentFlagKey),
-            experimentFlagKey
-          );
-        }
-      });
-    }
-    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (!isTreatment && !hasUrlParamFlag) {
-      return null;
+    if (experimentFlagKey) {
+      const experimentValue = window.experimentIntegration?.getVariant?.(experimentFlagKey);
+      const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
+        void isApplePayAvailable().then((available) => {
+          if (available) {
+            trackApplePayExperimentExposure(
+              experimentValue,
+              getExperimentKeyFromNextData(experimentFlagKey),
+              experimentFlagKey
+            );
+          }
+        });
+      }
+      const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (!isTreatment && !hasUrlParamFlag) {
+        return null;
+      }
     }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
@@ -2200,18 +2204,34 @@ 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;
@@ -2223,8 +2243,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;
@@ -2232,8 +2251,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;
@@ -2260,8 +2278,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

@@ -1,7 +1,9 @@
 export declare enum ApplePayEntryPoint {
     PAYWALL = "article_paywall",
     REGWALL = "article_regwall",
-    DUAL_OFFER_BANNER = "dual_offer_banner"
+    DUAL_OFFER_BANNER = "dual_offer_banner",
+    /** Post-registration free-trial popup. Not Amplitude-gated. */
+    FREE_TRIAL_POPUP = "free_trial_popup"
 }
 /**
  * Amplitude experiment key for Apple Pay Express Checkout on homepage banners

package/dist/src/constants.js

@@ -3,6 +3,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";

package/dist/src/index.js

@@ -1308,6 +1308,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-banners";
@@ -2022,6 +2023,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     experimentFlagKey: APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2045,9 +2049,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * 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`
+   * - no Amplitude gate for `FREE_TRIAL_POPUP` (always shown)
    *
    * The host page is responsible for setting up `window.experimentIntegration`
-   * before calling this method.
+   * before calling this method (except `FREE_TRIAL_POPUP`).
    *
    * - `treatment` → button created and returned
    * - `control` / missing / anything else → returns null (button suppressed)
@@ -2060,7 +2065,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    * **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)
+   * - `REGWALL` / `FREE_TRIAL_POPUP`: no host-side placement gate
    *
    * @param offer - The offer to display in the Apple Pay flow.
    * @param country - The user's country code.
@@ -2086,24 +2091,24 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!hasUrlParamFlag && !bypassApplePayChecks() && !isEligible) {
       return null;
     }
-    const experimentValue = window.experimentIntegration?.getVariant?.(
-      experimentFlagKey
-    );
-    const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
-      void isApplePayAvailable().then((available) => {
-        if (available) {
-          trackApplePayExperimentExposure(
-            experimentValue,
-            getExperimentKeyFromNextData(experimentFlagKey),
-            experimentFlagKey
-          );
-        }
-      });
-    }
-    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
-    if (!isTreatment && !hasUrlParamFlag) {
-      return null;
+    if (experimentFlagKey) {
+      const experimentValue = window.experimentIntegration?.getVariant?.(experimentFlagKey);
+      const isExperimentVariant = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.CONTROL || experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (isExperimentVariant && isEligible && !bypassApplePayChecks() && !hasUrlParamFlag) {
+        void isApplePayAvailable().then((available) => {
+          if (available) {
+            trackApplePayExperimentExposure(
+              experimentValue,
+              getExperimentKeyFromNextData(experimentFlagKey),
+              experimentFlagKey
+            );
+          }
+        });
+      }
+      const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+      if (!isTreatment && !hasUrlParamFlag) {
+        return null;
+      }
     }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
@@ -2211,18 +2216,34 @@ 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;
@@ -2234,8 +2255,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;
@@ -2243,8 +2263,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;
@@ -2271,8 +2290,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/package.json

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