@economist/web-apple-pay 1.5.0 → 1.6.0

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

@@ -0,0 +1,375 @@
+// 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();
+};
+var performPurchase = (data) => {
+  return apiFetch("/v1/wallet/purchase", {
+    method: "POST",
+    body: JSON.stringify(data),
+    credentials: "include"
+  });
+};
+
+// 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 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 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}`, {});
+};
+
+// src/clients/payment-checkout/messages.ts
+var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
+var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
+var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
+var MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
+var MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
+var MSG_RECAPTCHA_VALIDATION_FAILED = "Security check failed. Please try again.";
+var MSG_EMAIL_COLLISION = "This email address is already linked to an account. Please log in, or try a different email address.";
+var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
+
+// src/clients/payment-checkout/contact-validation.ts
+var pushFieldError = (errors, billingOrShippingContact = "billing", field, errorType, errorText) => {
+  const errorCode = billingOrShippingContact === "billing" ? "billingContactInvalid" : "shippingContactInvalid";
+  errors.push(new ApplePayError(errorCode, field, errorText));
+  trackValidationFieldError(field, errorType);
+  return "";
+};
+var pushRequiredFieldError = (errors, billingOrShippingContact = "billing", field) => {
+  return pushFieldError(
+    errors,
+    billingOrShippingContact,
+    field,
+    "required",
+    MSG_MISSING_REQUIRED_FIELD
+  );
+};
+var ContactValidationError = class extends Error {
+  constructor(errors) {
+    super(MSG_CONTACT_VALIDATION_INTERNAL);
+    this.errors = errors;
+  }
+};
+
+// src/clients/payment-checkout/billing-contact-details.ts
+var countriesWithoutCityField = ["KY", "CK", "NR", "TC"];
+var countriesRequiringAllFields = ["US", "CA", "GB"];
+var resolveCountryConfig = (country) => {
+  const hasCityField = !countriesWithoutCityField.includes(country);
+  const requiresStateAndPostcode = countriesRequiringAllFields.includes(country);
+  return {
+    hasCityField,
+    requiresStateAndPostcode,
+    // if there is no city field, we require state and use it in place of city
+    requiresStateField: !hasCityField || requiresStateAndPostcode
+  };
+};
+var validateAddressFields = (errors, contact, { hasCityField, requiresStateAndPostcode, requiresStateField }) => {
+  const locality = !hasCityField ? contact.administrativeArea : contact.locality;
+  if (!contact.addressLines?.at(0)?.trim()) {
+    pushRequiredFieldError(errors, "billing", "addressLines");
+  }
+  if (!locality?.trim() && hasCityField) {
+    pushRequiredFieldError(errors, "billing", "locality");
+  }
+  if (!contact.administrativeArea?.trim() && requiresStateField) {
+    pushRequiredFieldError(errors, "billing", "administrativeArea");
+  }
+  if (!contact.postalCode?.trim() && requiresStateAndPostcode) {
+    pushRequiredFieldError(errors, "billing", "postalCode");
+  }
+};
+var validateNameFields = (errors, contact) => {
+  const firstName = contact.givenName?.trim() || "";
+  const lastName = contact.familyName?.trim() || "";
+  if (!firstName || !lastName) {
+    pushRequiredFieldError(errors, "billing", "name");
+  }
+  return { firstName, lastName };
+};
+var validateCountrySupport = (errors, country, supportedBillingCountries) => {
+  if (!supportedBillingCountries.includes(country)) {
+    pushFieldError(
+      errors,
+      "billing",
+      "countryCode",
+      "not-supported",
+      MSG_UNSUPPORTED_BILLING_COUNTRY
+    );
+  }
+};
+var billingContactDetails = (contact, supportedBillingCountries) => {
+  const errors = [];
+  const country = contact.countryCode?.toUpperCase() || pushRequiredFieldError(errors, "billing", "country");
+  const config = resolveCountryConfig(country);
+  validateAddressFields(errors, contact, config);
+  const { firstName, lastName } = validateNameFields(errors, contact);
+  validateCountrySupport(errors, country, supportedBillingCountries);
+  if (errors.length > 0) {
+    throw new ContactValidationError(errors);
+  }
+  return { firstName, lastName };
+};
+
+// src/clients/payment-checkout/shipping-contact-details.ts
+var EMAIL_FORMAT_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var shippingContactDetails = (shippingContact) => {
+  const errors = [];
+  let emailAddress = "";
+  if (shippingContact?.emailAddress === void 0 || shippingContact?.emailAddress === "") {
+    pushRequiredFieldError(errors, "shipping", "emailAddress");
+  } else {
+    emailAddress = shippingContact.emailAddress.trim();
+    if (emailAddress.length > 80) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_TOO_LONG
+      );
+    } else if (!EMAIL_FORMAT_REGEX.test(emailAddress)) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_WRONG_FORMAT
+      );
+    }
+  }
+  if (errors.length > 0) {
+    throw new ContactValidationError(errors);
+  }
+  return { emailAddress };
+};
+
+// src/utils/expressCheckoutRedirect.ts
+var decodeSku = (sku) => {
+  try {
+    return atob(sku.substring(sku.indexOf("-") + 1));
+  } catch {
+    return sku;
+  }
+};
+var redirectToCheckoutComplete = (params) => {
+  const url = new URL("/checkout/complete", window.location.origin);
+  url.searchParams.set("basketId", params.basketId);
+  if (params.queryString) {
+    const qs = params.queryString.startsWith("?") ? params.queryString.slice(1) : params.queryString;
+    new URLSearchParams(qs).forEach((v, k) => url.searchParams.set(k, v));
+  }
+  url.searchParams.set("lmo_offer", params.skuId);
+  url.searchParams.set("status", params.status);
+  url.searchParams.set("redirectToCheckout", "true");
+  url.searchParams.set("returnUrl", params.returnUrl);
+  return url.pathname + url.search;
+};
+var redirectToCheckoutFallback = (params) => {
+  const url = new URL(window.location.href);
+  url.pathname = "/checkout";
+  url.searchParams.set("lmo_offer", params.skuId);
+  if (params.inlineError)
+    url.searchParams.set("inlineError", params.inlineError);
+  if (params.email) url.searchParams.set("email", params.email);
+  if (params.emailError) url.searchParams.set("emailError", params.emailError);
+  url.searchParams.set("returnUrl", params.returnUrl);
+  return url.pathname + url.search;
+};
+
+// src/clients/payment-checkout/payment-handler.ts
+var MSG_ELIGIBILITY = "Something went wrong, please try again";
+var MSG_REGISTRATION = "We couldn't create your account. Please enter your email or try a different login method.";
+var failApplePaySession = (session, errors = []) => {
+  session.completePayment({
+    status: ApplePaySession.STATUS_FAILURE,
+    errors
+  });
+};
+function parseWalletApiError(err) {
+  const body = err instanceof ApiError ? err.body : err;
+  if (body && typeof body === "object" && "errorType" in body && "message" in body) {
+    return body;
+  }
+  return null;
+}
+function validateContacts(event, sessionData, supportedBillingCountries) {
+  billingContactDetails(
+    event.payment.billingContact,
+    supportedBillingCountries
+  );
+  if (!sessionData.loggedIn) {
+    return shippingContactDetails(event.payment.shippingContact).emailAddress;
+  }
+  return void 0;
+}
+function redirectFallback(skuId, returnUrl, options) {
+  trackFallbackCheckout(skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId,
+    returnUrl,
+    ...options
+  });
+}
+var ERROR_HANDLERS = {
+  EMAIL_COLLISION: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
+    emailError: MSG_EMAIL_COLLISION,
+    email: validatedEmail
+  }),
+  PAYMENT_DECLINED: ({ skuId, returnUrl }) => (
+    // Matches sma-checkout catch-all: always redirect with generic inlineError.
+    redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
+  ),
+  ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
+  REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
+  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+};
+function handleStructuredError(ctx) {
+  const handler = ERROR_HANDLERS[ctx.walletError.errorType];
+  if (handler) {
+    handler(ctx);
+  } else {
+    redirectFallback(ctx.skuId, ctx.returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+  }
+}
+async function handlePaymentAuthorized(event, session, sessionData, config) {
+  const { skuId, returnUrl, queryString } = config;
+  let validatedEmail;
+  try {
+    validatedEmail = validateContacts(
+      event,
+      sessionData,
+      config.supportedBillingCountries
+    );
+    const result = await performPurchase({
+      applePayToken: event.payment.token,
+      skuId: config.skuId,
+      billingContact: event.payment.billingContact,
+      ...event.payment.shippingContact && {
+        shippingContact: event.payment.shippingContact
+      },
+      recaptchaTokens: config.recaptchaTokens
+    });
+    trackWalletPaymentSuccess(skuId, result.basketId);
+    session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
+    const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    window.location.href = redirectToCheckoutComplete({
+      basketId: result.basketId,
+      status: userStatus,
+      skuId: decodeSku(skuId),
+      returnUrl,
+      queryString
+    });
+  } catch (err) {
+    if (err instanceof ContactValidationError) {
+      failApplePaySession(session, err.errors);
+      return;
+    }
+    console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
+    const walletError = parseWalletApiError(err);
+    trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
+    failApplePaySession(session);
+    if (!walletError) {
+      redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+      return;
+    }
+    handleStructuredError({ skuId, returnUrl, validatedEmail, walletError });
+  }
+}
+export {
+  handlePaymentAuthorized
+};

package/dist/src/clients/payment-checkout/shipping-contact-details.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Apple Pay shipping contact local validator.
+ * Ported from sma-checkout — handlers/create-on-payment-authorized-handler/subscribe/shipping-contact-details.ts
+ *
+ * Validates the shipping contact's email address if present.
+ */
+export type ShippingValidationResult = {
+    emailAddress: string;
+};
+export declare const shippingContactDetails: (shippingContact: ApplePayJS.ApplePayPaymentContact | undefined) => ShippingValidationResult;

package/dist/src/clients/payment-checkout/shipping-contact-details.js

@@ -0,0 +1,83 @@
+// src/utils/expressCheckoutTracking.ts
+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 trackValidationFieldError = (field, errorType) => {
+  track(`validation_${field}_${errorType}`, {});
+};
+
+// src/clients/payment-checkout/messages.ts
+var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
+var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
+var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
+var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
+
+// src/clients/payment-checkout/contact-validation.ts
+var pushFieldError = (errors, billingOrShippingContact = "billing", field, errorType, errorText) => {
+  const errorCode = billingOrShippingContact === "billing" ? "billingContactInvalid" : "shippingContactInvalid";
+  errors.push(new ApplePayError(errorCode, field, errorText));
+  trackValidationFieldError(field, errorType);
+  return "";
+};
+var pushRequiredFieldError = (errors, billingOrShippingContact = "billing", field) => {
+  return pushFieldError(
+    errors,
+    billingOrShippingContact,
+    field,
+    "required",
+    MSG_MISSING_REQUIRED_FIELD
+  );
+};
+var ContactValidationError = class extends Error {
+  constructor(errors) {
+    super(MSG_CONTACT_VALIDATION_INTERNAL);
+    this.errors = errors;
+  }
+};
+
+// src/clients/payment-checkout/shipping-contact-details.ts
+var EMAIL_FORMAT_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var shippingContactDetails = (shippingContact) => {
+  const errors = [];
+  let emailAddress = "";
+  if (shippingContact?.emailAddress === void 0 || shippingContact?.emailAddress === "") {
+    pushRequiredFieldError(errors, "shipping", "emailAddress");
+  } else {
+    emailAddress = shippingContact.emailAddress.trim();
+    if (emailAddress.length > 80) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_TOO_LONG
+      );
+    } else if (!EMAIL_FORMAT_REGEX.test(emailAddress)) {
+      pushFieldError(
+        errors,
+        "shipping",
+        "emailAddress",
+        "format",
+        MSG_EMAIL_WRONG_FORMAT
+      );
+    }
+  }
+  if (errors.length > 0) {
+    throw new ContactValidationError(errors);
+  }
+  return { emailAddress };
+};
+export {
+  shippingContactDetails
+};

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

@@ -1,3 +1,58 @@
+/**
+ * Types mapping to the wallet-payments-api BFF.
+ * Aligned with UI-Integration-Mocks.md.
+ */
+export type PaymentOptionsRequest = {
+    sku: string;
+    countryCode: string;
+    currencyCode: string;
+    /** The current page URL, sent to Commerce Services for logging purposes. */
+    checkoutUrl: string;
+};
+/**
+ * Mirrors the Commerce Services GET /ecomb2c/v1/payment-options/sku/{sku}/{countryCode}/{currencyCode}
+ * response shape — matches sma-checkout: src/lib/commerce-services/types.ts PaymentOptionsForSkuResponseBody
+ */
+export type PaymentOptionsResponse = {
+    options: {
+        applePay?: {
+            provider: string;
+            settings: {
+                supportedNetworks: string[];
+            };
+        };
+        payPal?: {
+            provider: string;
+        };
+        googlePay?: {
+            provider: string;
+            settings: {
+                supportedNetworks: string[];
+            };
+        };
+        creditDebit?: {
+            provider: string;
+            settings: {
+                tenantId: string;
+                id: string;
+                token: string;
+                signature: string;
+                key: string;
+                locale: string;
+                url: string;
+                paymentGateway: string;
+                height: number;
+                supportedNetworks: string[];
+            };
+        };
+    };
+};
+/**
+ * GET /v1/wallet/session — uses credentials: 'include' (cookie-based).
+ *
+ * BFF always returns userType, even for anonymous users.
+ * Scenario C (active-subscription) → frontend MUST suppress Apple Pay button.
+ */
 export type SessionResponse = {
     loggedIn: false;
     userType: 'new-eligible-user';
@@ -7,6 +62,79 @@ export type SessionResponse = {
     contactId: string;
     userType: 'active-subscription' | 'b2b-user' | 'new-eligible-user';
 };
+export type ValidateMerchantRequest = {
+    validationURL: string;
+    recaptchaToken: string;
+};
+export type ValidateMerchantResponse = {
+    merchantSession: Record<string, unknown>;
+};
+/**
+ * Minimal shape of the Apple Pay token received from `onpaymentauthorized`.
+ * Mirrors the relevant subset of `ApplePayJS.ApplePayPaymentToken` without
+ * requiring the `@types/applepayjs` package as a dependency.
+ */
+export type ApplePayPaymentToken = {
+    paymentData: unknown;
+    paymentMethod: {
+        displayName?: string;
+        network?: string;
+        type?: string;
+    };
+    transactionIdentifier: string;
+};
+/**
+ * Subset of ApplePayJS.ApplePayPaymentContact used in purchase and shipping.
+ */
+export type ApplePayPaymentContact = {
+    emailAddress?: string;
+    givenName?: string;
+    familyName?: string;
+    phoneNumber?: string;
+    addressLines?: string[];
+    locality?: string;
+    administrativeArea?: string;
+    postalCode?: string;
+    countryCode?: string;
+};
+/**
+ * POST /v1/wallet/purchase
+ *
+ * The BFF orchestrates eligibility check, passwordless registration,
+ * basket creation, and payment finalization in a single call.
+ */
+export type PurchaseRequest = {
+    applePayToken: ApplePayPaymentToken;
+    /**
+     * @TODO [BFF Contract Misalignment]
+     * BFF spec requests `offerData: { ratePlanId, offerId }` but Commerce Services
+     * only provide a `skuId`. Frontend uses `skuId` directly — BFF must be aligned.
+     */
+    skuId: string;
+    billingContact: ApplePayPaymentContact;
+    /** Required if loggedIn: false — contains emailAddress from Apple Pay sheet. */
+    shippingContact?: ApplePayPaymentContact;
+    recaptchaTokens: {
+        checkEligibility: string;
+        newBasket: string;
+        registerUser: string;
+    };
+};
+export type PurchaseResponse = {
+    basketId: string;
+};
+/**
+ * Structured error body returned by all /v1/wallet/* endpoints on 4xx/5xx.
+ */
+export type WalletApiError = {
+    errorType: 'SERVICE_UNAVAILABLE' | 'PAYMENT_DECLINED' | 'VALIDATION_ERROR' | 'BAD_REQUEST' | 'EMAIL_COLLISION' | 'ELIGIBILITY_REJECTED' | 'REGISTRATION_FAILED';
+    message: string;
+};
+/**
+ * Error thrown by apiFetch for non-2xx responses.
+ * Carries the HTTP status and the parsed response body so callers can
+ * branch on structured error types (e.g. WalletApiError).
+ */
 export declare class ApiError extends Error {
     readonly status: number;
     readonly body: unknown;

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export { ApplePayButton, APPLE_PAY_EXCLUDED_VARIANTS } from './apple-pay-button';
+export { ApplePayButton, APPLE_PAY_EXCLUDED_VARIANTS, } from './apple-pay-button';
 export { ApplePayModal } from './apple-pay-modal';
 export { ensureApplePayLogoSymbol } from './apple-pay-logo';
 export { configureApplePay } from './clients/payment-checkout/config';