@economist/web-apple-pay 1.11.1 → 1.12.0

package/README.md

@@ -127,6 +127,7 @@ Consumers should listen for this event and continue payment orchestration.
   - `createIfEnabled(offer, country, entryPoint?)`: returns a configured button or `null`.
     - `DUAL_OFFER_BANNER` (or omitted): always-on after offer exclusions — no homepage/Safari gate at `createIfEnabled` (device gating via `isApplePayAvailable` on mount); no banners Amplitude experiment / `$exposure`.
     - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; wallet impression `entry_point` is `free_trial_banner`.
+    - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude `getVariant` / `$exposure`. Wallet impression `entry_point` is `free_trial_popup`.
     - `PAYWALL`: experiment-gated via `apple-pay-express-checkout-on-paywalls` (`treatment` or QA URL).
     - `REGWALL`: inert — always returns `null`.
 - `ApplePayModal`: modal component class.
@@ -147,7 +148,7 @@ Check:
 - `configureApplePay(...)` was called before rendering (with a valid `merchantId` and `walletApiBaseUrl`)
 - device/browser supports Apple Pay (Safari on Apple device required — enforced by `isApplePayAvailable` on mount)
 - for paywalls: Amplitude treatment (or `?FEATURE_APPLE_PAY_EXPRESS_CHECKOUT`) is satisfied, plus Safari/Apple placement eligibility
-- for banners: consumer kill switch off (no homepage/Safari gate at `createIfEnabled`)
+- for banners / `FREE_TRIAL_POPUP`: consumer kill switch off (no homepage/Safari gate at `createIfEnabled`; not Amplitude-gated)
 - offer variant is not excluded (`bundle`, `insider_print`)
 
 ### Logged-in checkbox copy looks wrong

package/dist/index.js

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;
@@ -1309,6 +1311,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
   ApplePayEntryPoint2["FREE_TRIAL_BANNER"] = "free_trial_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
@@ -2001,6 +2004,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     enabled: false
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2026,6 +2032,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *   `$exposure`.
    * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
    *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+   * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+   *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
    * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
    *   (`treatment` or QA URL param). The host must set up
    *   `window.experimentIntegration` before calling for this entry point.
@@ -2033,14 +2041,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *
    * **PAYWALL only — transition period:** the legacy
    * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-   * treatment (and without inflating `$exposure`). For banners there is no
+   * treatment (and without inflating `$exposure`). For banners / popup there is no
    * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
    * `isApplePayAvailable()` on mount.
    *
    * **Eligibility:**
-   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-   *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-   *   later by `isApplePayAvailable()` on mount)
+   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+   *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+   *   is enforced later by `isApplePayAvailable()` on mount)
    * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
    *
    * @param offer - The offer to display in the Apple Pay flow.

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

@@ -13,6 +13,8 @@ export declare class ApplePayButton extends HTMLElement {
      *   `$exposure`.
      * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
      *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+     * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+     *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
      * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
      *   (`treatment` or QA URL param). The host must set up
      *   `window.experimentIntegration` before calling for this entry point.
@@ -20,14 +22,14 @@ export declare class ApplePayButton extends HTMLElement {
      *
      * **PAYWALL only — transition period:** the legacy
      * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-     * treatment (and without inflating `$exposure`). For banners there is no
+     * treatment (and without inflating `$exposure`). For banners / popup there is no
      * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
      * `isApplePayAvailable()` on mount.
      *
      * **Eligibility:**
-     * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-     *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-     *   later by `isApplePayAvailable()` on mount)
+     * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+     *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+     *   is enforced later by `isApplePayAvailable()` on mount)
      * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
      *
      * @param offer - The offer to display in the Apple Pay flow.

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

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;
@@ -1989,6 +1991,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     enabled: false
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2014,6 +2019,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *   `$exposure`.
    * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
    *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+   * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+   *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
    * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
    *   (`treatment` or QA URL param). The host must set up
    *   `window.experimentIntegration` before calling for this entry point.
@@ -2021,14 +2028,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *
    * **PAYWALL only — transition period:** the legacy
    * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-   * treatment (and without inflating `$exposure`). For banners there is no
+   * treatment (and without inflating `$exposure`). For banners / popup there is no
    * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
    * `isApplePayAvailable()` on mount.
    *
    * **Eligibility:**
-   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-   *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-   *   later by `isApplePayAvailable()` on mount)
+   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+   *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+   *   is enforced later by `isApplePayAvailable()` on mount)
    * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
    *
    * @param offer - The offer to display in the Apple Pay flow.

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

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;
@@ -1997,6 +1999,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     enabled: false
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2022,6 +2027,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *   `$exposure`.
    * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
    *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+   * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+   *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
    * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
    *   (`treatment` or QA URL param). The host must set up
    *   `window.experimentIntegration` before calling for this entry point.
@@ -2029,14 +2036,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *
    * **PAYWALL only — transition period:** the legacy
    * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-   * treatment (and without inflating `$exposure`). For banners there is no
+   * treatment (and without inflating `$exposure`). For banners / popup there is no
    * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
    * `isApplePayAvailable()` on mount.
    *
    * **Eligibility:**
-   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-   *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-   *   later by `isApplePayAvailable()` on mount)
+   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+   *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+   *   is enforced later by `isApplePayAvailable()` on mount)
    * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
    *
    * @param offer - The offer to display in the Apple Pay flow.

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

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;

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

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;
@@ -1989,6 +1991,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     enabled: false
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2014,6 +2019,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *   `$exposure`.
    * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
    *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+   * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+   *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
    * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
    *   (`treatment` or QA URL param). The host must set up
    *   `window.experimentIntegration` before calling for this entry point.
@@ -2021,14 +2028,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *
    * **PAYWALL only — transition period:** the legacy
    * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-   * treatment (and without inflating `$exposure`). For banners there is no
+   * treatment (and without inflating `$exposure`). For banners / popup there is no
    * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
    * `isApplePayAvailable()` on mount.
    *
    * **Eligibility:**
-   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-   *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-   *   later by `isApplePayAvailable()` on mount)
+   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+   *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+   *   is enforced later by `isApplePayAvailable()` on mount)
    * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
    *
    * @param offer - The offer to display in the Apple Pay flow.

package/dist/src/constants.d.ts

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

package/dist/src/constants.js

@@ -4,6 +4,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
   ApplePayEntryPoint2["FREE_TRIAL_BANNER"] = "free_trial_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";

package/dist/src/index.js

@@ -83,7 +83,9 @@ var apple_pay_modal_template_default = `<style>
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 97;
+    /* Above acquisition DualOfferBanner (1000) and Engagement ribbon (96).
+       Was 97 for wall/ribbon hosts only; hosts without a ribbon clamp need this. */
+    z-index: 1100;
     background: rgba(13, 13, 13, 0.7);
     display: flex;
     align-items: center;
@@ -1309,6 +1311,7 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["REGWALL"] = "article_regwall";
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
   ApplePayEntryPoint2["FREE_TRIAL_BANNER"] = "free_trial_banner";
+  ApplePayEntryPoint2["FREE_TRIAL_POPUP"] = "free_trial_popup";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
 var APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY = "apple-pay-express-checkout-on-paywalls";
@@ -2001,6 +2004,9 @@ var ENTRY_POINT_CONFIG = {
   ["article_regwall" /* REGWALL */]: {
     isEligible: () => true,
     enabled: false
+  },
+  ["free_trial_popup" /* FREE_TRIAL_POPUP */]: {
+    isEligible: () => true
   }
 };
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
@@ -2026,6 +2032,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *   `$exposure`.
    * - `FREE_TRIAL_BANNER`: same always-on-after-exclusions gate as Dual; distinct
    *   TEDL `entry_point` string (`free_trial_banner`) for wallet impression attribution.
+   * - `FREE_TRIAL_POPUP`: same always-on-after-exclusions gate; no Amplitude
+   *   `getVariant` / `$exposure`. Distinct TEDL `entry_point` (`free_trial_popup`).
    * - `PAYWALL`: experiment-gated via {@link APPLE_PAY_EXPRESS_PAYWALLS_EXPERIMENT_KEY}
    *   (`treatment` or QA URL param). The host must set up
    *   `window.experimentIntegration` before calling for this entry point.
@@ -2033,14 +2041,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    *
    * **PAYWALL only — transition period:** the legacy
    * `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param can show the button without
-   * treatment (and without inflating `$exposure`). For banners there is no
+   * treatment (and without inflating `$exposure`). For banners / popup there is no
    * experiment gate; `BYPASS_APPLE_PAY_CHECKS` only skips device checks in
    * `isApplePayAvailable()` on mount.
    *
    * **Eligibility:**
-   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` (or omitted): always eligible at
-   *   this gate (homepage placement is host-owned; Safari/Apple is enforced
-   *   later by `isApplePayAvailable()` on mount)
+   * - `DUAL_OFFER_BANNER` / `FREE_TRIAL_BANNER` / `FREE_TRIAL_POPUP` (or omitted):
+   *   always eligible at this gate (homepage placement is host-owned; Safari/Apple
+   *   is enforced later by `isApplePayAvailable()` on mount)
    * - `PAYWALL`: Safari/Apple device only (no homepage) — article paywalls
    *
    * @param offer - The offer to display in the Apple Pay flow.

package/package.json

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