@economist/web-apple-pay 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +140 -0
  2. package/dist/index.js +174 -63
  3. package/dist/src/apple-pay-button.d.ts +1 -2
  4. package/dist/src/apple-pay-button.js +168 -63
  5. package/dist/src/apple-pay-modal.js +81 -37
  6. package/dist/src/clients/payment-checkout/config.d.ts +7 -0
  7. package/dist/src/clients/payment-checkout/config.js +16 -0
  8. package/dist/src/clients/payment-checkout/detects.d.ts +3 -0
  9. package/dist/src/clients/payment-checkout/detects.js +44 -0
  10. package/dist/src/index.d.ts +2 -0
  11. package/dist/src/index.js +174 -63
  12. package/dist/src/types/offer.types.d.ts +10 -0
  13. package/dist/src/utils/pricing.js +2 -6
  14. package/package.json +2 -4
package/dist/src/apple-pay-button.js CHANGED
@@ -36,14 +36,10 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
36
36
  const points = numberOfDecimalPoints(price);
37
37
  const calculatedPrice = () => {
38
38
  if (roundUp) {
39
- return (Math.ceil(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(
40
- PRICE_CONSTANTS.DECIMAL_PLACES
41
- );
39
+ return (Math.ceil(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
42
40
  }
43
41
  if (shouldFixDecimalPlaces) {
44
- return (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(
45
- PRICE_CONSTANTS.DECIMAL_PLACES
46
- );
42
+ return (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
47
43
  }
48
44
  return price;
49
45
  };
@@ -222,23 +218,23 @@ var apple_pay_modal_template_default = `<style>
222
218
  height: 20px;
223
219
  }
224
220
 
225
- .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
221
+ .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
226
222
  display: block;
227
223
  }
228
224
 
229
- .apm__checkbox-input:checked ~ .apm__checkbox-custom .svg-checked {
225
+ .apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {
230
226
  display: block;
231
227
  }
232
228
 
233
- .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
229
+ .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
234
230
  display: none;
235
231
  }
236
232
 
237
- .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-error {
233
+ .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {
238
234
  display: block;
239
235
  }
240
236
 
241
- .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {
237
+ .apm__checkbox-input:focus-visible~.apm__checkbox-custom {
242
238
  outline: solid 2px #c91d42;
243
239
  outline-offset: 2px;
244
240
  border-radius: 4px;
@@ -321,13 +317,16 @@ var apple_pay_modal_template_default = `<style>
321
317
  </style>
322
318
 
323
319
  <div class="apm-overlay" id="apple-pay-modal-overlay">
324
- <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal" tabindex="-1">
320
+ <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"
321
+ tabindex="-1">
325
322
  <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
326
323
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
327
324
  <g clip-path="url(#clip0_15712_93054)">
328
325
  <rect width="24" height="24" fill="white" fill-opacity="0.01" />
329
326
  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />
330
- <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" />
327
+ <path fill-rule="evenodd" clip-rule="evenodd"
328
+ 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"
329
+ fill="#333333" />
331
330
  </g>
332
331
  <defs>
333
332
  <clipPath id="clip0_15712_93054">
@@ -344,22 +343,34 @@ var apple_pay_modal_template_default = `<style>
344
343
  <div class="apm__checkbox-wrapper">
345
344
  <input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />
346
345
  <span class="apm__checkbox-custom">
347
- <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
348
- <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" />
346
+ <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"
347
+ xmlns="http://www.w3.org/2000/svg">
348
+ <path
349
+ 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"
350
+ fill="white" stroke="#595959" />
349
351
  </svg>
350
- <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
352
+ <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"
353
+ xmlns="http://www.w3.org/2000/svg">
351
354
  <g clip-path="url(#clip0_20014_9555)">
352
- <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" />
353
- <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z" fill="white" />
355
+ <path
356
+ 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"
357
+ fill="#333333" />
358
+ <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"
359
+ fill="white" />
354
360
  </g>
355
361
  <defs>
356
362
  <clipPath id="clip0_20014_9555">
357
- <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" />
363
+ <path
364
+ 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"
365
+ fill="white" />
358
366
  </clipPath>
359
367
  </defs>
360
368
  </svg>
361
- <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
362
- <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" />
369
+ <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"
370
+ xmlns="http://www.w3.org/2000/svg">
371
+ <path
372
+ 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"
373
+ fill="white" stroke="#C91D42" stroke-width="2" />
363
374
  </svg>
364
375
  </span>
365
376
  </div>
@@ -367,7 +378,9 @@ var apple_pay_modal_template_default = `<style>
367
378
  </label>
368
379
  <div class="apm__error" id="apple-pay-modal-error" role="alert">
369
380
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
370
- <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" />
381
+ <path fill-rule="evenodd" clip-rule="evenodd"
382
+ 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"
383
+ fill="#C91D42" />
371
384
  </svg>
372
385
  Please accept the terms to continue
373
386
  </div>
@@ -378,8 +391,7 @@ var apple_pay_modal_template_default = `<style>
378
391
  </svg>
379
392
  </button>
380
393
  </div>
381
- </div>
382
- `;
394
+ </div>`;
383
395
 
384
396
  // src/apple-pay-modal.ts
385
397
  function getRenewalDateText(unit, duration) {
@@ -404,7 +416,11 @@ function getRenewalDateText(unit, duration) {
404
416
  default:
405
417
  break;
406
418
  }
407
- return date.toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric" });
419
+ return date.toLocaleString("en-US", {
420
+ year: "numeric",
421
+ month: "long",
422
+ day: "numeric"
423
+ });
408
424
  }
409
425
  var MIN_TERM_DURATION_PATTERN = /^(\d+)\s+(\w+)s?$/;
410
426
  function getMinTermDurationUnits(minTermContractLength) {
@@ -614,32 +630,55 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
614
630
  this.remove();
615
631
  return;
616
632
  }
617
- const offerNameElement = this.querySelector("#apple-pay-modal-offer-name");
618
- const dueTodayElement = this.querySelector("#apple-pay-modal-due-today");
619
- const termsElement = this.querySelector("#apple-pay-modal-terms");
633
+ const offerNameElement = this.querySelector(
634
+ "#apple-pay-modal-offer-name"
635
+ );
636
+ const dueTodayElement = this.querySelector(
637
+ "#apple-pay-modal-due-today"
638
+ );
639
+ const termsElement = this.querySelector(
640
+ "#apple-pay-modal-terms"
641
+ );
620
642
  if (offerNameElement) {
621
643
  offerNameElement.textContent = getApplePayProductName(offer);
622
644
  }
623
645
  if (dueTodayElement) {
624
646
  const taxSuffix = offer.price.purchase === 0 || offer.price.tax?.inclusive ? "" : "*";
625
- const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
647
+ const duePrice = formatPrice(
648
+ offer.price.purchase,
649
+ offer.price.currency_code
650
+ );
626
651
  dueTodayElement.innerHTML = duePrice ? `Due today: <strong>${duePrice}${taxSuffix}</strong>` : "";
627
652
  }
628
653
  if (termsElement) {
629
- termsElement.innerHTML = renderTermsHtml(generateApplePayModalTerms(offer, country));
654
+ termsElement.innerHTML = renderTermsHtml(
655
+ generateApplePayModalTerms(offer, country)
656
+ );
630
657
  }
631
658
  const isUS = country === "US";
632
659
  const isLoggedIn = this.dataset.loggedIn === "true";
633
660
  const isOfferNYT = offer.product?.offer_type === "bogof_nyt";
634
661
  const isAutoRenewal = offer.subscription_options?.auto_renewal ?? true;
635
- const checkboxTextElement = this.querySelector("#apple-pay-modal-checkbox-text");
662
+ const checkboxTextElement = this.querySelector(
663
+ "#apple-pay-modal-checkbox-text"
664
+ );
636
665
  if (checkboxTextElement) {
637
- checkboxTextElement.innerHTML = getCheckboxTermsHtml(isOfferNYT, isLoggedIn, isAutoRenewal);
666
+ checkboxTextElement.innerHTML = getCheckboxTermsHtml(
667
+ isOfferNYT,
668
+ isLoggedIn,
669
+ isAutoRenewal
670
+ );
638
671
  }
639
- const checkboxLabel = this.querySelector("#apple-pay-modal-checkbox-label");
640
- const checkbox = this.querySelector("#apple-pay-modal-checkbox");
672
+ const checkboxLabel = this.querySelector(
673
+ "#apple-pay-modal-checkbox-label"
674
+ );
675
+ const checkbox = this.querySelector(
676
+ "#apple-pay-modal-checkbox"
677
+ );
641
678
  const cta = this.querySelector("#apple-pay-modal-cta");
642
- const errorElement = this.querySelector("#apple-pay-modal-error");
679
+ const errorElement = this.querySelector(
680
+ "#apple-pay-modal-error"
681
+ );
643
682
  if (!isUS) {
644
683
  checkboxLabel?.remove();
645
684
  errorElement?.remove();
@@ -666,7 +705,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
666
705
  );
667
706
  this.close();
668
707
  });
669
- this.querySelector("#apple-pay-modal-close")?.addEventListener("click", () => this.close());
708
+ this.querySelector("#apple-pay-modal-close")?.addEventListener(
709
+ "click",
710
+ () => this.close()
711
+ );
670
712
  }
671
713
  open() {
672
714
  this.#triggerElement = document.activeElement;
@@ -684,7 +726,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
684
726
  }
685
727
  close() {
686
728
  if (this.#keyHandler) {
687
- document.removeEventListener("keydown", this.#keyHandler, { capture: true });
729
+ document.removeEventListener("keydown", this.#keyHandler, {
730
+ capture: true
731
+ });
688
732
  this.#keyHandler = null;
689
733
  }
690
734
  this.remove();
@@ -693,10 +737,51 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
693
737
  };
694
738
 
695
739
  // src/templates/apple-pay-button.template.html
696
- var apple_pay_button_template_default = '<style>\n /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n teg-apple-pay-button {\n display: block;\n margin: var(--apple-pay-margin, 0);\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-container {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n width: 100%;\n min-width: 0;\n height: 100%;\n min-height: var(--apple-pay-height, 2.75rem);\n background-color: #000;\n color: #fff;\n border: none;\n border-radius: var(--apple-pay-border-radius, 1.375rem);\n cursor: pointer;\n font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n font-size: 17px;\n font-weight: 500;\n }\n\n teg-apple-pay-button .apple-pay-btn svg {\n flex-shrink: 0;\n display: block;\n }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n <button class="apple-pay-btn" type="button" aria-label="Pay with Apple Pay" data-analytics="paywall:apple-pay-checkout">\n <svg width="51" height="22" aria-label="Apple Pay" role="img">\n <use href="#apple-pay-logo" />\n </svg>\n </button>\n</div>\n';
740
+ var apple_pay_button_template_default = '<style>\n /* Use CSS variables for layout so parent walls can easily override placement and sizing */\n teg-apple-pay-button {\n display: block;\n margin: var(--apple-pay-margin, 0);\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-container {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n height: 100%;\n }\n\n teg-apple-pay-button .apple-pay-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n width: 100%;\n min-width: 0;\n height: 100%;\n min-height: var(--apple-pay-height, 2.75rem);\n background-color: #000;\n color: #fff;\n border: none;\n border-radius: var(--apple-pay-border-radius, 1.375rem);\n cursor: pointer;\n font-family: var(--wall-type-system-sans, system-ui, sans-serif);\n font-size: 17px;\n font-weight: 500;\n }\n\n teg-apple-pay-button .apple-pay-btn svg {\n flex-shrink: 0;\n display: block;\n }\n</style>\n\n<div class="apple-pay-container" aria-label="Express checkout with Apple Pay">\n <button\n class="apple-pay-btn"\n type="button"\n aria-label="Pay with Apple Pay"\n data-analytics="paywall:apple-pay-checkout"\n >\n <svg width="51" height="22" aria-label="Apple Pay" role="img">\n <use href="#apple-pay-logo" />\n </svg>\n </button>\n</div>\n';
741
+
742
+ // src/clients/payment-checkout/config.ts
743
+ var runtimeConfig = null;
744
+ var getApplePayConfig = () => runtimeConfig;
745
+
746
+ // src/clients/payment-checkout/detects.ts
747
+ var isAppleDeviceOrSafari = () => {
748
+ const isIOSOrMacTouchDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent);
749
+ const isSafariBrowser = navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1;
750
+ return isIOSOrMacTouchDevice || isSafariBrowser;
751
+ };
752
+ var bypassApplePayChecks = () => new URLSearchParams(window.location.search).get("BYPASS_APPLE_PAY_CHECKS") !== null && getApplePayConfig()?.debugBypassEnabled === true;
753
+ var isApplePayAvailable = async () => {
754
+ if (bypassApplePayChecks()) {
755
+ return true;
756
+ }
757
+ if (!isAppleDeviceOrSafari()) {
758
+ return false;
759
+ }
760
+ const applePaySession = window.ApplePaySession;
761
+ if (!applePaySession) {
762
+ return false;
763
+ }
764
+ try {
765
+ if (typeof applePaySession.canMakePayments !== "function") {
766
+ return false;
767
+ }
768
+ if (!applePaySession.canMakePayments()) {
769
+ return false;
770
+ }
771
+ const merchantId = getApplePayConfig()?.merchantId;
772
+ if (!merchantId) {
773
+ return false;
774
+ }
775
+ return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
776
+ } catch (error) {
777
+ console.error("Error checking Apple Pay active card status:", error);
778
+ return false;
779
+ }
780
+ };
697
781
 
698
782
  // src/apple-pay-button.ts
699
783
  var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
784
+ var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
700
785
  var ApplePayButton = class _ApplePayButton extends HTMLElement {
701
786
  static tag = "teg-apple-pay-button";
702
787
  static define() {
@@ -709,7 +794,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
709
794
  if (!offer) {
710
795
  return null;
711
796
  }
712
- if (!new URLSearchParams(window.location.search).has(FEATURE_APPLE_PAY_EXPRESS_CHECKOUT)) {
797
+ const isExcludedVariant = APPLE_PAY_EXCLUDED_VARIANTS.includes(offer.product?.variant);
798
+ if (isExcludedVariant) {
799
+ return null;
800
+ }
801
+ if (!new URLSearchParams(window.location.search).has(
802
+ FEATURE_APPLE_PAY_EXPRESS_CHECKOUT
803
+ )) {
713
804
  return null;
714
805
  }
715
806
  _ApplePayButton.define();
@@ -720,12 +811,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
720
811
  }
721
812
  #offer = null;
722
813
  #country = "";
814
+ #rendering = false;
723
815
  get offer() {
724
816
  return this.#offer;
725
817
  }
726
818
  set offer(value) {
727
819
  this.#offer = value;
728
- this.updateDisabledState();
820
+ this.#updateDisabledState();
729
821
  }
730
822
  get country() {
731
823
  return this.#country;
@@ -733,34 +825,47 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
733
825
  set country(value) {
734
826
  this.#country = value;
735
827
  }
736
- connectedCallback() {
737
- if (this.querySelector(".apple-pay-container")) {
828
+ async connectedCallback() {
829
+ if (this.#rendering || this.querySelector(".apple-pay-container")) {
738
830
  return;
739
831
  }
740
- ensureApplePayLogoSymbol();
741
- const template = document.createElement("template");
742
- template.innerHTML = apple_pay_button_template_default;
743
- this.appendChild(template.content.cloneNode(true));
744
- this.updateDisabledState();
745
- const button = this.querySelector(".apple-pay-btn");
746
- button.addEventListener("click", () => {
747
- if (!this.#offer) {
832
+ this.#rendering = true;
833
+ try {
834
+ const available = await isApplePayAvailable();
835
+ if (!available) {
836
+ this.style.display = "none";
748
837
  return;
749
838
  }
750
- if (document.querySelector(ApplePayModal.tag)) {
751
- return;
752
- }
753
- ApplePayModal.define();
754
- const modal = document.createElement(ApplePayModal.tag);
755
- modal.offer = this.#offer;
756
- modal.country = this.#country;
757
- if (this.dataset.loggedIn !== void 0) {
758
- modal.dataset.loggedIn = this.dataset.loggedIn;
759
- }
760
- modal.open();
761
- });
839
+ this.style.removeProperty("display");
840
+ ensureApplePayLogoSymbol();
841
+ const template = document.createElement("template");
842
+ template.innerHTML = apple_pay_button_template_default;
843
+ this.appendChild(template.content.cloneNode(true));
844
+ this.#updateDisabledState();
845
+ const button = this.querySelector(".apple-pay-btn");
846
+ button.addEventListener("click", () => {
847
+ if (!this.#offer) {
848
+ return;
849
+ }
850
+ if (document.querySelector(ApplePayModal.tag)) {
851
+ return;
852
+ }
853
+ ApplePayModal.define();
854
+ const modal = document.createElement(ApplePayModal.tag);
855
+ modal.offer = this.#offer;
856
+ modal.country = this.#country;
857
+ if (this.dataset.loggedIn !== void 0) {
858
+ modal.dataset.loggedIn = this.dataset.loggedIn;
859
+ }
860
+ modal.open();
861
+ });
862
+ } catch {
863
+ this.style.display = "none";
864
+ } finally {
865
+ this.#rendering = false;
866
+ }
762
867
  }
763
- updateDisabledState() {
868
+ #updateDisabledState() {
764
869
  const button = this.querySelector(".apple-pay-btn");
765
870
  if (!button) {
766
871
  return;
package/dist/src/apple-pay-modal.js CHANGED
@@ -36,14 +36,10 @@ function formatPrice(price, currencyCode, shouldFixDecimalPlaces = true, roundUp
36
36
  const points = numberOfDecimalPoints(price);
37
37
  const calculatedPrice = () => {
38
38
  if (roundUp) {
39
- return (Math.ceil(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(
40
- PRICE_CONSTANTS.DECIMAL_PLACES
41
- );
39
+ return (Math.ceil(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
42
40
  }
43
41
  if (shouldFixDecimalPlaces) {
44
- return (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(
45
- PRICE_CONSTANTS.DECIMAL_PLACES
46
- );
42
+ return (Math.round(price * PRICE_CONSTANTS.CENTS_MULTIPLIER) / PRICE_CONSTANTS.CENTS_MULTIPLIER).toFixed(PRICE_CONSTANTS.DECIMAL_PLACES);
47
43
  }
48
44
  return price;
49
45
  };
@@ -222,23 +218,23 @@ var apple_pay_modal_template_default = `<style>
222
218
  height: 20px;
223
219
  }
224
220
 
225
- .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
221
+ .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
226
222
  display: block;
227
223
  }
228
224
 
229
- .apm__checkbox-input:checked ~ .apm__checkbox-custom .svg-checked {
225
+ .apm__checkbox-input:checked~.apm__checkbox-custom .svg-checked {
230
226
  display: block;
231
227
  }
232
228
 
233
- .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-unchecked {
229
+ .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-unchecked {
234
230
  display: none;
235
231
  }
236
232
 
237
- .apm__checkbox-label--error .apm__checkbox-input:not(:checked) ~ .apm__checkbox-custom .svg-error {
233
+ .apm__checkbox-label--error .apm__checkbox-input:not(:checked)~.apm__checkbox-custom .svg-error {
238
234
  display: block;
239
235
  }
240
236
 
241
- .apm__checkbox-input:focus-visible ~ .apm__checkbox-custom {
237
+ .apm__checkbox-input:focus-visible~.apm__checkbox-custom {
242
238
  outline: solid 2px #c91d42;
243
239
  outline-offset: 2px;
244
240
  border-radius: 4px;
@@ -321,13 +317,16 @@ var apple_pay_modal_template_default = `<style>
321
317
  </style>
322
318
 
323
319
  <div class="apm-overlay" id="apple-pay-modal-overlay">
324
- <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal" tabindex="-1">
320
+ <div class="apm" role="dialog" aria-modal="true" aria-labelledby="apple-pay-modal-offer-name" id="apple-pay-modal"
321
+ tabindex="-1">
325
322
  <button class="apm__close" id="apple-pay-modal-close" aria-label="Close">
326
323
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
327
324
  <g clip-path="url(#clip0_15712_93054)">
328
325
  <rect width="24" height="24" fill="white" fill-opacity="0.01" />
329
326
  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white" fill-opacity="0.01" />
330
- <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" />
327
+ <path fill-rule="evenodd" clip-rule="evenodd"
328
+ 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"
329
+ fill="#333333" />
331
330
  </g>
332
331
  <defs>
333
332
  <clipPath id="clip0_15712_93054">
@@ -344,22 +343,34 @@ var apple_pay_modal_template_default = `<style>
344
343
  <div class="apm__checkbox-wrapper">
345
344
  <input class="apm__checkbox-input" type="checkbox" id="apple-pay-modal-checkbox" />
346
345
  <span class="apm__checkbox-custom">
347
- <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
348
- <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" />
346
+ <svg class="svg-unchecked" width="24" height="24" viewBox="0 0 24 24" fill="none"
347
+ xmlns="http://www.w3.org/2000/svg">
348
+ <path
349
+ 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"
350
+ fill="white" stroke="#595959" />
349
351
  </svg>
350
- <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
352
+ <svg class="svg-checked" width="24" height="24" viewBox="0 0 24 24" fill="none"
353
+ xmlns="http://www.w3.org/2000/svg">
351
354
  <g clip-path="url(#clip0_20014_9555)">
352
- <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" />
353
- <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z" fill="white" />
355
+ <path
356
+ 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"
357
+ fill="#333333" />
358
+ <path d="M10.2857 17L6 12.6814L7.20857 11.4635L10.2857 14.5557L16.7914 8L18 9.22649L10.2857 17Z"
359
+ fill="white" />
354
360
  </g>
355
361
  <defs>
356
362
  <clipPath id="clip0_20014_9555">
357
- <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" />
363
+ <path
364
+ 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"
365
+ fill="white" />
358
366
  </clipPath>
359
367
  </defs>
360
368
  </svg>
361
- <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
362
- <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" />
369
+ <svg class="svg-error" width="24" height="24" viewBox="0 0 24 24" fill="none"
370
+ xmlns="http://www.w3.org/2000/svg">
371
+ <path
372
+ 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"
373
+ fill="white" stroke="#C91D42" stroke-width="2" />
363
374
  </svg>
364
375
  </span>
365
376
  </div>
@@ -367,7 +378,9 @@ var apple_pay_modal_template_default = `<style>
367
378
  </label>
368
379
  <div class="apm__error" id="apple-pay-modal-error" role="alert">
369
380
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
370
- <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" />
381
+ <path fill-rule="evenodd" clip-rule="evenodd"
382
+ 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"
383
+ fill="#C91D42" />
371
384
  </svg>
372
385
  Please accept the terms to continue
373
386
  </div>
@@ -378,8 +391,7 @@ var apple_pay_modal_template_default = `<style>
378
391
  </svg>
379
392
  </button>
380
393
  </div>
381
- </div>
382
- `;
394
+ </div>`;
383
395
 
384
396
  // src/apple-pay-modal.ts
385
397
  function getRenewalDateText(unit, duration) {
@@ -404,7 +416,11 @@ function getRenewalDateText(unit, duration) {
404
416
  default:
405
417
  break;
406
418
  }
407
- return date.toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric" });
419
+ return date.toLocaleString("en-US", {
420
+ year: "numeric",
421
+ month: "long",
422
+ day: "numeric"
423
+ });
408
424
  }
409
425
  var MIN_TERM_DURATION_PATTERN = /^(\d+)\s+(\w+)s?$/;
410
426
  function getMinTermDurationUnits(minTermContractLength) {
@@ -614,32 +630,55 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
614
630
  this.remove();
615
631
  return;
616
632
  }
617
- const offerNameElement = this.querySelector("#apple-pay-modal-offer-name");
618
- const dueTodayElement = this.querySelector("#apple-pay-modal-due-today");
619
- const termsElement = this.querySelector("#apple-pay-modal-terms");
633
+ const offerNameElement = this.querySelector(
634
+ "#apple-pay-modal-offer-name"
635
+ );
636
+ const dueTodayElement = this.querySelector(
637
+ "#apple-pay-modal-due-today"
638
+ );
639
+ const termsElement = this.querySelector(
640
+ "#apple-pay-modal-terms"
641
+ );
620
642
  if (offerNameElement) {
621
643
  offerNameElement.textContent = getApplePayProductName(offer);
622
644
  }
623
645
  if (dueTodayElement) {
624
646
  const taxSuffix = offer.price.purchase === 0 || offer.price.tax?.inclusive ? "" : "*";
625
- const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
647
+ const duePrice = formatPrice(
648
+ offer.price.purchase,
649
+ offer.price.currency_code
650
+ );
626
651
  dueTodayElement.innerHTML = duePrice ? `Due today: <strong>${duePrice}${taxSuffix}</strong>` : "";
627
652
  }
628
653
  if (termsElement) {
629
- termsElement.innerHTML = renderTermsHtml(generateApplePayModalTerms(offer, country));
654
+ termsElement.innerHTML = renderTermsHtml(
655
+ generateApplePayModalTerms(offer, country)
656
+ );
630
657
  }
631
658
  const isUS = country === "US";
632
659
  const isLoggedIn = this.dataset.loggedIn === "true";
633
660
  const isOfferNYT = offer.product?.offer_type === "bogof_nyt";
634
661
  const isAutoRenewal = offer.subscription_options?.auto_renewal ?? true;
635
- const checkboxTextElement = this.querySelector("#apple-pay-modal-checkbox-text");
662
+ const checkboxTextElement = this.querySelector(
663
+ "#apple-pay-modal-checkbox-text"
664
+ );
636
665
  if (checkboxTextElement) {
637
- checkboxTextElement.innerHTML = getCheckboxTermsHtml(isOfferNYT, isLoggedIn, isAutoRenewal);
666
+ checkboxTextElement.innerHTML = getCheckboxTermsHtml(
667
+ isOfferNYT,
668
+ isLoggedIn,
669
+ isAutoRenewal
670
+ );
638
671
  }
639
- const checkboxLabel = this.querySelector("#apple-pay-modal-checkbox-label");
640
- const checkbox = this.querySelector("#apple-pay-modal-checkbox");
672
+ const checkboxLabel = this.querySelector(
673
+ "#apple-pay-modal-checkbox-label"
674
+ );
675
+ const checkbox = this.querySelector(
676
+ "#apple-pay-modal-checkbox"
677
+ );
641
678
  const cta = this.querySelector("#apple-pay-modal-cta");
642
- const errorElement = this.querySelector("#apple-pay-modal-error");
679
+ const errorElement = this.querySelector(
680
+ "#apple-pay-modal-error"
681
+ );
643
682
  if (!isUS) {
644
683
  checkboxLabel?.remove();
645
684
  errorElement?.remove();
@@ -666,7 +705,10 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
666
705
  );
667
706
  this.close();
668
707
  });
669
- this.querySelector("#apple-pay-modal-close")?.addEventListener("click", () => this.close());
708
+ this.querySelector("#apple-pay-modal-close")?.addEventListener(
709
+ "click",
710
+ () => this.close()
711
+ );
670
712
  }
671
713
  open() {
672
714
  this.#triggerElement = document.activeElement;
@@ -684,7 +726,9 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
684
726
  }
685
727
  close() {
686
728
  if (this.#keyHandler) {
687
- document.removeEventListener("keydown", this.#keyHandler, { capture: true });
729
+ document.removeEventListener("keydown", this.#keyHandler, {
730
+ capture: true
731
+ });
688
732
  this.#keyHandler = null;
689
733
  }
690
734
  this.remove();
package/dist/src/clients/payment-checkout/config.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export interface ApplePayRuntimeConfig {
2
+ merchantId: string;
3
+ debugBypassEnabled?: boolean;
4
+ }
5
+ export declare const configureApplePay: (config: ApplePayRuntimeConfig) => void;
6
+ export declare const getApplePayConfig: () => ApplePayRuntimeConfig | null;
7
+ export declare const resetApplePayConfig: () => void;
package/dist/src/clients/payment-checkout/config.js ADDED
@@ -0,0 +1,16 @@
1
+ // src/clients/payment-checkout/config.ts
2
+ var runtimeConfig = null;
3
+ var configureApplePay = (config) => {
4
+ runtimeConfig = {
5
+ ...config
6
+ };
7
+ };
8
+ var getApplePayConfig = () => runtimeConfig;
9
+ var resetApplePayConfig = () => {
10
+ runtimeConfig = null;
11
+ };
12
+ export {
13
+ configureApplePay,
14
+ getApplePayConfig,
15
+ resetApplePayConfig
16
+ };
package/dist/src/clients/payment-checkout/detects.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const isAppleDeviceOrSafari: () => boolean;
2
+ export declare const bypassApplePayChecks: () => boolean;
3
+ export declare const isApplePayAvailable: () => Promise<boolean>;