@economist/web-apple-pay 0.1.3-beta.23 → 0.1.3-beta.26

package/dist/index.js

@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
     cursor: not-allowed;
   }
 
-  .apm__cta[aria-busy="true"] > * {
-    visibility: hidden;
+  .apm__cta-content {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .apm__cta-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
   }
 
-  .apm__cta[aria-busy="true"]::after {
+  .apm__cta-loading {
+    display: none;
+  }
+
+  .apm__cta[aria-busy="true"]::before {
     content: '';
     position: absolute;
-    left: 50%;
     top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
+    left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
     border-radius: 50%;
     animation: apm-cta-spinner 0.8s linear infinite;
   }
 
   @keyframes apm-cta-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
     to {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
     </div>
     <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
       <span class="apm__cta-content">
-        Continue with
-        <svg width="51" height="22" aria-hidden="true" role="img">
-          <use href="#apple-pay-logo" />
-        </svg>
+        <span class="apm__cta-label">
+          Continue with
+          <svg width="51" height="22" aria-hidden="true" role="img">
+            <use href="#apple-pay-logo" />
+          </svg>
+        </span>
       </span>
+      <span class="apm__cta-loading" aria-hidden="true">Loading...</span>
     </button>
   </div>
 </div>
@@ -1035,28 +1051,34 @@ var apple_pay_button_template_default = `<style>
     cursor: default;
   }
 
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
+  teg-apple-pay-button .apple-pay-btn.wap-loading::before {
     content: '';
     position: absolute;
-    left: 50%;
     top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
+    left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
     border-radius: 50%;
     animation: wap-button-spinner 0.8s linear infinite;
   }
 
+  teg-apple-pay-button .apple-pay-btn__logo {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__loading {
+    display: none;
+  }
+
   @keyframes wap-button-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
     to {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 </style>
@@ -1068,9 +1090,12 @@ var apple_pay_button_template_default = `<style>
     aria-label="Pay with Apple Pay"
     data-analytics="paywall:apple-pay-checkout"
   >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
+    <span class="apple-pay-btn__logo">
+      <svg width="51" height="22" aria-label="Apple Pay" role="img">
+        <use href="#apple-pay-logo" />
+      </svg>
+    </span>
+    <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
   </button>
 </div>
 `;
@@ -1156,18 +1181,11 @@ var apiFetch = async (path, options = {}) => {
   });
   if (!response.ok) {
     const contentType = response.headers.get("content-type") || "";
-    console.warn("[web-apple-pay] apiFetch: non-2xx response", {
-      path,
-      status: response.status,
-      contentType
-    });
     if (contentType.includes("application/json")) {
       const errorBody = await response.json();
-      console.warn("[web-apple-pay] apiFetch: parsed JSON error body", { errorBody });
       throw new ApiError(response.status, errorBody);
     }
     const errorText = await response.text();
-    console.warn("[web-apple-pay] apiFetch: non-JSON error body", { errorText });
     throw new Error(
       `API request failed: ${response.status} ${response.statusText} - ${errorText}`
     );
@@ -1189,6 +1207,7 @@ var validateAppleMerchant = (data) => {
   });
 };
 var performPurchase = (data) => {
+  console.log("[web-apple-pay] /v1/wallet/purchase payload", data);
   return apiFetch("/v1/wallet/purchase", {
     method: "POST",
     body: JSON.stringify(data),
@@ -1341,8 +1360,6 @@ var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a
 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/apple-session.ts
@@ -1531,8 +1548,6 @@ var shippingContactDetails = (shippingContact) => {
 };
 
 // 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,
@@ -1572,22 +1587,21 @@ function redirectFallback(skuId, returnUrl, country, options) {
   });
 }
 var ERROR_HANDLERS = {
-  EMAIL_COLLISION: ({ skuId, returnUrl, country, validatedEmail }) => redirectFallback(skuId, returnUrl, country, {
-    emailError: MSG_EMAIL_COLLISION,
+  // emailError flows as an inline field error on the email input.
+  // email pre-populates the input so the user doesn't have to retype it.
+  EMAIL_COLLISION: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
     email: validatedEmail
   }),
-  PAYMENT_DECLINED: ({ skuId, returnUrl, country }) => (
-    // Matches sma-checkout catch-all: always redirect with generic inlineError.
-    redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
-  ),
-  ELIGIBILITY_REJECTED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_ELIGIBILITY }),
-  REGISTRATION_FAILED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_REGISTRATION }),
-  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, country, validatedEmail }) => redirectFallback(skuId, returnUrl, country, {
-    emailError: MSG_REGISTRATION,
+  PAYMENT_DECLINED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ELIGIBILITY_REJECTED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  REGISTRATION_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
     email: validatedEmail
   }),
-  VALIDATION_ERROR: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED }),
-  RECAPTCHA_FAILED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  VALIDATION_ERROR: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  RECAPTCHA_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message })
 };
 function handleStructuredError(ctx) {
   const handler = ERROR_HANDLERS[ctx.walletError.errorType];
@@ -1941,7 +1955,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
     button.country = country;
-    button.entryPoint = entryPoint;
+    if (entryPoint) {
+      button.entryPoint = entryPoint;
+    }
     return button;
   }
   /**
@@ -2251,6 +2267,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
 };
 
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
+  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
+  return ApplePayEntryPoint2;
+})(ApplePayEntryPoint || {});
+
 // src/index.ts
 function defineApplePayElements() {
   ApplePayButton.define();
@@ -2259,6 +2282,7 @@ function defineApplePayElements() {
 export {
   APPLE_PAY_EXCLUDED_VARIANTS,
   ApplePayButton,
+  ApplePayEntryPoint,
   ApplePayModal,
   configureApplePay,
   defineApplePayElements,

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

@@ -1,4 +1,5 @@
 import type { Offer, ProductVariant } from './types/offer.types';
+import { ApplePayEntryPoint } from './constants';
 export declare const APPLE_PAY_EXCLUDED_VARIANTS: readonly ProductVariant[];
 export declare class ApplePayButton extends HTMLElement {
     #private;
@@ -7,13 +8,13 @@ export declare class ApplePayButton extends HTMLElement {
     /**
      * Creates and configures an ApplePayButton if the feature flag is present.
      */
-    static createIfEnabled(offer: Offer | undefined, country: string, entryPoint: string): ApplePayButton | null;
+    static createIfEnabled(offer: Offer | undefined, country: string, entryPoint?: ApplePayEntryPoint): ApplePayButton | null;
     get offer(): Offer | null;
     set offer(value: Offer | null);
     get country(): string;
     set country(value: string);
-    get entryPoint(): string;
-    set entryPoint(value: string);
+    get entryPoint(): ApplePayEntryPoint | '';
+    set entryPoint(value: ApplePayEntryPoint);
     /**
      * Awaitable contract for the component's current render lifecycle.
      *

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

@@ -320,28 +320,41 @@ var apple_pay_modal_template_default = `<style>
     cursor: not-allowed;
   }
 
-  .apm__cta[aria-busy="true"] > * {
-    visibility: hidden;
+  .apm__cta-content {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .apm__cta-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
   }
 
-  .apm__cta[aria-busy="true"]::after {
+  .apm__cta-loading {
+    display: none;
+  }
+
+  .apm__cta[aria-busy="true"]::before {
     content: '';
     position: absolute;
-    left: 50%;
     top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
+    left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
     border-radius: 50%;
     animation: apm-cta-spinner 0.8s linear infinite;
   }
 
   @keyframes apm-cta-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
     to {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 
@@ -518,11 +531,14 @@ var apple_pay_modal_template_default = `<style>
     </div>
     <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
       <span class="apm__cta-content">
-        Continue with
-        <svg width="51" height="22" aria-hidden="true" role="img">
-          <use href="#apple-pay-logo" />
-        </svg>
+        <span class="apm__cta-label">
+          Continue with
+          <svg width="51" height="22" aria-hidden="true" role="img">
+            <use href="#apple-pay-logo" />
+          </svg>
+        </span>
       </span>
+      <span class="apm__cta-loading" aria-hidden="true">Loading...</span>
     </button>
   </div>
 </div>
@@ -1030,28 +1046,34 @@ var apple_pay_button_template_default = `<style>
     cursor: default;
   }
 
-  teg-apple-pay-button .apple-pay-btn.wap-loading svg {
-    visibility: hidden;
-  }
-
-  teg-apple-pay-button .apple-pay-btn.wap-loading::after {
+  teg-apple-pay-button .apple-pay-btn.wap-loading::before {
     content: '';
     position: absolute;
-    left: 50%;
     top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
+    left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
     border-radius: 50%;
     animation: wap-button-spinner 0.8s linear infinite;
   }
 
+  teg-apple-pay-button .apple-pay-btn__logo {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__loading {
+    display: none;
+  }
+
   @keyframes wap-button-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
     to {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 </style>
@@ -1063,9 +1085,12 @@ var apple_pay_button_template_default = `<style>
     aria-label="Pay with Apple Pay"
     data-analytics="paywall:apple-pay-checkout"
   >
-    <svg width="51" height="22" aria-label="Apple Pay" role="img">
-      <use href="#apple-pay-logo" />
-    </svg>
+    <span class="apple-pay-btn__logo">
+      <svg width="51" height="22" aria-label="Apple Pay" role="img">
+        <use href="#apple-pay-logo" />
+      </svg>
+    </span>
+    <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
   </button>
 </div>
 `;
@@ -1151,18 +1176,11 @@ var apiFetch = async (path, options = {}) => {
   });
   if (!response.ok) {
     const contentType = response.headers.get("content-type") || "";
-    console.warn("[web-apple-pay] apiFetch: non-2xx response", {
-      path,
-      status: response.status,
-      contentType
-    });
     if (contentType.includes("application/json")) {
       const errorBody = await response.json();
-      console.warn("[web-apple-pay] apiFetch: parsed JSON error body", { errorBody });
       throw new ApiError(response.status, errorBody);
     }
     const errorText = await response.text();
-    console.warn("[web-apple-pay] apiFetch: non-JSON error body", { errorText });
     throw new Error(
       `API request failed: ${response.status} ${response.statusText} - ${errorText}`
     );
@@ -1184,6 +1202,7 @@ var validateAppleMerchant = (data) => {
   });
 };
 var performPurchase = (data) => {
+  console.log("[web-apple-pay] /v1/wallet/purchase payload", data);
   return apiFetch("/v1/wallet/purchase", {
     method: "POST",
     body: JSON.stringify(data),
@@ -1336,8 +1355,6 @@ var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a
 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/apple-session.ts
@@ -1526,8 +1543,6 @@ var shippingContactDetails = (shippingContact) => {
 };
 
 // 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,
@@ -1567,22 +1582,21 @@ function redirectFallback(skuId, returnUrl, country, options) {
   });
 }
 var ERROR_HANDLERS = {
-  EMAIL_COLLISION: ({ skuId, returnUrl, country, validatedEmail }) => redirectFallback(skuId, returnUrl, country, {
-    emailError: MSG_EMAIL_COLLISION,
+  // emailError flows as an inline field error on the email input.
+  // email pre-populates the input so the user doesn't have to retype it.
+  EMAIL_COLLISION: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
     email: validatedEmail
   }),
-  PAYMENT_DECLINED: ({ skuId, returnUrl, country }) => (
-    // Matches sma-checkout catch-all: always redirect with generic inlineError.
-    redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
-  ),
-  ELIGIBILITY_REJECTED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_ELIGIBILITY }),
-  REGISTRATION_FAILED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_REGISTRATION }),
-  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, country, validatedEmail }) => redirectFallback(skuId, returnUrl, country, {
-    emailError: MSG_REGISTRATION,
+  PAYMENT_DECLINED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ELIGIBILITY_REJECTED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  REGISTRATION_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  ACCOUNT_CREATION_FAILED: ({ skuId, returnUrl, country, validatedEmail, walletError }) => redirectFallback(skuId, returnUrl, country, {
+    emailError: walletError.message,
     email: validatedEmail
   }),
-  VALIDATION_ERROR: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED }),
-  RECAPTCHA_FAILED: ({ skuId, returnUrl, country }) => redirectFallback(skuId, returnUrl, country, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  VALIDATION_ERROR: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message }),
+  RECAPTCHA_FAILED: ({ skuId, returnUrl, country, walletError }) => redirectFallback(skuId, returnUrl, country, { inlineError: walletError.message })
 };
 function handleStructuredError(ctx) {
   const handler = ERROR_HANDLERS[ctx.walletError.errorType];
@@ -1936,7 +1950,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
     button.country = country;
-    button.entryPoint = entryPoint;
+    if (entryPoint) {
+      button.entryPoint = entryPoint;
+    }
     return button;
   }
   /**