@economist/web-apple-pay 0.1.3-beta.5 → 0.1.3-beta.51

package/dist/index.js

@@ -71,12 +71,543 @@ function ensureApplePayLogoSymbol() {
     return;
   }
   const tmp = document.createElement("div");
-  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="white"/></symbol></defs></svg>`;
+  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
   document.body.prepend(tmp.firstElementChild);
 }
 
 // src/templates/apple-pay-modal.template.html
-var apple_pay_modal_template_default = '<style>\n  .apm-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 97;\n    background: rgba(13, 13, 13, 0.7);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wall-gutter, 2rem);\n    box-sizing: border-box;\n  }\n\n  .apm {\n    position: relative;\n    background: #fff;\n    border-radius: 0.5rem 0.5rem 0 0;\n    border: 0.0625rem solid #d9d9d9;\n    padding: var(--mb-spacing-lg, 1.5rem);\n    width: 25rem;\n    max-width: 25rem;\n    box-sizing: border-box;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    box-shadow: 0 0.25rem 1rem 0 rgba(13, 13, 13, 0.15);\n  }\n\n  .apm__close {\n    position: absolute;\n    top: 1.5rem;\n    right: 1.3125rem;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .apm__close:focus {\n    outline: solid 0.125rem var(--focus-border-color, #121212);\n    border-radius: 0.25rem;\n  }\n\n  .apm__offer-name {\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-title-3-size, 1.25rem);\n    font-weight: 500;\n    color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n    line-height: var(--mb-typestyle-title-3-leading, 1.75rem);\n    font-style: normal;\n    margin: 0 1.5rem 0.5rem 0;\n  }\n\n  .apm__due-today {\n    color: #1a1a1a;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    margin: 0 0 0.75rem 0;\n  }\n\n  .apm__rule {\n    border: none;\n    border-top: 0.0625rem solid #d9d9d9;\n    margin: 0 0 1rem 0;\n  }\n\n  .apm__terms {\n    color: #1a1a1a;\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    margin: 0 0 1rem 0;\n  }\n\n  .apm__terms-bullets {\n    list-style: disc outside;\n    padding-left: 1.25rem;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .apm__terms-bullets li {\n    margin-bottom: 0.375rem;\n  }\n\n  .apm__terms-legal {\n    margin: 0;\n  }\n\n  .apm__passive-terms {\n    font-family: var(--wall-type-system-sans);\n    font-size: 0.9375rem;\n    color: #0d0d0d;\n    line-height: 1.4;\n    margin: 0 0 8px 0;\n  }\n\n  .apm__passive-terms a {\n    color: #1a1a1a;\n    font-weight: 700;\n    text-decoration: underline;\n  }\n\n  .apm__checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--mb-spacing-sm, 0.5rem);\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);\n    color: var(--mb-colour-greyscale-london-20, #1a1a1a);\n    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);\n    cursor: pointer;\n    margin: 0 0 1.5rem 0;\n  }\n\n  .apm__checkbox-label--error {\n    margin-bottom: 0.25rem;\n  }\n\n  .apm__checkbox-wrapper {\n    position: relative;\n    flex-shrink: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    margin-top: 0.0625rem;\n  }\n\n  .apm__checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    margin: 0;\n    z-index: 1;\n  }\n\n  .apm__checkbox-custom {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    pointer-events: none;\n  }\n\n  .apm__checkbox-custom svg {\n    display: none;\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {\n    display: block;\n  }\n\n  .apm__checkbox-input:checked ~ .apm__checkbox-custom .svg-checked {\n    display: block;\n  }\n\n  .apm__checkbox-label--error\n    .apm__checkbox-input:not(:checked)\n    ~ .apm__checkbox-custom\n    .svg-unchecked {\n    display: none;\n  }\n\n  .apm__checkbox-label--error\n    .apm__checkbox-input:not(:checked)\n    ~ .apm__checkbox-custom\n    .svg-error {\n    display: block;\n  }\n\n  .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {\n    outline: solid 0.125rem #c91d42;\n    outline-offset: 0.125rem;\n    border-radius: 0.25rem;\n  }\n\n  .apm__checkbox-label a {\n    color: #1a1a1a;\n    font-weight: 700;\n    text-decoration: underline;\n  }\n\n  .apm__error {\n    display: none;\n    align-items: center;\n    gap: 0.75rem;\n    color: var(--mb-colour-greyscale-london-5, #0d0d0d);\n    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .apm__error--visible {\n    display: flex;\n  }\n\n  .apm__cta {\n    display: flex;\n    width: 100%;\n    height: 2.75rem;\n    padding: 0.375rem 1rem;\n    justify-content: center;\n    align-items: center;\n    gap: 0.375rem;\n    border-radius: 0.25rem;\n    background: #000;\n    border: none;\n    cursor: pointer;\n    color: #fff;\n    text-align: center;\n    font-family: var(\n      --mb-typeface-sans,\n      var(--wall-type-system-sans, system-ui, sans-serif)\n    );\n    font-size: 1.25rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n  }\n\n  .apm__cta svg {\n    flex-shrink: 0;\n    display: block;\n  }\n\n  @media (min-width: 22.5rem) and (max-width: 37.5rem) {\n    .apm {\n      width: 24.375rem;\n      max-width: 24.375rem;\n    }\n  }\n\n  @media (min-width: 37.5625rem) {\n    .apm {\n      border-radius: 0.5rem;\n    }\n  }\n\n  @media (max-width: 22.4375rem) {\n    .apm {\n      width: 20rem;\n      max-width: 20rem;\n    }\n  }\n\n  @media (max-width: 26.1875rem) {\n    .apm__cta {\n      font-size: 1.125rem;\n    }\n  }\n</style>\n\n<div class="apm-overlay" id="apple-pay-modal-overlay">\n  <div\n    class="apm"\n    role="dialog"\n    aria-modal="true"\n    aria-labelledby="apple-pay-modal-offer-name"\n    id="apple-pay-modal"\n    tabindex="-1"\n  >\n    <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">\n      <svg\n        aria-hidden="true"\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n      >\n        <g clip-path="url(#clip0_15712_93054)">\n          <rect width="24" height="24" fill="white" fill-opacity="0.01" />\n          <path\n            fill-rule="evenodd"\n            clip-rule="evenodd"\n            d="M0 0H24V24H0V0Z"\n            fill="white"\n            fill-opacity="0.01"\n          />\n          <path\n            fill-rule="evenodd"\n            clip-rule="evenodd"\n            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"\n            fill="#333333"\n          />\n        </g>\n        <defs>\n          <clipPath id="clip0_15712_93054">\n            <rect width="24" height="24" fill="white" />\n          </clipPath>\n        </defs>\n      </svg>\n    </button>\n    <p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>\n    <p class="apm__due-today" id="apple-pay-modal-due-today"></p>\n    <hr class="apm__rule" />\n    <div class="apm__terms" id="apple-pay-modal-terms"></div>\n    <p class="apm__passive-terms" id="apple-pay-modal-passive-terms"></p>\n    <label\n      class="apm__checkbox-label"\n      id="apple-pay-modal-checkbox-label"\n      for="apple-pay-modal-checkbox"\n    >\n      <div class="apm__checkbox-wrapper">\n        <input\n          class="apm__checkbox-input"\n          type="checkbox"\n          id="apple-pay-modal-checkbox"\n        />\n        <span class="apm__checkbox-custom">\n          <svg\n            aria-hidden="true"\n            class="svg-unchecked"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path\n              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"\n              fill="white"\n              stroke="#595959"\n            />\n          </svg>\n          <svg\n            aria-hidden="true"\n            class="svg-checked"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <g clip-path="url(#clip0_20014_9555)">\n              <path\n                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"\n                fill="#333333"\n              />\n              <path\n                d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"\n                fill="white"\n              />\n            </g>\n            <defs>\n              <clipPath id="clip0_20014_9555">\n                <path\n                  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"\n                  fill="white"\n                />\n              </clipPath>\n            </defs>\n          </svg>\n          <svg\n            aria-hidden="true"\n            class="svg-error"\n            width="24"\n            height="24"\n            viewBox="0 0 24 24"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path\n              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"\n              fill="white"\n              stroke="#C91D42"\n              stroke-width="2"\n            />\n          </svg>\n        </span>\n      </div>\n      <span id="apple-pay-modal-checkbox-text"></span>\n    </label>\n    <div class="apm__error" id="apple-pay-modal-error" role="alert">\n      <svg\n        aria-hidden="true"\n        width="20"\n        height="20"\n        viewBox="0 0 20 20"\n        fill="none"\n        xmlns="http://www.w3.org/2000/svg"\n      >\n        <path\n          fill-rule="evenodd"\n          clip-rule="evenodd"\n          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"\n          fill="#C91D42"\n        />\n      </svg>\n      Please accept the terms to continue\n    </div>\n    <button class="apm__cta" id="apple-pay-modal-cta">\n      Continue with\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</div>\n\n';
+var apple_pay_modal_template_default = `<style>
+  .apm-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 97;
+    background: rgba(13, 13, 13, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--wall-gutter, 2rem);
+    box-sizing: border-box;
+  }
+
+  .apm {
+    position: relative;
+    background: #fff;
+    border-radius: 0.5rem 0.5rem 0 0;
+    border: 0.0625rem solid #d9d9d9;
+    padding: var(--mb-spacing-lg, 1.5rem);
+    width: 25rem;
+    max-width: 25rem;
+    box-sizing: border-box;
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    box-shadow: 0 0.25rem 1rem 0 rgba(13, 13, 13, 0.15);
+  }
+
+  .apm__close {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.3125rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mb-colour-greyscale-london-20, #1a1a1a);
+    transition:
+      background-color ease-in-out 0.2s,
+      color ease-in-out 0.2s;
+  }
+
+  .apm__close:hover {
+    color: var(--mb-colour-base-chicago-30, #333333);
+  }
+
+  .apm__close:active {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
+    color: var(--mb-colour-base-chicago-30, #333333);
+  }
+
+  .apm__close:focus {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
+    outline: solid 0.125rem var(--focus-border-color, #121212);
+    border-radius: 0.25rem;
+  }
+
+  .apm__offer-name {
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    font-size: var(--mb-typestyle-title-3-size, 1.25rem);
+    font-weight: 500;
+    color: var(--mb-colour-greyscale-london-5, #0d0d0d);
+    line-height: var(--mb-typestyle-title-3-leading, 1.75rem);
+    font-style: normal;
+    margin: 0 1.5rem 0.5rem 0;
+  }
+
+  .apm__due-today {
+    color: #1a1a1a;
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);
+    margin: 0 0 0.75rem 0;
+  }
+
+  .apm__rule {
+    border: none;
+    border-top: 0.0625rem solid #d9d9d9;
+    margin: 0 0 1rem 0;
+  }
+
+  .apm__terms {
+    color: #1a1a1a;
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);
+    margin: 0 0 1rem 0;
+  }
+
+  .apm__terms-bullets {
+    list-style: disc outside;
+    padding-left: 1.25rem;
+    margin: 0 0 0.75rem 0;
+  }
+
+  .apm__terms-bullets li {
+    margin-bottom: 0.375rem;
+  }
+
+  .apm__terms-legal {
+    margin: 0;
+  }
+
+  .apm__passive-terms {
+    font-family: var(--wall-type-system-sans);
+    font-size: 0.9375rem;
+    color: #0d0d0d;
+    line-height: 1.4;
+    margin: 0 0 8px 0;
+  }
+
+  .apm__passive-terms a {
+    color: #1a1a1a;
+    font-weight: 700;
+    text-decoration: underline;
+  }
+
+  .apm__checkbox-label {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mb-spacing-sm, 0.5rem);
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    font-size: var(--mb-typestyle-label-2-size, 0.9375rem);
+    color: var(--mb-colour-greyscale-london-20, #1a1a1a);
+    line-height: var(--mb-typestyle-label-2-leading, 1.25rem);
+    cursor: pointer;
+    margin: 0 0 1.5rem 0;
+  }
+
+  .apm__checkbox-label--error {
+    margin-bottom: 0.25rem;
+  }
+
+  .apm__checkbox-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.0625rem;
+  }
+
+  .apm__checkbox-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+    z-index: 1;
+  }
+
+  .apm__checkbox-custom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    pointer-events: none;
+  }
+
+  .apm__checkbox-custom svg {
+    display: none;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
+    display: block;
+  }
+
+  .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 {
+    display: none;
+  }
+
+  .apm__checkbox-label--error
+    .apm__checkbox-input:not(:checked)
+    ~ .apm__checkbox-custom
+    .svg-error {
+    display: block;
+  }
+
+  .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {
+    outline: solid 0.125rem #c91d42;
+    outline-offset: 0.125rem;
+    border-radius: 0.25rem;
+  }
+
+  .apm__checkbox-label a {
+    color: #1a1a1a;
+    font-weight: 700;
+    text-decoration: underline;
+  }
+
+  .apm__error {
+    display: none;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--mb-colour-greyscale-london-5, #0d0d0d);
+    font-family: var(--mb-typeface-sans, var(--wall-type-system-sans));
+    font-size: 1.0625rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .apm__error--visible {
+    display: flex;
+  }
+
+  .apm__cta {
+    display: flex;
+    width: 100%;
+    height: 2.75rem;
+    padding: 0.375rem 1rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: 0.25rem;
+    background: #000;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    text-align: center;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  .apm__cta:disabled {
+    cursor: not-allowed;
+  }
+
+  .apm__cta[aria-busy="true"] {
+    position: relative;
+    cursor: not-allowed;
+  }
+
+  .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-loading {
+    display: none;
+  }
+
+  .apm__cta[aria-busy="true"]::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    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: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  .apm__cta svg {
+    flex-shrink: 0;
+    display: block;
+  }
+
+  @media (min-width: 22.5rem) and (max-width: 37.5rem) {
+    .apm {
+      width: 24.375rem;
+      max-width: 24.375rem;
+    }
+  }
+
+  @media (min-width: 37.5625rem) {
+    .apm {
+      border-radius: 0.5rem;
+    }
+  }
+
+  @media (max-width: 22.4375rem) {
+    .apm {
+      width: 20rem;
+      max-width: 20rem;
+    }
+  }
+
+  @media (max-width: 26.1875rem) {
+    .apm__cta {
+      font-size: 1.125rem;
+    }
+  }
+</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"
+  >
+    <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
+      <svg
+        aria-hidden="true"
+        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="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_15712_93054">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </button>
+    <p class="apm__offer-name" id="apple-pay-modal-offer-name"></p>
+    <p class="apm__due-today" id="apple-pay-modal-due-today"></p>
+    <hr class="apm__rule" />
+    <div class="apm__terms" id="apple-pay-modal-terms"></div>
+    <p class="apm__passive-terms" id="apple-pay-modal-passive-terms"></p>
+    <label
+      class="apm__checkbox-label"
+      id="apple-pay-modal-checkbox-label"
+      for="apple-pay-modal-checkbox"
+    >
+      <div class="apm__checkbox-wrapper">
+        <input
+          class="apm__checkbox-input"
+          type="checkbox"
+          id="apple-pay-modal-checkbox"
+        />
+        <span class="apm__checkbox-custom">
+          <svg
+            aria-hidden="true"
+            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
+            aria-hidden="true"
+            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"
+              />
+            </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"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+          <svg
+            aria-hidden="true"
+            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>
+      <span id="apple-pay-modal-checkbox-text"></span>
+    </label>
+    <div class="apm__error" id="apple-pay-modal-error" role="alert">
+      <svg
+        aria-hidden="true"
+        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"
+        />
+      </svg>
+      Please accept the terms to continue
+    </div>
+    <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
+      <span class="apm__cta-content">
+        <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>
+
+`;
+
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var getApplePayConfig = () => runtimeConfig;
+
+// src/utils/recaptcha.ts
+var loadRecaptchaScript = (siteKey) => {
+  return new Promise((resolve, reject) => {
+    if (typeof grecaptcha !== "undefined") return resolve();
+    const existingScript = document.querySelector(
+      'script[src*="recaptcha/api.js"]'
+    );
+    if (existingScript) {
+      existingScript.addEventListener("load", () => resolve());
+      existingScript.addEventListener("error", () => {
+        reject(new Error("Failed to load existing reCAPTCHA script"));
+      });
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      reject(new Error("Failed to load reCAPTCHA script"));
+    };
+    document.head.appendChild(script);
+  });
+};
+var getRecaptchaToken = async (action) => {
+  const siteKey = getApplePayConfig()?.recaptchaSiteKey;
+  if (!siteKey) {
+    throw new Error(
+      "[web-apple-pay] Missing recaptchaSiteKey. Call configureApplePay({ recaptchaSiteKey, ... }) before initiating Apple Pay."
+    );
+  }
+  await loadRecaptchaScript(siteKey);
+  return new Promise((resolve, reject) => {
+    grecaptcha.ready(() => {
+      grecaptcha.execute(siteKey, { action }).then(resolve).catch(reject);
+    });
+  });
+};
+var getPurchaseRecaptchaToken = () => {
+  return getRecaptchaToken("walletPurchase");
+};
 
 // src/apple-pay-modal.ts
 function getRenewalDateText(unit, duration) {
@@ -128,6 +659,7 @@ function getOfferTypeText(offerType) {
 }
 var TERMS_LINK = '<a href="https://www.economistgroup.com/terms-of-use" target="_blank" rel="noopener noreferrer">Terms and Conditions</a>';
 var PRIVACY_LINK = '<a href="https://www.economistgroup.com/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>';
+var MSG_RECAPTCHA_LOAD_ERROR = "Something went wrong. Please close and try again.";
 function getCheckboxTermsHtml(isNYT, isLoggedIn, autoRenewal) {
   const autoRenewalClause = autoRenewal ? " and auto-renewal terms above," : "";
   if (isNYT) {
@@ -160,6 +692,8 @@ function renewalPeriodText(unit, duration) {
       return "";
   }
 }
+var LI_SEPARATOR = "\0LI_SEP\0";
+var P_SEPARATOR = "\0P_SEP\0";
 function buildTermsContext(offer, country) {
   const isUS = country === "US";
   const isCA = country === "CA";
@@ -196,19 +730,19 @@ function freeTrialTerms(offer, ctx) {
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? 1;
   const trialDateStr = `on ${getRenewalDateText(trialUnit, trialDuration)}${ctx.verificationText}`;
   if (ctx.isUS) {
-    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function nytTerms(ctx) {
   const nytAccessText = "Your complimentary access to The New York Times is for one year only and does not auto-renew. We will send your instructions on how to redeem access to The New York Times by email.";
   if (ctx.isUS) {
-    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
   if (ctx.isCA) {
-    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
-  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
+  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
 }
 function minTermContractTerms(offer, ctx) {
   const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
@@ -218,28 +752,28 @@ function minTermContractTerms(offer, ctx) {
   const contractLength = mtDuration && mtUnit ? `${mtDuration} ${mtUnit}` : "";
   const initialContractText = contractLength ? `your initial ${contractLength} contract` : "your initial contract";
   const mtRenewalDateText = mtUnit && mtDuration ? getRenewalDateText(mtUnit, Number(mtDuration)) : ctx.renewalDateText;
-  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}{{liSeparator}}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
+  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}${LI_SEPARATOR}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
 }
 function paidTrialTerms(offer, ctx) {
   const trialUnit = offer.subscription_options?.trial_period?.unit ?? ctx.unit;
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? ctx.duration;
   const trialDateText = getRenewalDateText(trialUnit, trialDuration);
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function autoRenewalTerms(ctx) {
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function noAutoRenewalTerms(ctx) {
   if (ctx.isUS || ctx.isCA) {
-    return `Your subscription does not renew automatically${ctx.taxFootnote}{{liSeparator}}`;
+    return `Your subscription does not renew automatically${ctx.taxFootnote}${LI_SEPARATOR}`;
   }
-  return `Your subscription does not renew automatically{{liSeparator}}`;
+  return `Your subscription does not renew automatically${LI_SEPARATOR}`;
 }
 function generateApplePayModalTerms(offer, country) {
   const ctx = buildTermsContext(offer, country);
@@ -262,9 +796,9 @@ function generateApplePayModalTerms(offer, country) {
   return noAutoRenewalTerms(ctx);
 }
 function renderTermsHtml(termsText) {
-  const renewalTextLists = termsText.split("{{liSeparator}}");
+  const renewalTextLists = termsText.split(LI_SEPARATOR);
   const lastPart = renewalTextLists.pop() || "";
-  const renewalTextParagraphs = lastPart.split("{{pSeparator}}");
+  const renewalTextParagraphs = lastPart.split(P_SEPARATOR);
   const ulHtml = `<ul class="apm__terms-bullets">${renewalTextLists.map((value) => `<li>${value}</li>`).join("")}</ul>`;
   const paragraphHtml = renewalTextParagraphs.filter(Boolean).map((value) => `<p class="apm__terms-legal">${value}</p>`).join("");
   return ulHtml + paragraphHtml;
@@ -297,6 +831,16 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
   #country = "";
   #triggerElement = null;
   #keyHandler = null;
+  #isClosed = false;
+  /**
+   * Callback invoked synchronously from the CTA click handler.
+   * Receives a Promise of a reCAPTCHA token — the promise is already in-flight
+   * by the time this is called. The caller (ApplePayButton) must call
+   * new ApplePaySession() synchronously inside this callback to stay within
+   * Safari's user-gesture window. The token promise resolves before
+   * onPaymentAuthorized fires (user still needs to authenticate on the sheet).
+   */
+  onConfirm = null;
   set offer(value) {
     this.#offer = value;
   }
@@ -317,7 +861,6 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const offer = this.#offer;
     const country = this.#country;
     if (!offer) {
-      console.error("ApplePayModal: Missing or invalid offer data");
       this.remove();
       return;
     }
@@ -393,19 +936,40 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       });
     }
     cta?.addEventListener("click", () => {
+      if (cta.disabled) return;
       if (isUS && checkbox && !checkbox.checked) {
         errorElement?.classList.add("apm__error--visible");
         checkboxLabel?.classList.add("apm__checkbox-label--error");
         return;
       }
-      this.dispatchEvent(
-        new CustomEvent("apple-pay-confirmed", {
-          bubbles: true,
-          composed: true,
-          detail: { skuId: offer.sku_id, country }
-        })
-      );
-      this.close();
+      errorElement?.classList.remove("apm__error--visible");
+      this.querySelector('[role="alert"]:not(#apple-pay-modal-error)')?.remove();
+      cta.disabled = true;
+      cta.setAttribute("aria-busy", "true");
+      const recaptchaTokenPromise = getPurchaseRecaptchaToken();
+      if (!this.#isClosed && this.onConfirm) {
+        this.onConfirm(recaptchaTokenPromise);
+        this.close();
+      }
+      recaptchaTokenPromise.catch(() => {
+        if (this.#isClosed) return;
+        cta.disabled = false;
+        cta.removeAttribute("aria-busy");
+        const existingError = this.querySelector("#apple-pay-modal-error");
+        if (existingError) {
+          const icon = existingError.querySelector("svg");
+          existingError.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          if (icon) existingError.prepend(icon);
+          existingError.setAttribute("role", "alert");
+          existingError.classList.add("apm__error--visible");
+        } else {
+          const errorNotice = document.createElement("div");
+          errorNotice.setAttribute("role", "alert");
+          errorNotice.className = "apm__error apm__error--visible";
+          errorNotice.textContent = MSG_RECAPTCHA_LOAD_ERROR;
+          cta?.insertAdjacentElement("beforebegin", errorNotice);
+        }
+      });
     });
     this.querySelector("#apple-pay-modal-close")?.addEventListener(
       "click",
@@ -413,6 +977,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     );
   }
   open() {
+    this.#isClosed = false;
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -427,6 +992,7 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     this.querySelector("#apple-pay-modal")?.focus();
   }
   close() {
+    this.#isClosed = true;
     if (this.#keyHandler) {
       document.removeEventListener("keydown", this.#keyHandler, {
         capture: true
@@ -439,16 +1005,136 @@ 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(--mb-typeface-sans, var(--wall-type-system-sans));\n    font-size: 1.0625rem;\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';
+var apple_pay_button_template_default = `<style>
+  /*
+   * Entry CTA: \u201CSubscribe with\u201D + Apple Pay wordmark (Figma 1118:14088).
+   * \u201CSubscribe with\u201D matches Continue to checkout typography (EconomistSans Regular / 17 / 24 / 400).
+   */
+  teg-apple-pay-button {
+    display: block;
+    margin: var(--apple-pay-margin, 0);
+    width: 100%;
+    height: 100%;
+  }
 
-// src/clients/payment-checkout/config.ts
-var runtimeConfig = null;
-var configureApplePay = (config) => {
-  runtimeConfig = {
-    ...config
-  };
-};
-var getApplePayConfig = () => runtimeConfig;
+  teg-apple-pay-button .apple-pay-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+  }
+
+  teg-apple-pay-button .apple-pay-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: var(--apple-pay-height, 2.5rem);
+    padding: 0;
+    box-sizing: border-box;
+    background-color: var(--apple-pay-background-color, #1a1a1a);
+    color: var(--apple-pay-foreground-color, #fff);
+    border: none;
+    border-radius: var(--apple-pay-border-radius, 0.25rem);
+    cursor: pointer;
+    /* Same as wall Continue to checkout / Marber button large */
+    font-family: var(
+      --mb-typeface-sans,
+      var(--wall-type-system-sans, 'EconomistSans', system-ui, sans-serif)
+    );
+    font-size: var(--mb-button-font-size, 1.0625rem);
+    font-weight: var(--mb-font-weight-regular, 400);
+    line-height: 1;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__label {
+    display: inline-flex;
+    align-items: center;
+    /* No flex gap \u2014 spacing after \u201Cwith\u201D uses the same word-space as \u201CSubscribe with\u201D */
+    gap: 0;
+    white-space: nowrap;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__caption {
+    /* One typographic word space after \u201Cwith\u201D, matching Subscribe\u2194with */
+    padding-right: 0.25em;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__logo {
+    flex-shrink: 0;
+    display: block;
+    /* Match caption font-size so mark aligns with text metrics */
+    height: 1.05em;
+    width: auto;
+    aspect-ratio: 51 / 22;
+    color: currentColor;
+    /* Optical nudge \u2014 SVG viewBox sits slightly high vs EconomistSans caps */
+    transform: translateY(0.06em);
+  }
+
+  teg-apple-pay-button .apple-pay-btn.wap-loading {
+    position: relative;
+    cursor: default;
+  }
+
+  teg-apple-pay-button .apple-pay-btn.wap-loading .apple-pay-btn__label {
+    visibility: hidden;
+  }
+
+  teg-apple-pay-button .apple-pay-btn.wap-loading::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--apple-pay-spinner-track-color, rgba(255, 255, 255, 0.25));
+    border-top-color: var(--apple-pay-spinner-head-color, currentColor);
+    border-radius: 50%;
+    animation: wap-button-spinner 0.8s linear infinite;
+  }
+
+  teg-apple-pay-button .apple-pay-btn__loading {
+    display: none;
+  }
+
+  @keyframes wap-button-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+</style>
+
+<div class="apple-pay-container" aria-label="Subscribe with Apple Pay">
+  <button
+    class="apple-pay-btn"
+    type="button"
+    aria-label="Subscribe with Apple Pay"
+    data-analytics="paywall:apple-pay-checkout"
+  >
+    <span class="apple-pay-btn__label"
+      ><span class="apple-pay-btn__caption">Subscribe with</span
+      ><svg
+        class="apple-pay-btn__logo"
+        width="42"
+        height="18"
+        viewBox="0 0 51 22"
+        aria-hidden="true"
+        role="img"
+      >
+        <use href="#apple-pay-logo" />
+      </svg
+    ></span>
+    <span class="apple-pay-btn__loading" aria-hidden="true">Loading...</span>
+  </button>
+</div>
+`;
 
 // src/clients/payment-checkout/detects.ts
 var isAppleDeviceOrSafari = () => {
@@ -456,7 +1142,7 @@ var isAppleDeviceOrSafari = () => {
   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 bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null;
 var isApplePayAvailable = async () => {
   if (bypassApplePayChecks()) {
     return true;
@@ -477,14 +1163,11 @@ var isApplePayAvailable = async () => {
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
-      console.warn(
-        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
-      );
       return false;
     }
-    return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
-  } catch (error) {
-    console.error("Error checking Apple Pay active card status:", error);
+    const hasActiveCard = await applePaySession.canMakePaymentsWithActiveCard(merchantId);
+    return hasActiveCard;
+  } catch {
     return false;
   }
 };
@@ -556,7 +1239,6 @@ var validateAppleMerchant = (data) => {
   });
 };
 var performPurchase = (data) => {
-  console.log("[web-apple-pay] performPurchase request", JSON.stringify(data, null, 2));
   return apiFetch("/v1/wallet/purchase", {
     method: "POST",
     body: JSON.stringify(data),
@@ -573,13 +1255,25 @@ var getExpressCheckoutSession = () => {
 };
 
 // src/utils/expressCheckoutRedirect.ts
-var captureOriginUrl = () => window.location.href;
-var buildQueryString = () => {
-  const countryCode = new URLSearchParams(window.location.search).get(
-    "country"
-  );
-  return countryCode ? `&country=${encodeURIComponent(countryCode)}` : "";
+var CHECKOUT_REDIRECT_KEY = "checkout-redirect";
+var ALLOWED_REDIRECT_HOSTNAME = "economist.com";
+function isAllowedRedirectUrl(url) {
+  if (url.startsWith("/")) return !url.startsWith("//");
+  try {
+    const { hostname } = new URL(url);
+    return hostname === ALLOWED_REDIRECT_HOSTNAME || hostname.endsWith(`.${ALLOWED_REDIRECT_HOSTNAME}`);
+  } catch {
+    return false;
+  }
+}
+var writeCheckoutRedirect = (originUrl) => {
+  if (!isAllowedRedirectUrl(originUrl)) return;
+  try {
+    localStorage.setItem(CHECKOUT_REDIRECT_KEY, originUrl);
+  } catch {
+  }
 };
+var captureOriginUrl = () => window.location.href;
 var decodeSku = (sku) => {
   try {
     return atob(sku.substring(sku.indexOf("-") + 1));
@@ -590,75 +1284,25 @@ var decodeSku = (sku) => {
 var redirectToCheckoutComplete = (params) => {
   const url = new URL("/checkout/complete", window.location.origin);
   url.searchParams.set("basketId", params.basketId);
-  if (params.queryString) {
-    const qs = params.queryString.startsWith("?") ? params.queryString.slice(1) : params.queryString;
-    new URLSearchParams(qs).forEach((v, k) => url.searchParams.set(k, v));
-  }
   url.searchParams.set("lmo_offer", params.skuId);
   url.searchParams.set("status", params.status);
   url.searchParams.set("redirectToCheckout", "true");
-  url.searchParams.set("returnUrl", params.returnUrl);
+  if (params.email) url.searchParams.set("email", params.email);
+  if (params.country) url.searchParams.set("country", params.country);
   return url.pathname + url.search;
 };
 var redirectToCheckoutFallback = (params) => {
   const url = new URL(window.location.href);
   url.pathname = "/checkout";
-  url.searchParams.set("lmo_offer", params.skuId);
+  url.searchParams.set("lmo_offer", decodeSku(params.skuId));
   if (params.inlineError)
     url.searchParams.set("inlineError", params.inlineError);
   if (params.email) url.searchParams.set("email", params.email);
   if (params.emailError) url.searchParams.set("emailError", params.emailError);
-  url.searchParams.set("returnUrl", params.returnUrl);
+  if (params.country) url.searchParams.set("country", params.country);
   return url.pathname + url.search;
 };
 
-// src/utils/recaptcha.ts
-var loadRecaptchaScript = (siteKey) => {
-  return new Promise((resolve, reject) => {
-    if (typeof grecaptcha !== "undefined") return resolve();
-    const existingScript = document.querySelector(
-      'script[src*="recaptcha/api.js"]'
-    );
-    if (existingScript) {
-      existingScript.addEventListener("load", () => resolve());
-      existingScript.addEventListener(
-        "error",
-        () => reject(new Error("Failed to load existing reCAPTCHA script"))
-      );
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
-    script.async = true;
-    script.defer = true;
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load reCAPTCHA script"));
-    document.head.appendChild(script);
-  });
-};
-var getRecaptchaToken = async (action) => {
-  const siteKey = getApplePayConfig()?.recaptchaSiteKey;
-  if (!siteKey) {
-    throw new Error(
-      "[web-apple-pay] Missing recaptchaSiteKey. Call configureApplePay({ recaptchaSiteKey, ... }) before initiating Apple Pay."
-    );
-  }
-  await loadRecaptchaScript(siteKey);
-  return new Promise((resolve, reject) => {
-    grecaptcha.ready(() => {
-      grecaptcha.execute(siteKey, { action }).then(resolve).catch(reject);
-    });
-  });
-};
-var getPurchaseRecaptchaTokens = async () => {
-  const [checkEligibility, newBasket, registerUser] = await Promise.all([
-    getRecaptchaToken("checkEligibility"),
-    getRecaptchaToken("newBasket"),
-    getRecaptchaToken("registerUser")
-  ]);
-  return { checkEligibility, newBasket, registerUser };
-};
-
 // src/utils/expressCheckoutTracking.ts
 var EXPRESS_CHECKOUT_EVENTS = {
   /** Wallet button displayed */
@@ -738,12 +1382,57 @@ var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
 var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
 var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
 var MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
+var BILLING_COUNTRY_MISMATCH_FALLBACK = "Country not supported for this purchase";
+var MSG_BILLING_COUNTRY_MISMATCH_REDIRECT = "This country isn\u2019t supported for this purchase. Try updating your billing address.";
+var buildCountryMismatchMessage = (countryCode) => {
+  if (!countryCode) return BILLING_COUNTRY_MISMATCH_FALLBACK;
+  try {
+    const regionNames = new Intl.DisplayNames(["en"], { type: "region", fallback: "none" });
+    const upper = countryCode.toUpperCase();
+    const countryName = regionNames.of(upper);
+    const isResolved = countryName && countryName !== upper && countryName !== "Unknown Region";
+    return isResolved ? `${countryName} address required` : BILLING_COUNTRY_MISMATCH_FALLBACK;
+  } catch {
+    return BILLING_COUNTRY_MISMATCH_FALLBACK;
+  }
+};
 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
+function redirectToFallbackCheckout(config) {
+  writeCheckoutRedirect(config.returnUrl);
+  trackFallbackCheckout(config.skuId);
+  window.location.href = redirectToCheckoutFallback({
+    skuId: config.skuId,
+    inlineError: MSG_PAYMENT_GENERIC_ERROR,
+    country: config.countryCode
+  });
+}
+async function handleMerchantValidation(event, session, config) {
+  try {
+    const validationHost = new URL(event.validationURL).host;
+    if (!validationHost.endsWith("apple.com")) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    const recaptchaToken = await getRecaptchaToken("verifyMerchant");
+    const response = await validateAppleMerchant({
+      validationURL: event.validationURL,
+      recaptchaToken
+    });
+    if (!response?.merchantSession) {
+      session.abort();
+      redirectToFallbackCheckout(config);
+      return;
+    }
+    session.completeMerchantValidation(response.merchantSession);
+  } catch {
+    session.abort();
+    redirectToFallbackCheckout(config);
+  }
+}
 function startApplePaySession(config) {
   const paymentRequest = {
     countryCode: config.countryCode,
@@ -758,55 +1447,26 @@ function startApplePaySession(config) {
     // Only request email from Apple Pay sheet if user is NOT logged in
     ...!config.userLoggedIn && { requiredShippingContactFields: ["email"] }
   };
-  const session = new ApplePaySession(3, paymentRequest);
-  session.onvalidatemerchant = async (event) => {
-    try {
-      const validationHost = new URL(event.validationURL).host;
-      if (!validationHost.endsWith("apple.com")) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      const recaptchaToken = await getRecaptchaToken("verifyMerchant");
-      const response = await validateAppleMerchant({
-        validationURL: event.validationURL,
-        recaptchaToken
-      });
-      if (!response?.merchantSession) {
-        trackFallbackCheckout(config.skuId);
-        session.abort();
-        window.location.href = redirectToCheckoutFallback({
-          skuId: config.skuId,
-          returnUrl: config.returnUrl,
-          inlineError: MSG_PAYMENT_GENERIC_ERROR
-        });
-        return;
-      }
-      session.completeMerchantValidation(response.merchantSession);
-    } catch {
-      trackFallbackCheckout(config.skuId);
-      session.abort();
-      window.location.href = redirectToCheckoutFallback({
-        skuId: config.skuId,
-        returnUrl: config.returnUrl,
-        inlineError: MSG_PAYMENT_GENERIC_ERROR
+  try {
+    const session = new ApplePaySession(3, paymentRequest);
+    session.onvalidatemerchant = async (event) => {
+      await handleMerchantValidation(event, session, config);
+    };
+    session.onpaymentauthorized = (event) => {
+      trackWalletPaymentAuthorised(config.skuId);
+      config.onPaymentAuthorized(event, session).catch(() => {
+        session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
+        redirectToFallbackCheckout(config);
       });
-    }
-  };
-  session.onpaymentauthorized = (event) => {
-    trackWalletPaymentAuthorised(config.skuId);
-    config.onPaymentAuthorized(event, session);
-  };
-  session.oncancel = () => {
-    config.onCancel?.();
-  };
-  trackWalletPaymentSheetOpen(config.skuId);
-  session.begin();
+    };
+    session.oncancel = () => {
+      config.onCancel?.();
+    };
+    trackWalletPaymentSheetOpen(config.skuId);
+    session.begin();
+  } catch {
+    redirectToFallbackCheckout(config);
+  }
 }
 
 // src/clients/payment-checkout/contact-validation.ts
@@ -926,8 +1586,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,
@@ -951,37 +1609,42 @@ function validateContacts(event, sessionData, supportedBillingCountries) {
   }
   return void 0;
 }
-function redirectFallback(skuId, returnUrl, options) {
+function redirectFallback(skuId, returnUrl, country, options) {
+  writeCheckoutRedirect(returnUrl);
   trackFallbackCheckout(skuId);
   window.location.href = redirectToCheckoutFallback({
     skuId,
-    returnUrl,
+    country,
     ...options
   });
 }
 var ERROR_HANDLERS = {
-  EMAIL_COLLISION: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
-    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, 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
   }),
-  PAYMENT_DECLINED: ({ skuId, returnUrl }) => (
-    // Matches sma-checkout catch-all: always redirect with generic inlineError.
-    redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
-  ),
-  ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
-  REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
-  VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
+  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];
   if (handler) {
     handler(ctx);
   } else {
-    redirectFallback(ctx.skuId, ctx.returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+    redirectFallback(ctx.skuId, ctx.returnUrl, ctx.country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
   }
 }
 async function handlePaymentAuthorized(event, session, sessionData, config) {
-  const { skuId, returnUrl, queryString } = config;
+  const { skuId, returnUrl, country } = config;
   let validatedEmail;
   try {
     validatedEmail = validateContacts(
@@ -989,7 +1652,6 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       sessionData,
       config.supportedBillingCountries
     );
-    console.log("[web-apple-pay] performPurchase currency", { skuId, currency: config.currency });
     const result = await performPurchase({
       applePayToken: event.payment.token,
       skuId: config.skuId,
@@ -998,32 +1660,45 @@ async function handlePaymentAuthorized(event, session, sessionData, config) {
       ...event.payment.shippingContact && {
         shippingContact: event.payment.shippingContact
       },
-      recaptchaTokens: config.recaptchaTokens
+      recaptchaToken: config.recaptchaToken
     });
     trackWalletPaymentSuccess(skuId, result.basketId);
     session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
+    const successEmail = sessionData.loggedIn ? sessionData.emailAddress : validatedEmail;
     const userStatus = sessionData.loggedIn ? "lex" : "nex";
+    writeCheckoutRedirect(returnUrl);
     window.location.href = redirectToCheckoutComplete({
       basketId: result.basketId,
       status: userStatus,
       skuId: decodeSku(skuId),
-      returnUrl,
-      queryString
+      email: successEmail,
+      country
     });
   } catch (err) {
     if (err instanceof ContactValidationError) {
-      failApplePaySession(session, err.errors);
+      const isBillingCountryMismatch = err.errors.some(
+        (e) => e.message === MSG_UNSUPPORTED_BILLING_COUNTRY
+      );
+      if (isBillingCountryMismatch) {
+        const countryCode = event.payment.billingContact?.countryCode;
+        const userMessage = buildCountryMismatchMessage(countryCode);
+        failApplePaySession(session, [
+          new ApplePayError("billingContactInvalid", "countryCode", userMessage)
+        ]);
+        redirectFallback(skuId, returnUrl, country, { inlineError: MSG_BILLING_COUNTRY_MISMATCH_REDIRECT });
+      } else {
+        failApplePaySession(session, err.errors);
+      }
       return;
     }
-    console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
     const walletError = parseWalletApiError(err);
     trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
     failApplePaySession(session);
     if (!walletError) {
-      redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
+      redirectFallback(skuId, returnUrl, country, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
       return;
     }
-    handleStructuredError({ skuId, returnUrl, validatedEmail, walletError });
+    handleStructuredError({ skuId, returnUrl, country, validatedEmail, walletError });
   }
 }
 
@@ -1288,12 +1963,24 @@ var getSupportedBillingCountries = (offerCountry, offerVariant) => {
   return [...zoneCountries];
 };
 
+// src/constants.ts
+var ApplePayEntryPoint = /* @__PURE__ */ ((ApplePayEntryPoint3) => {
+  ApplePayEntryPoint3["PAYWALL"] = "article_paywall";
+  ApplePayEntryPoint3["REGWALL"] = "article_regwall";
+  ApplePayEntryPoint3["DUAL_OFFER_BANNER"] = "dual_offer_banner";
+  return ApplePayEntryPoint3;
+})(ApplePayEntryPoint || {});
+var APPLE_PAY_EXPRESS_EXPERIMENT_KEY = "apple-pay-express-feature-flag-placeholder";
+var APPLE_PAY_EXPRESS_VARIANTS = {
+  CONTROL: "control",
+  TREATMENT: "treatment"
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var TOTAL_LABEL = "The Economist";
 var DEFAULT_CURRENCY = "USD";
 var DEFAULT_TOTAL = "0.00";
-var ERROR_INITIATE = "Failed to initiate Apple Pay session:";
 var SEL_CONTAINER = ".apple-pay-container";
 var SEL_BUTTON = ".apple-pay-btn";
 var APPLE_PAY_EXCLUDED_VARIANTS = [
@@ -1306,19 +1993,48 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     define(_ApplePayButton.tag, _ApplePayButton);
   }
   /**
-   * Creates and configures an ApplePayButton if the feature flag is present.
+   * Creates and configures an ApplePayButton when the Amplitude experiment is enabled.
+   *
+   * Reads the experiment variant from `window.experimentIntegration.getVariant` using
+   * {@link APPLE_PAY_EXPRESS_EXPERIMENT_KEY}. The host page is responsible
+   * for setting up `window.experimentIntegration` before calling this method.
+   *
+   * - `treatment` → button created and returned
+   * - `control` / missing / anything else → returns null (button suppressed)
+   *
+   * **Transition period:** the legacy `FEATURE_APPLE_PAY_EXPRESS_CHECKOUT` URL param
+   * gate is also evaluated as a fallback until all host apps have integrated
+   * `window.experimentIntegration`. Once all consumers are migrated, the URL param
+   * fallback will be removed.
+   *
+   * @param offer - The offer to display in the Apple Pay flow.
+   * @param country - The user's country code.
+   * @param entryPoint - Where the button is being rendered (e.g. paywall, banner).
    */
   static createIfEnabled(offer, country, entryPoint) {
-    if (!offer) return null;
-    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant))
+    if (!offer) {
       return null;
-    if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT))
+    }
+    if (APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant)) {
+      return null;
+    }
+    const experimentValue = window.experimentIntegration?.getVariant?.(
+      APPLE_PAY_EXPRESS_EXPERIMENT_KEY
+    );
+    const isTreatment = experimentValue === APPLE_PAY_EXPRESS_VARIANTS.TREATMENT;
+    const hasUrlParamFlag = new URLSearchParams(window.location.search).has(
+      FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
+    );
+    if (!isTreatment && !hasUrlParamFlag) {
       return null;
+    }
     _ApplePayButton.define();
     const button = document.createElement(_ApplePayButton.tag);
     button.offer = offer;
     button.country = country;
-    button.entryPoint = entryPoint;
+    if (entryPoint) {
+      button.entryPoint = entryPoint;
+    }
     return button;
   }
   /**
@@ -1409,15 +2125,17 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   // ─── Render pipeline ────────────────────────────────────────────────────────
   async #run() {
     try {
+      this.#renderTemplate();
       if (await this.#checkAvailability()) return;
-      if (await this.#checkSession()) return;
       if (this.#checkOffer()) return;
+      if (await this.#checkSession()) return;
       this.#captureReturnUrl();
       this.#computeBillingCountries();
       if (await this.#fetchAndCacheOptions()) return;
-      this.#renderTemplate();
+      this.#finishLoading();
     } catch {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
     } finally {
       this.#rendering = false;
     }
@@ -1427,6 +2145,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const available = await isApplePayAvailable();
     if (!available) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1439,6 +2158,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#sessionData = await this.#fetchSession();
     if (this.#sessionData?.loggedIn && (this.#sessionData.userType === "active-subscription" || this.#sessionData.userType === "b2b-user")) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1447,6 +2167,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #checkOffer() {
     if (!this.#offer) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1472,8 +2193,9 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
    */
   async #fetchAndCacheOptions() {
     this.#paymentOptions = await this.#fetchPaymentOptions();
-    if (!this.#paymentOptions?.apple_pay) {
+    if (!this.#paymentOptions?.options?.apple_pay) {
       this.style.display = "none";
+      this.querySelector(SEL_CONTAINER)?.remove();
       return true;
     }
     return false;
@@ -1485,19 +2207,26 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     const template = document.createElement("template");
     template.innerHTML = apple_pay_button_template_default;
     this.appendChild(template.content.cloneNode(true));
-    this.#updateDisabledState();
-    trackExpressWalletImpression(this.#offer.sku_id, {
-      entryPoint: this.#entryPoint,
-      country: this.#country
-    });
     const button = this.querySelector(SEL_BUTTON);
+    button.classList.add("wap-loading");
+    button.setAttribute("disabled", "");
+    button.setAttribute("aria-disabled", "true");
+    button.setAttribute("aria-busy", "true");
     button.addEventListener("click", () => {
+      if (button.classList.contains("wap-loading")) return;
       this.#openModal();
     });
-    this.addEventListener("apple-pay-confirmed", (event) => {
-      const { skuId, country } = event.detail;
-      this.#initiateApplePay(skuId, country);
-    });
+  }
+  #finishLoading() {
+    const button = this.querySelector(SEL_BUTTON);
+    if (button) {
+      button.classList.remove("wap-loading");
+      this.#updateDisabledState();
+      trackExpressWalletImpression(this.#offer.sku_id, {
+        entryPoint: this.#entryPoint,
+        country: this.#country
+      });
+    }
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
   #updateDisabledState() {
@@ -1506,13 +2235,19 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#offer) {
       button.removeAttribute("disabled");
       button.removeAttribute("aria-disabled");
+      button.removeAttribute("aria-busy");
       return;
     }
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
   #openModal() {
-    if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
+    if (!this.#offer) {
+      return;
+    }
+    if (document.querySelector(ApplePayModal.tag)) {
+      return;
+    }
     trackExpressWalletClick(this.#offer.sku_id);
     ApplePayModal.define();
     const modal = document.createElement(ApplePayModal.tag);
@@ -1521,6 +2256,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
+    modal.onConfirm = (recaptchaTokenPromise) => {
+      this.#initiateApplePay(skuId, country, recaptchaTokenPromise);
+    };
     modal.open();
   }
   async #fetchSession() {
@@ -1542,45 +2282,53 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
       return null;
     }
   }
-  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokens) {
+  #buildSessionParams(skuId, country, sessionData, paymentOptions, recaptchaTokenPromise) {
     const offer = this.#offer;
     const totalAmount = offer.price?.purchase ? `${offer.price.purchase}` : DEFAULT_TOTAL;
     return {
       countryCode: country,
       currencyCode: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-      supportedNetworks: paymentOptions.apple_pay.settings.supported_networks,
+      supportedNetworks: paymentOptions.options.apple_pay.settings.supported_networks,
       totalAmount,
       totalLabel: TOTAL_LABEL,
       skuId,
       returnUrl: this.#returnUrl,
       userLoggedIn: sessionData.loggedIn,
-      onPaymentAuthorized: (event, session) => handlePaymentAuthorized(event, session, sessionData, {
-        skuId,
-        country,
-        currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
-        returnUrl: this.#returnUrl,
-        queryString: buildQueryString(),
-        supportedBillingCountries: this.#supportedBillingCountries,
-        recaptchaTokens
-      })
+      onPaymentAuthorized: async (event, session) => {
+        const recaptchaToken = await recaptchaTokenPromise;
+        return handlePaymentAuthorized(event, session, sessionData, {
+          skuId,
+          country,
+          currency: offer.price?.currency_code ?? DEFAULT_CURRENCY,
+          returnUrl: this.#returnUrl,
+          supportedBillingCountries: this.#supportedBillingCountries,
+          recaptchaToken
+        });
+      }
     };
   }
-  async #initiateApplePay(skuId, country) {
+  #initiateApplePay(skuId, country, recaptchaTokenPromise) {
     try {
       const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
       const paymentOptions = this.#paymentOptions;
-      const recaptchaTokens = await getPurchaseRecaptchaTokens();
+      if (!paymentOptions) {
+        return;
+      }
       startApplePaySession(
         this.#buildSessionParams(
           skuId,
           country,
           sessionData,
           paymentOptions,
-          recaptchaTokens
+          recaptchaTokenPromise
         )
       );
-    } catch (error) {
-      console.error(ERROR_INITIATE, error);
+    } catch {
+      redirectToFallbackCheckout({
+        returnUrl: this.#returnUrl,
+        skuId,
+        countryCode: country
+      });
     }
   }
 };
@@ -1593,6 +2341,7 @@ function defineApplePayElements() {
 export {
   APPLE_PAY_EXCLUDED_VARIANTS,
   ApplePayButton,
+  ApplePayEntryPoint,
   ApplePayModal,
   configureApplePay,
   defineApplePayElements,