@economist/web-apple-pay 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,140 @@
+# @economist/web-apple-pay
+
+Framework-agnostic Apple Pay UI components implemented as Web Components.
+
+This package provides:
+
+- `teg-apple-pay-button`
+- `teg-apple-pay-modal`
+
+It is intentionally UI-focused. Consumer applications own backend payment orchestration, merchant validation, and secret handling.
+
+## Requirements
+
+- Node.js `20.x` or later
+- npm `10.x` or later
+
+## Installation
+
+```sh
+npm install --save @economist/web-apple-pay
+```
+
+## Quick start
+
+### 1) Configure runtime values
+
+Call `configureApplePay(...)` once during app startup, before rendering Apple Pay UI:
+
+```ts
+import { configureApplePay, defineApplePayElements } from '@economist/web-apple-pay';
+
+configureApplePay({
+  merchantId: 'merchant.com.economist.your-app',
+  debugBypassEnabled: false,
+});
+
+defineApplePayElements();
+```
+
+### 2) Create and mount a button
+
+```ts
+import type { Offer, ApplePayButton } from '@economist/web-apple-pay';
+
+const button = document.createElement('teg-apple-pay-button') as ApplePayButton;
+button.offer = offer as Offer;
+button.country = 'US';
+button.dataset.loggedIn = 'true';
+
+container.appendChild(button);
+```
+
+When clicked, the button creates and opens `teg-apple-pay-modal` automatically.
+
+## Runtime configuration
+
+### `configureApplePay(config)`
+
+Sets package-level runtime configuration used by Apple Pay availability checks.
+
+`config` shape:
+
+- `merchantId` (`string`, required): Apple Pay merchant identifier used for active-card checks.
+- `debugBypassEnabled` (`boolean`, optional): allows `?BYPASS_APPLE_PAY_CHECKS=1` query param to bypass capability checks in non-production-style debugging flows.
+
+If `merchantId` is not configured, Apple Pay availability checks return `false` and the button hides itself.
+
+## Component behavior
+
+### `ApplePayButton`
+
+- Requires `offer` and `country` before click flow is meaningful.
+- Checks Apple Pay availability on connect; if unavailable, it hides.
+- Skips rendering for excluded variants (`bundle`, `insider_print`).
+- Forwards `data-logged-in` from button to modal (`modal.dataset.loggedIn`).
+
+### `ApplePayModal`
+
+- Opened by `ApplePayButton` click.
+- Emits `apple-pay-confirmed` when CTA is accepted.
+- `Escape` closes the modal and prevents propagation to other global handlers.
+
+## Events
+
+### `apple-pay-confirmed`
+
+Dispatched from `ApplePayModal` as a `CustomEvent` with:
+
+- `detail.skuId` (`string`)
+- `detail.country` (`string`)
+
+Consumers should listen for this event and continue payment orchestration.
+
+## Public API
+
+- `defineApplePayElements()`: registers both custom elements.
+- `configureApplePay(config)`: sets required runtime config (merchant ID and optional debug bypass).
+- `ApplePayButton`: button component class.
+- `ApplePayModal`: modal component class.
+- `ensureApplePayLogoSymbol()`: logo symbol injection helper.
+- `Offer`: offer contract type used by component props.
+
+## Troubleshooting
+
+### Button does not appear
+
+Check:
+
+- `configureApplePay(...)` was called before rendering (with a valid `merchantId`)
+- device/browser supports Apple Pay checks (Safari/Apple device logic)
+- query string/feature flag gating for your page is satisfied
+- offer variant is not excluded (`bundle`, `insider_print`)
+
+### Logged-in checkbox copy looks wrong
+
+Set `button.dataset.loggedIn = 'true'` before appending the button. The button forwards this flag to the modal automatically.
+
+## Security and responsibilities
+
+Merchant setup must be handled by the consuming application:
+
+- inject merchant config at runtime
+- perform merchant validation on trusted backend services
+- keep certificates/secrets outside this package
+
+## Local development
+
+From `shared-packages`:
+
+```sh
+cd packages/web-apple-pay
+npm run build
+yalc publish --sig
+```
+
+Then in a consuming app:
+
+```sh
+yalc add @economist/web-apple-pay
+```

package/dist/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/apple-pay-button.d.ts

@@ -11,6 +11,5 @@ export declare class ApplePayButton extends HTMLElement {
     set offer(value: Offer | null);
     get country(): string;
     set country(value: string);
-    connectedCallback(): void;
-    private updateDisabledState;
+    connectedCallback(): Promise<void>;
 }