@economist/web-apple-pay 0.1.3-beta.24 → 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>
 `;
@@ -1182,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),
@@ -1929,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;
   }
   /**
@@ -2239,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();
@@ -2247,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>
 `;
@@ -1177,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),
@@ -1924,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;
   }
   /**

package/dist/src/apple-pay-button.stories.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>
@@ -1038,28 +1054,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>
@@ -1071,9 +1093,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>
 `;
@@ -1185,6 +1210,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),
@@ -1932,7 +1958,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;
   }
   /**

package/dist/src/apple-pay-modal.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>

package/dist/src/apple-pay-modal.stories.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>
 `;
@@ -1177,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),
@@ -1924,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;
   }
   /**

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

@@ -69,6 +69,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),

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

@@ -55,6 +55,7 @@ var apiFetch = async (path, options = {}) => {
   return response.json();
 };
 var performPurchase = (data) => {
+  console.log("[web-apple-pay] /v1/wallet/purchase payload", data);
   return apiFetch("/v1/wallet/purchase", {
     method: "POST",
     body: JSON.stringify(data),

package/dist/src/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ApplePayEntryPoint {
+    PAYWALL = "article_paywall",
+    REGWALL = "article_regwall"
+}

package/dist/src/constants.js

@@ -0,0 +1,9 @@
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint2) => {
+  ApplePayEntryPoint2["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint2["REGWALL"] = "article_regwall";
+  return ApplePayEntryPoint2;
+})(ApplePayEntryPoint || {});
+export {
+  ApplePayEntryPoint
+};

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ 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';
+export { ApplePayEntryPoint } from './constants';
 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

@@ -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>
 `;
@@ -1182,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),
@@ -1929,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;
   }
   /**
@@ -2239,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();
@@ -2247,6 +2282,7 @@ function defineApplePayElements() {
 export {
   APPLE_PAY_EXCLUDED_VARIANTS,
   ApplePayButton,
+  ApplePayEntryPoint,
   ApplePayModal,
   configureApplePay,
   defineApplePayElements,

package/package.json

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