@economist/web-apple-pay 1.1.0 → 1.3.0

package/README.md

@@ -32,6 +32,8 @@ import { configureApplePay, defineApplePayElements } from '@economist/web-apple-
 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();
@@ -57,11 +59,13 @@ When clicked, the button creates and opens `teg-apple-pay-modal` automatically.
 ### `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.
 
@@ -94,7 +98,7 @@ 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 optional debug bypass).
+- `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.
@@ -106,7 +110,7 @@ Consumers should listen for this event and continue payment orchestration.
 
 Check:
 
-- `configureApplePay(...)` was called before rendering (with a valid `merchantId`)
+- `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`)
@@ -138,3 +142,24 @@ Then in a consuming app:
 ```sh
 yalc add @economist/web-apple-pay
 ```
+
+## Storybook
+
+Run Storybook locally:
+
+```sh
+npm run storybook --workspace @economist/web-apple-pay
+```
+
+Build static Storybook output:
+
+```sh
+npm run build-storybook --workspace @economist/web-apple-pay
+```
+
+Story coverage matrix:
+
+- `ApplePayButton` docs page shows the stable default example.
+- `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

@@ -775,6 +775,9 @@ var isApplePayAvailable = async () => {
     }
     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);
@@ -784,6 +787,67 @@ var isApplePayAvailable = async () => {
   }
 };
 
+// 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"];
@@ -841,6 +905,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         this.style.display = "none";
         return;
       }
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
+        return;
+      }
       this.style.removeProperty("display");
       ensureApplePayLogoSymbol();
       const template = document.createElement("template");
@@ -883,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

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

@@ -770,6 +770,9 @@ var isApplePayAvailable = async () => {
     }
     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);
@@ -779,6 +782,67 @@ var isApplePayAvailable = async () => {
   }
 };
 
+// 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"];
@@ -836,6 +900,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         this.style.display = "none";
         return;
       }
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
+        return;
+      }
       this.style.removeProperty("display");
       ensureApplePayLogoSymbol();
       const template = document.createElement("template");
@@ -878,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