@economist/web-apple-pay 0.1.1-beta.0

package/dist/src/utils/expressCheckoutTracking.d.ts

@@ -0,0 +1,64 @@
+/**
+ * TEDL analytics events for Express Checkout.
+ *
+ * Pushes events onto window.tedl.events[] — the same mechanism as
+ * @economist/tedl's emitTedlEvent — without the package dependency.
+ * Avoids pulling a Node-targeted CJS bundle (crypto, sf-entitlement) into a
+ * browser-only Web Component library.
+ *
+ * Event shape matches sma-checkout's pushTedlEvent schema:
+ *   { name: 'user.journey', type: 'checkout', action, info: 'applepay', ...extra }
+ *
+ * Event names are aligned to the PRD spec (section 10 — Tracking & Analytics).
+ */
+declare global {
+    interface Window {
+        tedl?: {
+            events?: Record<string, unknown>[];
+            [key: string]: unknown;
+        };
+    }
+}
+export declare const EXPRESS_CHECKOUT_EVENTS: {
+    /** Wallet button displayed */
+    readonly IMPRESSION: "express_wallet_impression";
+    /** Wallet button clicked */
+    readonly BUTTON_CLICK: "express_wallet_click";
+    /** Apple Pay sheet opened */
+    readonly SHEET_OPEN: "wallet_payment_sheet_open";
+    /** Payment authorised by the user in the Apple Pay sheet */
+    readonly AUTHORISED: "wallet_payment_authorised";
+    /** Purchase completed — BFF returned success */
+    readonly SUCCESS: "wallet_payment_success";
+    /** Payment failed — BFF returned error */
+    readonly FAILURE: "wallet_payment_failure";
+    /** Redirect to standard checkout (any fallback path) */
+    readonly FALLBACK_CHECKOUT: "fallback_checkout";
+};
+/**
+ * Metadata required for the wallet impression event.
+ * Covers the 5 analytics dimensions from the PRD tracking spec:
+ *   wallet_type, entry_point, offer_id (sku_id), country, device.
+ */
+export type ImpressionMetadata = {
+    /** Entry point where the Apple Pay button appeared — e.g. 'article_paywall', 'homepage_banner'. */
+    entryPoint: string;
+    /** ISO 3166-1 alpha-2 country code of the offer (e.g. 'GB', 'US'). */
+    country: string;
+};
+/** Wallet button displayed — emits all 5 required analytics dimensions. */
+export declare const trackExpressWalletImpression: (skuId: string, { entryPoint, country }: ImpressionMetadata) => void;
+/** Wallet button clicked */
+export declare const trackExpressWalletClick: (skuId: string) => void;
+/** Apple Pay sheet opened (session.begin() called) */
+export declare const trackWalletPaymentSheetOpen: (skuId: string) => void;
+/** Payment authorised by the user in the Apple Pay sheet */
+export declare const trackWalletPaymentAuthorised: (skuId: string) => void;
+/** Purchase completed — BFF returned success */
+export declare const trackWalletPaymentSuccess: (skuId: string, basketId: string) => void;
+/** Payment failed — BFF returned an error */
+export declare const trackWalletPaymentFailure: (skuId: string, reason: string) => void;
+/** Redirect to standard checkout triggered */
+export declare const trackFallbackCheckout: (skuId: string) => void;
+/** Billing/shipping field failed validation (emitted per-field when Apple Pay sheet stays open) */
+export declare const trackValidationFieldError: (field: string, errorType: string) => void;

package/dist/src/utils/expressCheckoutTracking.js

@@ -0,0 +1,84 @@
+// src/utils/expressCheckoutTracking.ts
+var EXPRESS_CHECKOUT_EVENTS = {
+  /** Wallet button displayed */
+  IMPRESSION: "express_wallet_impression",
+  /** Wallet button clicked */
+  BUTTON_CLICK: "express_wallet_click",
+  /** Apple Pay sheet opened */
+  SHEET_OPEN: "wallet_payment_sheet_open",
+  /** Payment authorised by the user in the Apple Pay sheet */
+  AUTHORISED: "wallet_payment_authorised",
+  /** Purchase completed — BFF returned success */
+  SUCCESS: "wallet_payment_success",
+  /** Payment failed — BFF returned error */
+  FAILURE: "wallet_payment_failure",
+  /** Redirect to standard checkout (any fallback path) */
+  FALLBACK_CHECKOUT: "fallback_checkout"
+};
+var getDevice = () => {
+  const ua = navigator.userAgent;
+  if (/tablet|ipad/i.test(ua)) return "tablet";
+  if (/mobile|iphone|android/i.test(ua)) return "mobile";
+  return "desktop";
+};
+var emitTedlEvent = (event) => {
+  window.tedl = window.tedl ?? {};
+  window.tedl.events = window.tedl.events ?? [];
+  window.tedl.events.push(event);
+};
+var track = (action, extra) => {
+  emitTedlEvent({
+    name: "user.journey",
+    type: "checkout",
+    action,
+    info: "applepay",
+    ...extra
+  });
+};
+var trackExpressWalletImpression = (skuId, { entryPoint, country }) => {
+  track(EXPRESS_CHECKOUT_EVENTS.IMPRESSION, {
+    wallet_type: "apple_pay",
+    entry_point: entryPoint,
+    sku_id: skuId,
+    country,
+    device: getDevice()
+  });
+};
+var trackExpressWalletClick = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.BUTTON_CLICK, { sku_id: skuId });
+};
+var trackWalletPaymentSheetOpen = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.SHEET_OPEN, { sku_id: skuId });
+};
+var trackWalletPaymentAuthorised = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.AUTHORISED, { sku_id: skuId });
+};
+var trackWalletPaymentSuccess = (skuId, basketId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
+    sku_id: skuId,
+    basket_id: basketId
+  });
+};
+var trackWalletPaymentFailure = (skuId, reason) => {
+  track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
+    sku_id: skuId,
+    failure_reason: reason
+  });
+};
+var trackFallbackCheckout = (skuId) => {
+  track(EXPRESS_CHECKOUT_EVENTS.FALLBACK_CHECKOUT, { sku_id: skuId });
+};
+var trackValidationFieldError = (field, errorType) => {
+  track(`validation_${field}_${errorType}`, {});
+};
+export {
+  EXPRESS_CHECKOUT_EVENTS,
+  trackExpressWalletClick,
+  trackExpressWalletImpression,
+  trackFallbackCheckout,
+  trackValidationFieldError,
+  trackWalletPaymentAuthorised,
+  trackWalletPaymentFailure,
+  trackWalletPaymentSheetOpen,
+  trackWalletPaymentSuccess
+};

package/dist/src/utils/pricing.d.ts

@@ -0,0 +1 @@
+export declare function formatPrice(price: number | undefined, currencyCode: string, shouldFixDecimalPlaces?: boolean, roundUp?: boolean): string;

package/dist/src/utils/pricing.js

@@ -0,0 +1,60 @@
+// src/utils/pricing.ts
+var PRICE_CONSTANTS = {
+  CENTS_MULTIPLIER: 100,
+  DECIMAL_PLACES: 2,
+  NO_DECIMAL_PLACES: 0
+};
+function numberOfDecimalPoints(value) {
+  if (!value) {
+    return PRICE_CONSTANTS.NO_DECIMAL_PLACES;
+  }
+  return Number(value.toFixed(PRICE_CONSTANTS.DECIMAL_PLACES)) % 1 === 0 ? PRICE_CONSTANTS.NO_DECIMAL_PLACES : PRICE_CONSTANTS.DECIMAL_PLACES;
+}
+var priceFormatters = {
+  CAD: (price) => `C$${price}`,
+  SEK: (price) => `${price}Kr`,
+  AUD: (price) => `A$${price}`,
+  NZD: (price) => `NZ$${price}`,
+  HKD: (price) => `HK$${price}`,
+  DKK: (price) => `${price}Kr`,
+  NOK: (price) => `${price}Kr`,
+  CHF: (price) => `${price}Fr`,
+  SGD: (price) => `S$${price}`,
+  TWD: (price) => `TW$${price}`
+};
+function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp = false) {
+  if (price === void 0) {
+    return "";
+  }
+  const points = numberOfDecimalPoints(price);
+  const calculatedPrice = () => {
+    if (roundUp) {
+      return (Math.ceil(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
+    }
+    if (shouldFixDecimalPlaces) {
+      return (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
+    }
+    return price;
+  };
+  const priceFixDecimal = calculatedPrice();
+  const priceFormatter = priceFormatters[currencyCode];
+  if (priceFormatter) {
+    const withCommas = Number(priceFixDecimal).toLocaleString("en", {
+      minimumFractionDigits: points
+    });
+    return priceFormatter(withCommas);
+  }
+  try {
+    return Number(priceFixDecimal).toLocaleString("en", {
+      style: "currency",
+      currency: currencyCode,
+      minimumFractionDigits: points,
+      currencyDisplay: "narrowSymbol"
+    });
+  } catch {
+    return `${currencyCode} ${priceFixDecimal}`;
+  }
+}
+export {
+  formatPrice
+};

package/dist/src/utils/recaptcha.d.ts

@@ -0,0 +1,22 @@
+/**
+ * reCAPTCHA v3 token acquisition.
+ *
+ * Dynamically injects the Google reCAPTCHA script loader into the DOM
+ * because it is not loaded globally on article/paywall pages.
+ *
+ * The site key is provided at runtime via configureApplePay({ recaptchaSiteKey }).
+ */
+/**
+ * Requests a reCAPTCHA v3 token for the given action.
+ *
+ * @param action - The reCAPTCHA action identifier (e.g. 'VerifyMerchant', 'CheckEligibility')
+ */
+export declare const getRecaptchaToken: (action: string) => Promise<string>;
+/**
+ * Acquires all three reCAPTCHA tokens needed by /v1/wallet/purchase in parallel.
+ */
+export declare const getPurchaseRecaptchaTokens: () => Promise<{
+    checkEligibility: string;
+    newBasket: string;
+    registerUser: string;
+}>;

package/dist/src/utils/recaptcha.js

@@ -0,0 +1,54 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/utils/recaptcha.ts
+var loadRecaptchaScript = (siteKey) => {
+  return new Promise((resolve, reject) => {
+    if (typeof grecaptcha !== "undefined") return resolve();
+    const existingScript = document.querySelector(
+      'script[src*="recaptcha/api.js"]'
+    );
+    if (existingScript) {
+      existingScript.addEventListener("load", () => resolve());
+      existingScript.addEventListener(
+        "error",
+        () => reject(new Error("Failed to load existing reCAPTCHA script"))
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
+    document.head.appendChild(script);
+  });
+};
+var getRecaptchaToken = async (action) => {
+  const siteKey = getApplePayConfig()?.recaptchaSiteKey;
+  if (!siteKey) {
+    throw new Error(
+      "[web-apple-pay] Missing recaptchaSiteKey. Call configureApplePay({ recaptchaSiteKey, ... }) before initiating Apple Pay."
+    );
+  }
+  await loadRecaptchaScript(siteKey);
+  return new Promise((resolve, reject) => {
+    grecaptcha.ready(() => {
+      grecaptcha.execute(siteKey, { action }).then(resolve).catch(reject);
+    });
+  });
+};
+var getPurchaseRecaptchaTokens = async () => {
+  const [checkEligibility, newBasket, registerUser] = await Promise.all([
+    getRecaptchaToken("checkEligibility"),
+    getRecaptchaToken("newBasket"),
+    getRecaptchaToken("registerUser")
+  ]);
+  return { checkEligibility, newBasket, registerUser };
+};
+export {
+  getPurchaseRecaptchaTokens,
+  getRecaptchaToken
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@economist/web-apple-pay",
+  "description": "Web component package for Apple Pay checkout UI",
+  "version": "0.1.1-beta.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.x",
+    "npm": ">=10.x"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:coverage": "npm run test -- --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "tsc": "tsc --project tsconfig.json",
+    "build": "npm run clean && node esbuild.config.mjs && npm run tsc:emit-types",
+    "tsc:emit-types": "tsc --emitDeclarationOnly",
+    "clean": "rm -rf dist",
+    "semantic-release": "semantic-release"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.1",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/test": "^8.6.18",
+    "@storybook/web-components-vite": "^8.6.18",
+    "@types/jest": "29.5.3",
+    "@types/applepayjs": "^14.0.9",
+    "esbuild": "^0.25.3",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "3.0.1",
+    "storybook": "^8.6.18",
+    "ts-jest": "29.2.5",
+    "ts-node": "10.9.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.31.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EconomistDigitalSolutions/shared-packages.git",
+    "directory": "packages/web-apple-pay"
+  },
+  "homepage": "https://github.com/EconomistDigitalSolutions/shared-packages#readme",
+  "bugs": {
+    "url": "https://github.com/EconomistDigitalSolutions/shared-packages/issues"
+  }
+}