@economist/web-apple-pay 1.0.0 → 1.1.0

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

@@ -0,0 +1,44 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
+export {
+  bypassApplePayChecks,
+  isAppleDeviceOrSafari,
+  isApplePayAvailable
+};

package/dist/src/index.d.ts

@@ -1,5 +1,7 @@
 export { ApplePayButton } from './apple-pay-button';
 export { ApplePayModal } from './apple-pay-modal';
 export { ensureApplePayLogoSymbol } from './apple-pay-logo';
+export { configureApplePay } from './clients/payment-checkout/config';
+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

@@ -36,14 +36,10 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
   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
-      );
+      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 (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
     }
     return price;
   };
@@ -222,23 +218,23 @@ var apple_pay_modal_template_default = `<style>
     height: 20px;
   }
 
-  .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
+  .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
     display: block;
   }
 
-  .apm__checkbox-input:checked ~ .apm__checkbox-custom .svg-checked {
+  .apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {
     display: block;
   }
 
-  .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
+  .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
     display: none;
   }
 
-  .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-error {
+  .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {
     display: block;
   }
 
-  .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {
+  .apm__checkbox-input:focus-visible~.apm__checkbox-custom {
     outline: solid 2px #c91d42;
     outline-offset: 2px;
     border-radius: 4px;
@@ -321,13 +317,16 @@ var apple_pay_modal_template_default = `<style>
 </style>
 
 <div class="apm-overlay" id="apple-pay-modal-overlay">
-  <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal" tabindex="-1">
+  <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"
+    tabindex="-1">
     <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <g clip-path="url(#clip0_15712_93054)">
           <rect width="24" height="24" fill="white" fill-opacity="0.01" />
           <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z" fill="#333333" />
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z"
+            fill="#333333" />
         </g>
         <defs>
           <clipPath id="clip0_15712_93054">
@@ -344,22 +343,34 @@ var apple_pay_modal_template_default = `<style>
       <div class="apm__checkbox-wrapper">
         <input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />
         <span class="apm__checkbox-custom">
-          <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z" fill="white" stroke="#595959" />
+          <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
+              fill="white" stroke="#595959" />
           </svg>
-          <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20014_9555)">
-              <path d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z" fill="#333333" />
-              <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z" fill="white" />
+              <path
+                d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
+                fill="#333333" />
+              <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"
+                fill="white" />
             </g>
             <defs>
               <clipPath id="clip0_20014_9555">
-                <path d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z" fill="white" />
+                <path
+                  d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z"
+                  fill="white" />
               </clipPath>
             </defs>
           </svg>
-          <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z" fill="white" stroke="#C91D42" stroke-width="2" />
+          <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M6 2.5H18C19.933 2.5 21.5 4.067 21.5 6V18C21.5 19.933 19.933 21.5 18 21.5H6C4.067 21.5 2.5 19.933 2.5 18V6C2.5 4.067 4.067 2.5 6 2.5Z"
+              fill="white" stroke="#C91D42" stroke-width="2" />
           </svg>
         </span>
       </div>
@@ -367,7 +378,9 @@ var apple_pay_modal_template_default = `<style>
     </label>
     <div class="apm__error" id="apple-pay-modal-error" role="alert">
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z" fill="#C91D42" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.4477 9.44772 12 10 12C10.5523 12 11 12.4477 11 13ZM10 6C10.5523 6 11 6.44772 11 7V10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10V7C9 6.44772 9.44772 6 10 6Z"
+          fill="#C91D42" />
       </svg>
       Please accept the terms to continue
     </div>
@@ -378,8 +391,7 @@ var apple_pay_modal_template_default = `<style>
       </svg>
     </button>
   </div>
-</div>
-`;
+</div>`;
 
 // src/apple-pay-modal.ts
 function getRenewalDateText(unit, duration) {
@@ -404,7 +416,11 @@ function getRenewalDateText(unit, duration) {
     default:
       break;
   }
-  return date.toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric" });
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
 }
 var MIN_TERM_DURATION_PATTERN = /^(\d+)\s+(\w+)s?$/;
 function getMinTermDurationUnits(minTermContractLength) {
@@ -614,32 +630,55 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       this.remove();
       return;
     }
-    const offerNameElement = this.querySelector("#apple-pay-modal-offer-name");
-    const dueTodayElement = this.querySelector("#apple-pay-modal-due-today");
-    const termsElement = this.querySelector("#apple-pay-modal-terms");
+    const offerNameElement = this.querySelector(
+      "#apple-pay-modal-offer-name"
+    );
+    const dueTodayElement = this.querySelector(
+      "#apple-pay-modal-due-today"
+    );
+    const termsElement = this.querySelector(
+      "#apple-pay-modal-terms"
+    );
     if (offerNameElement) {
       offerNameElement.textContent = getApplePayProductName(offer);
     }
     if (dueTodayElement) {
       const taxSuffix = offer.price.purchase === 0 || offer.price.tax?.inclusive ? "" : "*";
-      const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
+      const duePrice = formatPrice(
+        offer.price.purchase,
+        offer.price.currency_code
+      );
       dueTodayElement.innerHTML = duePrice ? `Due today: <strong>${duePrice}${taxSuffix}</strong>` : "";
     }
     if (termsElement) {
-      termsElement.innerHTML = renderTermsHtml(generateApplePayModalTerms(offer, country));
+      termsElement.innerHTML = renderTermsHtml(
+        generateApplePayModalTerms(offer, country)
+      );
     }
     const isUS = country === "US";
     const isLoggedIn = this.dataset.loggedIn === "true";
     const isOfferNYT = offer.product?.offer_type === "bogof_nyt";
     const isAutoRenewal = offer.subscription_options?.auto_renewal ?? true;
-    const checkboxTextElement = this.querySelector("#apple-pay-modal-checkbox-text");
+    const checkboxTextElement = this.querySelector(
+      "#apple-pay-modal-checkbox-text"
+    );
     if (checkboxTextElement) {
-      checkboxTextElement.innerHTML = getCheckboxTermsHtml(isOfferNYT, isLoggedIn, isAutoRenewal);
+      checkboxTextElement.innerHTML = getCheckboxTermsHtml(
+        isOfferNYT,
+        isLoggedIn,
+        isAutoRenewal
+      );
     }
-    const checkboxLabel = this.querySelector("#apple-pay-modal-checkbox-label");
-    const checkbox = this.querySelector("#apple-pay-modal-checkbox");
+    const checkboxLabel = this.querySelector(
+      "#apple-pay-modal-checkbox-label"
+    );
+    const checkbox = this.querySelector(
+      "#apple-pay-modal-checkbox"
+    );
     const cta = this.querySelector("#apple-pay-modal-cta");
-    const errorElement = this.querySelector("#apple-pay-modal-error");
+    const errorElement = this.querySelector(
+      "#apple-pay-modal-error"
+    );
     if (!isUS) {
       checkboxLabel?.remove();
       errorElement?.remove();
@@ -666,7 +705,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       );
       this.close();
     });
-    this.querySelector("#apple-pay-modal-close")?.addEventListener("click", () => this.close());
+    this.querySelector("#apple-pay-modal-close")?.addEventListener(
+      "click",
+      () => this.close()
+    );
   }
   open() {
     this.#triggerElement = document.activeElement;
@@ -684,7 +726,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   }
   close() {
     if (this.#keyHandler) {
-      document.removeEventListener("keydown", this.#keyHandler, { capture: true });
+      document.removeEventListener("keydown", this.#keyHandler, {
+        capture: true
+      });
       this.#keyHandler = null;
     }
     this.remove();
@@ -693,10 +737,56 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
 };
 
 // src/templates/apple-pay-button.template.html
-var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button class="apple-pay-btn" type="button" aria-label="Pay with Apple Pay" data-analytics="paywall:apple-pay-checkout">\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
+var apple_pay_button_template_default = '<style>\n  /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n  teg-apple-pay-button {\n    display: block;\n    margin: var(--apple-pay-margin, 0);\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-container {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    height: 100%;\n  }\n\n  teg-apple-pay-button .apple-pay-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    width: 100%;\n    min-width: 0;\n    height: 100%;\n    min-height: var(--apple-pay-height, 2.75rem);\n    background-color: #000;\n    color: #fff;\n    border: none;\n    border-radius: var(--apple-pay-border-radius, 1.375rem);\n    cursor: pointer;\n    font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n    font-size: 17px;\n    font-weight: 500;\n  }\n\n  teg-apple-pay-button .apple-pay-btn svg {\n    flex-shrink: 0;\n    display: block;\n  }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n  <button\n    class="apple-pay-btn"\n    type="button"\n    aria-label="Pay with Apple Pay"\n    data-analytics="paywall:apple-pay-checkout"\n  >\n    <svg width="51" height="22" aria-label="Apple Pay" role="img">\n      <use href="#apple-pay-logo" />\n    </svg>\n  </button>\n</div>\n';
+
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/detects.ts
+var isAppleDeviceOrSafari = () => {
+  const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
+  const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
+  return isIOSOrMacTouchDevice || isSafariBrowser;
+};
+var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
+var isApplePayAvailable = async () => {
+  if (bypassApplePayChecks()) {
+    return true;
+  }
+  if (!isAppleDeviceOrSafari()) {
+    return false;
+  }
+  const applePaySession = window.ApplePaySession;
+  if (!applePaySession) {
+    return false;
+  }
+  try {
+    if (typeof applePaySession.canMakePayments !== "function") {
+      return false;
+    }
+    if (!applePaySession.canMakePayments()) {
+      return false;
+    }
+    const merchantId = getApplePayConfig()?.merchantId;
+    if (!merchantId) {
+      return false;
+    }
+    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+  } catch (error) {
+    console.error("Error checking Apple Pay active card status:", error);
+    return false;
+  }
+};
 
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
+var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
 var ApplePayButton = class _ApplePayButton extends HTMLElement {
   static tag = "teg-apple-pay-button";
   static define() {
@@ -709,7 +799,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (!offer) {
       return null;
     }
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
+    const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
+    if (isExcludedVariant) {
+      return null;
+    }
+    if (!new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    )) {
       return null;
     }
     _ApplePayButton.define();
@@ -720,12 +816,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   }
   #offer = null;
   #country = "";
+  #rendering = false;
   get offer() {
     return this.#offer;
   }
   set offer(value) {
     this.#offer = value;
-    this.updateDisabledState();
+    this.#updateDisabledState();
   }
   get country() {
     return this.#country;
@@ -733,34 +830,47 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
-  connectedCallback() {
-    if (this.querySelector(".apple-pay-container")) {
+  async connectedCallback() {
+    if (this.#rendering || this.querySelector(".apple-pay-container")) {
       return;
     }
-    ensureApplePayLogoSymbol();
-    const template = document.createElement("template");
-    template.innerHTML = apple_pay_button_template_default;
-    this.appendChild(template.content.cloneNode(true));
-    this.updateDisabledState();
-    const button = this.querySelector(".apple-pay-btn");
-    button.addEventListener("click", () => {
-      if (!this.#offer) {
+    this.#rendering = true;
+    try {
+      const available = await isApplePayAvailable();
+      if (!available) {
+        this.style.display = "none";
         return;
       }
-      if (document.querySelector(ApplePayModal.tag)) {
-        return;
-      }
-      ApplePayModal.define();
-      const modal = document.createElement(ApplePayModal.tag);
-      modal.offer = this.#offer;
-      modal.country = this.#country;
-      if (this.dataset.loggedIn !== void 0) {
-        modal.dataset.loggedIn = this.dataset.loggedIn;
-      }
-      modal.open();
-    });
+      this.style.removeProperty("display");
+      ensureApplePayLogoSymbol();
+      const template = document.createElement("template");
+      template.innerHTML = apple_pay_button_template_default;
+      this.appendChild(template.content.cloneNode(true));
+      this.#updateDisabledState();
+      const button = this.querySelector(".apple-pay-btn");
+      button.addEventListener("click", () => {
+        if (!this.#offer) {
+          return;
+        }
+        if (document.querySelector(ApplePayModal.tag)) {
+          return;
+        }
+        ApplePayModal.define();
+        const modal = document.createElement(ApplePayModal.tag);
+        modal.offer = this.#offer;
+        modal.country = this.#country;
+        if (this.dataset.loggedIn !== void 0) {
+          modal.dataset.loggedIn = this.dataset.loggedIn;
+        }
+        modal.open();
+      });
+    } catch {
+      this.style.display = "none";
+    } finally {
+      this.#rendering = false;
+    }
   }
-  updateDisabledState() {
+  #updateDisabledState() {
     const button = this.querySelector(".apple-pay-btn");
     if (!button) {
       return;
@@ -783,6 +893,7 @@ function defineApplePayElements() {
 export {
   ApplePayButton,
   ApplePayModal,
+  configureApplePay,
   defineApplePayElements,
   ensureApplePayLogoSymbol
 };

package/dist/src/types/offer.types.d.ts

@@ -71,3 +71,13 @@ export type Offer = {
     content?: Content;
     meta_data?: MetaData;
 };
+/** Total number of items matching the relevant lookup. */
+export type ResponseModelMetaTotal = {
+    total: number;
+};
+export type ResponsePostPricedSkuOffer = {
+    /** Offer list. */
+    data: Offer[] | null;
+    /** Set of key value pairs. */
+    meta: ResponseModelMetaTotal | null;
+};

package/dist/src/utils/pricing.js

@@ -29,14 +29,10 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
   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
-      );
+      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 (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
     }
     return price;
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,6 +35,7 @@
     "@types/jest": "29.5.3",
     "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",
@@ -51,8 +52,5 @@
   "homepage": "https://github.com/EconomistDigitalSolutions/shared-packages#readme",
   "bugs": {
     "url": "https://github.com/EconomistDigitalSolutions/shared-packages/issues"
-  },
-  "dependencies": {
-    "yalc": "^1.0.0-pre.53"
   }
 }