@economist/web-apple-pay 1.5.0 → 1.6.0

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

@@ -76,322 +76,7 @@ function ensureApplePayLogoSymbol() {
 }
 
 // src/templates/apple-pay-modal.template.html
-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);
-    box-sizing: border-box;
-  }
-
-  .apm {
-    position: relative;
-    background: #fff;
-    border-radius: 8px 8px 0 0;
-    border: 1px solid #d9d9d9;
-    padding: 24px;
-    width: 400px;
-    max-width: 400px;
-    box-sizing: border-box;
-    font-family: var(--wall-type-system-sans);
-    box-shadow: 0 4px 16px 0 rgba(13, 13, 13, 0.15);
-  }
-
-  .apm__close {
-    position: absolute;
-    top: 24px;
-    right: 21px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .apm__close:focus {
-    outline: solid 2px var(--focus-border-color, #121212);
-    border-radius: 0.25rem;
-  }
-
-  .apm__offer-name {
-    font-family: var(--wall-type-system-sans);
-    font-size: 1.4375rem;
-    font-weight: 500;
-    color: #0d0d0d;
-    line-height: 28px;
-    font-style: normal;
-    margin: 0 1.5rem 0.5rem 0;
-  }
-
-  .apm__due-today {
-    color: #1a1a1a;
-    font-family: var(--wall-type-system-sans);
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    margin: 0 0 1rem 0;
-  }
-
-  .apm__rule {
-    border: none;
-    border-top: 1px solid #d9d9d9;
-    margin: 0 0 1rem 0;
-  }
-
-  .apm__terms {
-    color: #1a1a1a;
-    font-family: var(--wall-type-system-sans);
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.333;
-    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__checkbox-label {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    font-family: var(--wall-type-system-sans);
-    font-size: 0.9375rem;
-    color: #0d0d0d;
-    line-height: 1.4;
-    cursor: pointer;
-    margin: 0 0 8px 0;
-  }
-
-  .apm__checkbox-wrapper {
-    position: relative;
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    margin-top: 1px;
-  }
-
-  .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: 20px;
-    height: 20px;
-    pointer-events: none;
-  }
-
-  .apm__checkbox-custom svg {
-    display: none;
-    width: 20px;
-    height: 20px;
-  }
-
-  .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 2px #c91d42;
-    outline-offset: 2px;
-    border-radius: 4px;
-  }
-
-  .apm__checkbox-label a {
-    color: #1a1a1a;
-    font-weight: 700;
-    text-decoration: underline;
-  }
-
-  .apm__error {
-    display: none;
-    align-items: center;
-    gap: 12px;
-    color: #0d0d0d;
-    font-family: var(--wall-type-system-sans);
-    font-size: 17px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    margin-bottom: 16px;
-  }
-
-  .apm__error--visible {
-    display: flex;
-  }
-
-  .apm__cta {
-    display: flex;
-    width: 100%;
-    height: 44px;
-    padding: 6px 16px;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    border-radius: 4px;
-    background: #000;
-    border: none;
-    cursor: pointer;
-    color: #fff;
-    text-align: center;
-    font-family: 'SF Pro', var(--wall-type-system-sans, system-ui, sans-serif);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  .apm__cta svg {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  @media (min-width: 360px) and (max-width: 600px) {
-    .apm {
-      width: 390px;
-      max-width: 390px;
-    }
-  }
-
-  @media (min-width: 601px) {
-    .apm {
-      border-radius: 8px;
-    }
-  }
-
-  @media (max-width: 359px) {
-    .apm {
-      width: 320px;
-      max-width: 320px;
-    }
-  }
-
-  @media (max-width: 419px) {
-    .apm__cta {
-      font-size: 18px;
-    }
-  }
-</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 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" />
-        </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>
-    <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 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">
-            <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 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 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">
-      Continue with
-      <svg width="51" height="22" aria-label="Apple Pay" role="img">
-        <use href="#apple-pay-logo" />
-      </svg>
-    </button>
-  </div>
-</div>`;
+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';
 
 // src/apple-pay-modal.ts
 function getRenewalDateText(unit, duration) {
@@ -457,6 +142,12 @@ function getCheckboxTermsHtml(isNYT, isLoggedIn, autoRenewal) {
   }
   return `I accept the ${TERMS_LINK}${autoRenewalClause} and acknowledge the ${PRIVACY_LINK}, and understand that by continuing, an account will be created for me if I don\u2019t already have one.`;
 }
+function getPassiveTermsHtml(isNYT, isLoggedIn, autoRenewal) {
+  const accountClause = isLoggedIn ? " " : "\u2019ll get an account and ";
+  const autoRenewalClause = autoRenewal ? "above auto-renewal terms, " : "";
+  const nytPrefix = isNYT ? " your subscription to The Economist," : "";
+  return `By purchasing${nytPrefix} you${accountClause}agree to the ${autoRenewalClause}${TERMS_LINK} and acknowledge the ${PRIVACY_LINK}.`;
+}
 function renewalPeriodText(unit, duration) {
   switch (unit) {
     case "week":
@@ -679,10 +370,21 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
     const errorElement = this.querySelector(
       "#apple-pay-modal-error"
     );
+    const passiveTermsElement = this.querySelector(
+      "#apple-pay-modal-passive-terms"
+    );
     if (!isUS) {
       checkboxLabel?.remove();
       errorElement?.remove();
+      if (passiveTermsElement) {
+        passiveTermsElement.innerHTML = getPassiveTermsHtml(
+          isOfferNYT,
+          isLoggedIn,
+          isAutoRenewal
+        );
+      }
     } else {
+      passiveTermsElement?.remove();
       checkbox?.addEventListener("change", () => {
         if (checkbox.checked) {
           errorElement?.classList.remove("apm__error--visible");