@economist/web-apple-pay 1.8.2 → 1.9.0

package/dist/index.js

@@ -1937,6 +1937,19 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
+  ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint3["REGWALL"] = "article_regwall";
+  ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  return ApplePayEntryPoint3;
+})(ApplePayEntryPoint || {});
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1954,7 +1967,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * 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.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1963,7 +1992,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
     }
     _ApplePayButton.define();
@@ -2271,14 +2307,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
 };
 
-// src/constants.ts
-var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
-  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
-  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
-  ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
-  return ApplePayEntryPoint2;
-})(ApplePayEntryPoint || {});
-
 // src/index.ts
 function defineApplePayElements() {
   ApplePayButton.define();

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

@@ -6,7 +6,23 @@ export declare class ApplePayButton extends HTMLElement {
     static readonly tag = "teg-apple-pay-button";
     static define(): void;
     /**
-     * Creates and configures an ApplePayButton if the feature flag is present.
+     * 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.
+     *
+     * - `treatment` → button created and returned
+     * - `control` / missing / anything else → returns null (button suppressed)
+     *
+     * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+     * gate is also evaluated as a fallback until all host apps have integrated
+     * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+     * fallback will be removed.
+     *
+     * @param offer - The offer to display in the Apple Pay flow.
+     * @param country - The user's country code.
+     * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
      */
     static createIfEnabled(offer: Offer | undefined, country: string, entryPoint?: ApplePayEntryPoint): ApplePayButton | null;
     get offer(): Offer | null;

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

@@ -1932,6 +1932,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1949,7 +1956,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * 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.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1958,7 +1981,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
     }
     _ApplePayButton.define();

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

@@ -1940,6 +1940,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1957,7 +1964,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * 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.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1966,7 +1989,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
     }
     _ApplePayButton.define();

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

@@ -1932,6 +1932,13 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1949,7 +1956,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * 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.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1958,7 +1981,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
     }
     _ApplePayButton.define();

package/dist/src/constants.d.ts

@@ -3,3 +3,23 @@ export declare enum ApplePayEntryPoint {
     REGWALL = "article_regwall",
     DUAL_OFFER_BANNER = "dual_offer_banner"
 }
+/**
+ * Amplitude experiment key for Apple Pay Express Checkout.
+ * 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).
+ *
+ * TODO: Replace with the confirmed Amplitude experiment key once available.
+ * The current value is a placeholder and must be verified against the
+ * Amplitude experiment dashboard before going to production.
+ */
+export declare const APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+/**
+ * Amplitude variant values for the Apple Pay Express Checkout experiment.
+ * CONTROL   → button hidden (baseline)
+ * TREATMENT → button shown
+ */
+export declare const APPLE_PAY_EXPRESS_VARIANTS: {
+    readonly CONTROL: "control";
+    readonly TREATMENT: "treatment";
+};

package/dist/src/constants.js

@@ -5,6 +5,13 @@ var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
   ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
   return ApplePayEntryPoint2;
 })(ApplePayEntryPoint || {});
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
 export {
+  APPLE_PAY_EXPRESS_EXPERIMENT_KEY,
+  APPLE_PAY_EXPRESS_VARIANTS,
   ApplePayEntryPoint
 };

package/dist/src/index.js

@@ -1937,6 +1937,19 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
+  ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint3["REGWALL"] = "article_regwall";
+  ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  return ApplePayEntryPoint3;
+})(ApplePayEntryPoint || {});
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
@@ -1954,7 +1967,23 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * 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.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
     if (!offer) {
@@ -1963,7 +1992,14 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
     }
     _ApplePayButton.define();
@@ -2271,14 +2307,6 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
 };
 
-// src/constants.ts
-var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
-  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
-  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
-  ApplePayEntryPoint2["DUAL_OFFER_BANNER"] = "dual_offer_banner";
-  return ApplePayEntryPoint2;
-})(ApplePayEntryPoint || {});
-
 // src/index.ts
 function defineApplePayElements() {
   ApplePayButton.define();

package/package.json

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