@economist/web-apple-pay 0.1.2-beta.0 → 0.1.3-beta.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 (6) hide show
  1. package/dist/index.js +18 -2
  2. package/dist/src/apple-pay-button.js +18 -2
  3. package/dist/src/apple-pay-button.stories.js +18 -2
  4. package/dist/src/apple-pay-modal.stories.js +18 -2
  5. package/dist/src/index.js +18 -2
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1409,6 +1409,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1409
1409
  #returnUrl = "";
1410
1410
  #supportedBillingCountries = [];
1411
1411
  #entryPoint = "";
1412
+ #recaptchaTokens = null;
1412
1413
  // ─── Public API ─────────────────────────────────────────────────────────────
1413
1414
  get offer() {
1414
1415
  return this.#offer;
@@ -1469,6 +1470,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1469
1470
  * and eliminating the implicit reliance on the DOM as a render-state flag.
1470
1471
  */
1471
1472
  disconnectedCallback() {
1473
+ console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
1472
1474
  this.#rendering = false;
1473
1475
  this.#readyPromise = null;
1474
1476
  this.#sessionData = null;
@@ -1597,8 +1599,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1597
1599
  }
1598
1600
  #openModal() {
1599
1601
  console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
1600
- if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
1602
+ if (!this.#offer) {
1603
+ console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
1604
+ return;
1605
+ }
1606
+ if (document.querySelector(ApplePayModal.tag)) {
1607
+ console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
1608
+ return;
1609
+ }
1601
1610
  trackExpressWalletClick(this.#offer.sku_id);
1611
+ getPurchaseRecaptchaTokens().then((tokens) => {
1612
+ console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
1613
+ this.#recaptchaTokens = tokens;
1614
+ }).catch((err) => {
1615
+ console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
1616
+ });
1602
1617
  ApplePayModal.define();
1603
1618
  const modal = document.createElement(ApplePayModal.tag);
1604
1619
  modal.offer = this.#offer;
@@ -1661,7 +1676,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1661
1676
  try {
1662
1677
  const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
1663
1678
  const paymentOptions = this.#paymentOptions;
1664
- const recaptchaTokens = await getPurchaseRecaptchaTokens();
1679
+ const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
1680
+ console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
1665
1681
  startApplePaySession(
1666
1682
  this.#buildSessionParams(
1667
1683
  skuId,
package/dist/src/apple-pay-button.js CHANGED
@@ -1398,6 +1398,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1398
1398
  #returnUrl = "";
1399
1399
  #supportedBillingCountries = [];
1400
1400
  #entryPoint = "";
1401
+ #recaptchaTokens = null;
1401
1402
  // ─── Public API ─────────────────────────────────────────────────────────────
1402
1403
  get offer() {
1403
1404
  return this.#offer;
@@ -1458,6 +1459,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1458
1459
  * and eliminating the implicit reliance on the DOM as a render-state flag.
1459
1460
  */
1460
1461
  disconnectedCallback() {
1462
+ console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
1461
1463
  this.#rendering = false;
1462
1464
  this.#readyPromise = null;
1463
1465
  this.#sessionData = null;
@@ -1586,8 +1588,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1586
1588
  }
1587
1589
  #openModal() {
1588
1590
  console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
1589
- if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
1591
+ if (!this.#offer) {
1592
+ console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
1593
+ return;
1594
+ }
1595
+ if (document.querySelector(ApplePayModal.tag)) {
1596
+ console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
1597
+ return;
1598
+ }
1590
1599
  trackExpressWalletClick(this.#offer.sku_id);
1600
+ getPurchaseRecaptchaTokens().then((tokens) => {
1601
+ console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
1602
+ this.#recaptchaTokens = tokens;
1603
+ }).catch((err) => {
1604
+ console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
1605
+ });
1591
1606
  ApplePayModal.define();
1592
1607
  const modal = document.createElement(ApplePayModal.tag);
1593
1608
  modal.offer = this.#offer;
@@ -1650,7 +1665,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1650
1665
  try {
1651
1666
  const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
1652
1667
  const paymentOptions = this.#paymentOptions;
1653
- const recaptchaTokens = await getPurchaseRecaptchaTokens();
1668
+ const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
1669
+ console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
1654
1670
  startApplePaySession(
1655
1671
  this.#buildSessionParams(
1656
1672
  skuId,
package/dist/src/apple-pay-button.stories.js CHANGED
@@ -1413,6 +1413,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1413
1413
  #returnUrl = "";
1414
1414
  #supportedBillingCountries = [];
1415
1415
  #entryPoint = "";
1416
+ #recaptchaTokens = null;
1416
1417
  // ─── Public API ─────────────────────────────────────────────────────────────
1417
1418
  get offer() {
1418
1419
  return this.#offer;
@@ -1473,6 +1474,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1473
1474
  * and eliminating the implicit reliance on the DOM as a render-state flag.
1474
1475
  */
1475
1476
  disconnectedCallback() {
1477
+ console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
1476
1478
  this.#rendering = false;
1477
1479
  this.#readyPromise = null;
1478
1480
  this.#sessionData = null;
@@ -1601,8 +1603,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1601
1603
  }
1602
1604
  #openModal() {
1603
1605
  console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
1604
- if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
1606
+ if (!this.#offer) {
1607
+ console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
1608
+ return;
1609
+ }
1610
+ if (document.querySelector(ApplePayModal.tag)) {
1611
+ console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
1612
+ return;
1613
+ }
1605
1614
  trackExpressWalletClick(this.#offer.sku_id);
1615
+ getPurchaseRecaptchaTokens().then((tokens) => {
1616
+ console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
1617
+ this.#recaptchaTokens = tokens;
1618
+ }).catch((err) => {
1619
+ console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
1620
+ });
1606
1621
  ApplePayModal.define();
1607
1622
  const modal = document.createElement(ApplePayModal.tag);
1608
1623
  modal.offer = this.#offer;
@@ -1665,7 +1680,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1665
1680
  try {
1666
1681
  const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
1667
1682
  const paymentOptions = this.#paymentOptions;
1668
- const recaptchaTokens = await getPurchaseRecaptchaTokens();
1683
+ const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
1684
+ console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
1669
1685
  startApplePaySession(
1670
1686
  this.#buildSessionParams(
1671
1687
  skuId,
package/dist/src/apple-pay-modal.stories.js CHANGED
@@ -1398,6 +1398,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1398
1398
  #returnUrl = "";
1399
1399
  #supportedBillingCountries = [];
1400
1400
  #entryPoint = "";
1401
+ #recaptchaTokens = null;
1401
1402
  // ─── Public API ─────────────────────────────────────────────────────────────
1402
1403
  get offer() {
1403
1404
  return this.#offer;
@@ -1458,6 +1459,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1458
1459
  * and eliminating the implicit reliance on the DOM as a render-state flag.
1459
1460
  */
1460
1461
  disconnectedCallback() {
1462
+ console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
1461
1463
  this.#rendering = false;
1462
1464
  this.#readyPromise = null;
1463
1465
  this.#sessionData = null;
@@ -1586,8 +1588,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1586
1588
  }
1587
1589
  #openModal() {
1588
1590
  console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
1589
- if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
1591
+ if (!this.#offer) {
1592
+ console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
1593
+ return;
1594
+ }
1595
+ if (document.querySelector(ApplePayModal.tag)) {
1596
+ console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
1597
+ return;
1598
+ }
1590
1599
  trackExpressWalletClick(this.#offer.sku_id);
1600
+ getPurchaseRecaptchaTokens().then((tokens) => {
1601
+ console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
1602
+ this.#recaptchaTokens = tokens;
1603
+ }).catch((err) => {
1604
+ console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
1605
+ });
1591
1606
  ApplePayModal.define();
1592
1607
  const modal = document.createElement(ApplePayModal.tag);
1593
1608
  modal.offer = this.#offer;
@@ -1650,7 +1665,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1650
1665
  try {
1651
1666
  const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
1652
1667
  const paymentOptions = this.#paymentOptions;
1653
- const recaptchaTokens = await getPurchaseRecaptchaTokens();
1668
+ const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
1669
+ console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
1654
1670
  startApplePaySession(
1655
1671
  this.#buildSessionParams(
1656
1672
  skuId,
package/dist/src/index.js CHANGED
@@ -1409,6 +1409,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1409
1409
  #returnUrl = "";
1410
1410
  #supportedBillingCountries = [];
1411
1411
  #entryPoint = "";
1412
+ #recaptchaTokens = null;
1412
1413
  // ─── Public API ─────────────────────────────────────────────────────────────
1413
1414
  get offer() {
1414
1415
  return this.#offer;
@@ -1469,6 +1470,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1469
1470
  * and eliminating the implicit reliance on the DOM as a render-state flag.
1470
1471
  */
1471
1472
  disconnectedCallback() {
1473
+ console.log("[web-apple-pay] disconnectedCallback: element removed from DOM, resetting state");
1472
1474
  this.#rendering = false;
1473
1475
  this.#readyPromise = null;
1474
1476
  this.#sessionData = null;
@@ -1597,8 +1599,21 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1597
1599
  }
1598
1600
  #openModal() {
1599
1601
  console.log("[web-apple-pay] #openModal: button clicked", { skuId: this.#offer?.sku_id });
1600
- if (!this.#offer || document.querySelector(ApplePayModal.tag)) return;
1602
+ if (!this.#offer) {
1603
+ console.warn("[web-apple-pay] #openModal: no offer set, ignoring click");
1604
+ return;
1605
+ }
1606
+ if (document.querySelector(ApplePayModal.tag)) {
1607
+ console.warn("[web-apple-pay] #openModal: modal already open, ignoring click");
1608
+ return;
1609
+ }
1601
1610
  trackExpressWalletClick(this.#offer.sku_id);
1611
+ getPurchaseRecaptchaTokens().then((tokens) => {
1612
+ console.log("[web-apple-pay] #openModal: reCAPTCHA tokens pre-fetched");
1613
+ this.#recaptchaTokens = tokens;
1614
+ }).catch((err) => {
1615
+ console.warn("[web-apple-pay] #openModal: reCAPTCHA pre-fetch failed", err);
1616
+ });
1602
1617
  ApplePayModal.define();
1603
1618
  const modal = document.createElement(ApplePayModal.tag);
1604
1619
  modal.offer = this.#offer;
@@ -1661,7 +1676,8 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
1661
1676
  try {
1662
1677
  const sessionData = this.#sessionData ?? _ApplePayButton.#ANONYMOUS_SESSION;
1663
1678
  const paymentOptions = this.#paymentOptions;
1664
- const recaptchaTokens = await getPurchaseRecaptchaTokens();
1679
+ const recaptchaTokens = this.#recaptchaTokens ?? await getPurchaseRecaptchaTokens();
1680
+ console.log("[web-apple-pay] #initiateApplePay: tokens ready, starting session", { prefetched: !!this.#recaptchaTokens });
1665
1681
  startApplePaySession(
1666
1682
  this.#buildSessionParams(
1667
1683
  skuId,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@economist/web-apple-pay",
3
3
  "description": "Web component package for Apple Pay checkout UI",
4
- "version": "0.1.2-beta.0",
4
+ "version": "0.1.3-beta.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",