@economist/web-apple-pay 1.0.1 → 1.2.0

package/README.md

@@ -0,0 +1,144 @@
+# @economist/web-apple-pay
+
+Framework-agnostic Apple Pay UI components implemented as Web Components.
+
+This package provides:
+
+- `teg-apple-pay-button`
+- `teg-apple-pay-modal`
+
+It is intentionally UI-focused. Consumer applications own backend payment orchestration, merchant validation, and secret handling.
+
+## Requirements
+
+- Node.js `20.x` or later
+- npm `10.x` or later
+
+## Installation
+
+```sh
+npm install --save @economist/web-apple-pay
+```
+
+## Quick start
+
+### 1) Configure runtime values
+
+Call `configureApplePay(...)` once during app startup, before rendering Apple Pay UI:
+
+```ts
+import { configureApplePay, defineApplePayElements } from '@economist/web-apple-pay';
+
+configureApplePay({
+  merchantId: 'merchant.com.economist.your-app',
+  debugBypassEnabled: false,
+  // required: wallet API base URL for session and checkout calls
+  walletApiBaseUrl: 'https://bff-test.economist.com',
+});
+
+defineApplePayElements();
+```
+
+### 2) Create and mount a button
+
+```ts
+import type { Offer, ApplePayButton } from '@economist/web-apple-pay';
+
+const button = document.createElement('teg-apple-pay-button') as ApplePayButton;
+button.offer = offer as Offer;
+button.country = 'US';
+button.dataset.loggedIn = 'true';
+
+container.appendChild(button);
+```
+
+When clicked, the button creates and opens `teg-apple-pay-modal` automatically.
+
+## Runtime configuration
+
+### `configureApplePay(config)`
+
+Sets package-level runtime configuration used by Apple Pay availability checks.
+Call this once during app startup.
+
+`config` shape:
+
+- `merchantId` (`string`, required): Apple Pay merchant identifier used for active-card checks.
+- `debugBypassEnabled` (`boolean`, optional): allows `?BYPASS_APPLE_PAY_CHECKS=1` query param to bypass capability checks in non-production-style debugging flows.
+- `walletApiBaseUrl` (`string`, required): base URL for wallet API requests.
+
+If `merchantId` is not configured, Apple Pay availability checks return `false` and the button hides itself.
+
+## Component behavior
+
+### `ApplePayButton`
+
+- Requires `offer` and `country` before click flow is meaningful.
+- Checks Apple Pay availability on connect; if unavailable, it hides.
+- Skips rendering for excluded variants (`bundle`, `insider_print`).
+- Forwards `data-logged-in` from button to modal (`modal.dataset.loggedIn`).
+
+### `ApplePayModal`
+
+- Opened by `ApplePayButton` click.
+- Emits `apple-pay-confirmed` when CTA is accepted.
+- `Escape` closes the modal and prevents propagation to other global handlers.
+
+## Events
+
+### `apple-pay-confirmed`
+
+Dispatched from `ApplePayModal` as a `CustomEvent` with:
+
+- `detail.skuId` (`string`)
+- `detail.country` (`string`)
+
+Consumers should listen for this event and continue payment orchestration.
+
+## Public API
+
+- `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.
+- `ApplePayModal`: modal component class.
+- `ensureApplePayLogoSymbol()`: logo symbol injection helper.
+- `Offer`: offer contract type used by component props.
+
+## Troubleshooting
+
+### Button does not appear
+
+Check:
+
+- `configureApplePay(...)` was called before rendering (with a valid `merchantId` and `walletApiBaseUrl`)
+- device/browser supports Apple Pay checks (Safari/Apple device logic)
+- query string/feature flag gating for your page is satisfied
+- offer variant is not excluded (`bundle`, `insider_print`)
+
+### Logged-in checkbox copy looks wrong
+
+Set `button.dataset.loggedIn = 'true'` before appending the button. The button forwards this flag to the modal automatically.
+
+## Security and responsibilities
+
+Merchant setup must be handled by the consuming application:
+
+- inject merchant config at runtime
+- perform merchant validation on trusted backend services
+- keep certificates/secrets outside this package
+
+## Local development
+
+From `shared-packages`:
+
+```sh
+cd packages/web-apple-pay
+npm run build
+yalc publish --sig
+```
+
+Then in a consuming app:
+
+```sh
+yalc add @economist/web-apple-pay
+```

package/dist/index.js

@@ -739,8 +739,118 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 // src/templates/apple-pay-button.template.html
 var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
+var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
 var ApplePayButton = class _ApplePayButton extends HTMLElement {
   static tag = "teg-apple-pay-button";
   static define() {
@@ -753,6 +863,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!offer) {
       return null;
     }
+    const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
+    if (isExcludedVariant) {
+      return null;
+    }
     if (!new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     )) {
@@ -766,12 +880,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #offer = null;
   #country = "";
+  #rendering = false;
   get offer() {
     return this.#offer;
   }
   set offer(value) {
     this.#offer = value;
-    this.updateDisabledState();
+    this.#updateDisabledState();
   }
   get country() {
     return this.#country;
@@ -779,34 +894,52 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
-  connectedCallback() {
-    if (this.querySelector(".apple-pay-container")) {
+  async connectedCallback() {
+    if (this.#rendering || this.querySelector(".apple-pay-container")) {
       return;
     }
-    ensureApplePayLogoSymbol();
-    const template = document.createElement("template");
-    template.innerHTML = apple_pay_button_template_default;
-    this.appendChild(template.content.cloneNode(true));
-    this.updateDisabledState();
-    const button = this.querySelector(".apple-pay-btn");
-    button.addEventListener("click", () => {
-      if (!this.#offer) {
+    this.#rendering = true;
+    try {
+      const available = await isApplePayAvailable();
+      if (!available) {
+        this.style.display = "none";
         return;
       }
-      if (document.querySelector(ApplePayModal.tag)) {
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
         return;
       }
-      ApplePayModal.define();
-      const modal = document.createElement(ApplePayModal.tag);
-      modal.offer = this.#offer;
-      modal.country = this.#country;
-      if (this.dataset.loggedIn !== void 0) {
-        modal.dataset.loggedIn = this.dataset.loggedIn;
-      }
-      modal.open();
-    });
+      this.style.removeProperty("display");
+      ensureApplePayLogoSymbol();
+      const template = document.createElement("template");
+      template.innerHTML = apple_pay_button_template_default;
+      this.appendChild(template.content.cloneNode(true));
+      this.#updateDisabledState();
+      const button = this.querySelector(".apple-pay-btn");
+      button.addEventListener("click", () => {
+        if (!this.#offer) {
+          return;
+        }
+        if (document.querySelector(ApplePayModal.tag)) {
+          return;
+        }
+        ApplePayModal.define();
+        const modal = document.createElement(ApplePayModal.tag);
+        modal.offer = this.#offer;
+        modal.country = this.#country;
+        if (this.dataset.loggedIn !== void 0) {
+          modal.dataset.loggedIn = this.dataset.loggedIn;
+        }
+        modal.open();
+      });
+    } catch {
+      this.style.display = "none";
+    } finally {
+      this.#rendering = false;
+    }
   }
-  updateDisabledState() {
+  #updateDisabledState() {
     const button = this.querySelector(".apple-pay-btn");
     if (!button) {
       return;
@@ -819,6 +952,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
+  async #fetchSession() {
+    try {
+      return await getExpressCheckoutSession();
+    } catch {
+      return null;
+    }
+  }
 };
 
 // src/index.ts
@@ -829,6 +969,7 @@ function defineApplePayElements() {
 export {
   ApplePayButton,
   ApplePayModal,
+  configureApplePay,
   defineApplePayElements,
   ensureApplePayLogoSymbol
 };

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

@@ -11,6 +11,5 @@ export declare class ApplePayButton extends HTMLElement {
     set offer(value: Offer | null);
     get country(): string;
     set country(value: string);
-    connectedCallback(): void;
-    private updateDisabledState;
+    connectedCallback(): Promise<void>;
 }

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

@@ -739,8 +739,113 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 // src/templates/apple-pay-button.template.html
 var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
+var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
 var ApplePayButton = class _ApplePayButton extends HTMLElement {
   static tag = "teg-apple-pay-button";
   static define() {
@@ -753,6 +858,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!offer) {
       return null;
     }
+    const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
+    if (isExcludedVariant) {
+      return null;
+    }
     if (!new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     )) {
@@ -766,12 +875,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #offer = null;
   #country = "";
+  #rendering = false;
   get offer() {
     return this.#offer;
   }
   set offer(value) {
     this.#offer = value;
-    this.updateDisabledState();
+    this.#updateDisabledState();
   }
   get country() {
     return this.#country;
@@ -779,34 +889,52 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
-  connectedCallback() {
-    if (this.querySelector(".apple-pay-container")) {
+  async connectedCallback() {
+    if (this.#rendering || this.querySelector(".apple-pay-container")) {
       return;
     }
-    ensureApplePayLogoSymbol();
-    const template = document.createElement("template");
-    template.innerHTML = apple_pay_button_template_default;
-    this.appendChild(template.content.cloneNode(true));
-    this.updateDisabledState();
-    const button = this.querySelector(".apple-pay-btn");
-    button.addEventListener("click", () => {
-      if (!this.#offer) {
+    this.#rendering = true;
+    try {
+      const available = await isApplePayAvailable();
+      if (!available) {
+        this.style.display = "none";
         return;
       }
-      if (document.querySelector(ApplePayModal.tag)) {
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
         return;
       }
-      ApplePayModal.define();
-      const modal = document.createElement(ApplePayModal.tag);
-      modal.offer = this.#offer;
-      modal.country = this.#country;
-      if (this.dataset.loggedIn !== void 0) {
-        modal.dataset.loggedIn = this.dataset.loggedIn;
-      }
-      modal.open();
-    });
+      this.style.removeProperty("display");
+      ensureApplePayLogoSymbol();
+      const template = document.createElement("template");
+      template.innerHTML = apple_pay_button_template_default;
+      this.appendChild(template.content.cloneNode(true));
+      this.#updateDisabledState();
+      const button = this.querySelector(".apple-pay-btn");
+      button.addEventListener("click", () => {
+        if (!this.#offer) {
+          return;
+        }
+        if (document.querySelector(ApplePayModal.tag)) {
+          return;
+        }
+        ApplePayModal.define();
+        const modal = document.createElement(ApplePayModal.tag);
+        modal.offer = this.#offer;
+        modal.country = this.#country;
+        if (this.dataset.loggedIn !== void 0) {
+          modal.dataset.loggedIn = this.dataset.loggedIn;
+        }
+        modal.open();
+      });
+    } catch {
+      this.style.display = "none";
+    } finally {
+      this.#rendering = false;
+    }
   }
-  updateDisabledState() {
+  #updateDisabledState() {
     const button = this.querySelector(".apple-pay-btn");
     if (!button) {
       return;
@@ -819,6 +947,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
+  async #fetchSession() {
+    try {
+      return await getExpressCheckoutSession();
+    } catch {
+      return null;
+    }
+  }
 };
 export {
   ApplePayButton

package/dist/src/clients/payment-checkout/config.d.ts

@@ -0,0 +1,8 @@
+export interface ApplePayRuntimeConfig {
+    merchantId: string;
+    debugBypassEnabled?: boolean;
+    walletApiBaseUrl: string;
+}
+export declare const configureApplePay: (config: ApplePayRuntimeConfig) => void;
+export declare const getApplePayConfig: () => ApplePayRuntimeConfig | null;
+export declare const resetApplePayConfig: () => void;

package/dist/src/clients/payment-checkout/config.js

@@ -0,0 +1,16 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var getApplePayConfig = () => runtimeConfig;
+var resetApplePayConfig = () => {
+  runtimeConfig = null;
+};
+export {
+  configureApplePay,
+  getApplePayConfig,
+  resetApplePayConfig
+};

package/dist/src/clients/payment-checkout/detects.d.ts

@@ -0,0 +1,3 @@
+export declare const isAppleDeviceOrSafari: () => boolean;
+export declare const bypassApplePayChecks: () => boolean;
+export declare const isApplePayAvailable: () => Promise<boolean>;

package/dist/src/clients/payment-checkout/detects.js

@@ -0,0 +1,47 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
+export {
+  bypassApplePayChecks,
+  isAppleDeviceOrSafari,
+  isApplePayAvailable
+};

package/dist/src/clients/payment-checkout/index.d.ts

@@ -0,0 +1 @@
+export declare const apiFetch: <T>(path: string, options?: RequestInit) => Promise<T>;

package/dist/src/clients/payment-checkout/index.js

@@ -0,0 +1,59 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+export {
+  apiFetch
+};

package/dist/src/clients/payment-checkout/session.d.ts

@@ -0,0 +1,2 @@
+import type { SessionResponse } from './types';
+export declare const getExpressCheckoutSession: () => Promise<SessionResponse>;

package/dist/src/clients/payment-checkout/session.js

@@ -0,0 +1,67 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+export {
+  getExpressCheckoutSession
+};

package/dist/src/clients/payment-checkout/types.d.ts

@@ -0,0 +1,14 @@
+export type SessionResponse = {
+    loggedIn: false;
+    userType: 'new-eligible-user';
+} | {
+    loggedIn: true;
+    emailAddress: string;
+    contactId: string;
+    userType: 'active-subscription' | 'b2b-user' | 'new-eligible-user';
+};
+export declare class ApiError extends Error {
+    readonly status: number;
+    readonly body: unknown;
+    constructor(status: number, body: unknown);
+}

package/dist/src/clients/payment-checkout/types.js

@@ -0,0 +1,14 @@
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+export {
+  ApiError
+};

package/dist/src/index.d.ts

@@ -1,5 +1,7 @@
 export { ApplePayButton } from './apple-pay-button';
 export { ApplePayModal } from './apple-pay-modal';
 export { ensureApplePayLogoSymbol } from './apple-pay-logo';
+export { configureApplePay } from './clients/payment-checkout/config';
+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

@@ -739,8 +739,118 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 // src/templates/apple-pay-button.template.html
 var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
 
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
+var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
 var ApplePayButton = class _ApplePayButton extends HTMLElement {
   static tag = "teg-apple-pay-button";
   static define() {
@@ -753,6 +863,10 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!offer) {
       return null;
     }
+    const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
+    if (isExcludedVariant) {
+      return null;
+    }
     if (!new URLSearchParams(window.location.search).has(
       FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
     )) {
@@ -766,12 +880,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #offer = null;
   #country = "";
+  #rendering = false;
   get offer() {
     return this.#offer;
   }
   set offer(value) {
     this.#offer = value;
-    this.updateDisabledState();
+    this.#updateDisabledState();
   }
   get country() {
     return this.#country;
@@ -779,34 +894,52 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
-  connectedCallback() {
-    if (this.querySelector(".apple-pay-container")) {
+  async connectedCallback() {
+    if (this.#rendering || this.querySelector(".apple-pay-container")) {
       return;
     }
-    ensureApplePayLogoSymbol();
-    const template = document.createElement("template");
-    template.innerHTML = apple_pay_button_template_default;
-    this.appendChild(template.content.cloneNode(true));
-    this.updateDisabledState();
-    const button = this.querySelector(".apple-pay-btn");
-    button.addEventListener("click", () => {
-      if (!this.#offer) {
+    this.#rendering = true;
+    try {
+      const available = await isApplePayAvailable();
+      if (!available) {
+        this.style.display = "none";
         return;
       }
-      if (document.querySelector(ApplePayModal.tag)) {
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
         return;
       }
-      ApplePayModal.define();
-      const modal = document.createElement(ApplePayModal.tag);
-      modal.offer = this.#offer;
-      modal.country = this.#country;
-      if (this.dataset.loggedIn !== void 0) {
-        modal.dataset.loggedIn = this.dataset.loggedIn;
-      }
-      modal.open();
-    });
+      this.style.removeProperty("display");
+      ensureApplePayLogoSymbol();
+      const template = document.createElement("template");
+      template.innerHTML = apple_pay_button_template_default;
+      this.appendChild(template.content.cloneNode(true));
+      this.#updateDisabledState();
+      const button = this.querySelector(".apple-pay-btn");
+      button.addEventListener("click", () => {
+        if (!this.#offer) {
+          return;
+        }
+        if (document.querySelector(ApplePayModal.tag)) {
+          return;
+        }
+        ApplePayModal.define();
+        const modal = document.createElement(ApplePayModal.tag);
+        modal.offer = this.#offer;
+        modal.country = this.#country;
+        if (this.dataset.loggedIn !== void 0) {
+          modal.dataset.loggedIn = this.dataset.loggedIn;
+        }
+        modal.open();
+      });
+    } catch {
+      this.style.display = "none";
+    } finally {
+      this.#rendering = false;
+    }
   }
-  updateDisabledState() {
+  #updateDisabledState() {
     const button = this.querySelector(".apple-pay-btn");
     if (!button) {
       return;
@@ -819,6 +952,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
+  async #fetchSession() {
+    try {
+      return await getExpressCheckoutSession();
+    } catch {
+      return null;
+    }
+  }
 };
 
 // src/index.ts
@@ -829,6 +969,7 @@ function defineApplePayElements() {
 export {
   ApplePayButton,
   ApplePayModal,
+  configureApplePay,
   defineApplePayElements,
   ensureApplePayLogoSymbol
 };

package/package.json

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