@economist/web-apple-pay 0.1.3-beta.10 → 0.1.3-beta.12

package/dist/index.js

@@ -942,8 +942,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1169,7 +1169,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),
@@ -1572,7 +1571,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,
@@ -1927,6 +1925,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1991,6 +1990,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
+    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2105,6 +2105,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2139,11 +2140,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
-    const { skuId, country } = { skuId: this.#offer.sku_id, country: this.#country };
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
     };
-    modal.open();
+    modal.open(this.#recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

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

@@ -937,8 +937,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1164,7 +1164,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),
@@ -1567,7 +1566,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,
@@ -1922,6 +1920,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1986,6 +1985,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
+    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2100,6 +2100,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2134,11 +2135,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
-    const { skuId, country } = { skuId: this.#offer.sku_id, country: this.#country };
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
     };
-    modal.open();
+    modal.open(this.#recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

package/dist/src/apple-pay-button.stories.js

@@ -945,8 +945,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1172,7 +1172,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),
@@ -1575,7 +1574,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,
@@ -1930,6 +1928,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1994,6 +1993,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
+    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2108,6 +2108,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2142,11 +2143,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
-    const { skuId, country } = { skuId: this.#offer.sku_id, country: this.#country };
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
     };
-    modal.open();
+    modal.open(this.#recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

package/dist/src/apple-pay-modal.d.ts

@@ -21,7 +21,7 @@ export declare class ApplePayModal extends HTMLElement {
     get country(): string;
     set country(value: string);
     connectedCallback(): void;
-    open(): void;
+    open(recaptchaTokensPromise?: Promise<RecaptchaTokens> | null): void;
     close(): void;
 }
 export {};

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

@@ -937,8 +937,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {

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

@@ -937,8 +937,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1164,7 +1164,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),
@@ -1567,7 +1566,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,
@@ -1922,6 +1920,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1986,6 +1985,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
+    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2100,6 +2100,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2134,11 +2135,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
-    const { skuId, country } = { skuId: this.#offer.sku_id, country: this.#country };
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
     };
-    modal.open();
+    modal.open(this.#recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

package/dist/src/clients/payment-checkout/index.js

@@ -69,7 +69,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),

package/dist/src/clients/payment-checkout/payment-handler.js

@@ -55,7 +55,6 @@ var apiFetch = async (path, options = {}) => {
   return response.json();
 };
 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),
@@ -336,7 +335,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,

package/dist/src/index.js

@@ -942,8 +942,8 @@ var ApplePayModal = class _ApplePayModal extends HTMLElement {
       () => this.close()
     );
   }
-  open() {
-    this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
+  open(recaptchaTokensPromise) {
+    this.#recaptchaTokensPromise = recaptchaTokensPromise ?? getPurchaseRecaptchaTokens();
     this.#triggerElement = document.activeElement;
     document.body.appendChild(this);
     this.#keyHandler = (event) => {
@@ -1169,7 +1169,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),
@@ -1572,7 +1571,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,
@@ -1927,6 +1925,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #returnUrl = "";
   #supportedBillingCountries = [];
   #entryPoint = "";
+  #recaptchaTokensPromise = null;
   // ─── Public API ─────────────────────────────────────────────────────────────
   get offer() {
     return this.#offer;
@@ -1991,6 +1990,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     this.#paymentOptions = null;
     this.#returnUrl = "";
     this.#supportedBillingCountries = [];
+    this.#recaptchaTokensPromise = null;
     this.querySelector(SEL_CONTAINER)?.remove();
   }
   // ─── Render pipeline ────────────────────────────────────────────────────────
@@ -2105,6 +2105,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (button) {
       button.classList.remove("wap-loading");
       this.#updateDisabledState();
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
       trackExpressWalletImpression(this.#offer.sku_id, {
         entryPoint: this.#entryPoint,
         country: this.#country
@@ -2139,11 +2140,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     if (this.#sessionData?.loggedIn) {
       modal.dataset.loggedIn = "true";
     }
-    const { skuId, country } = { skuId: this.#offer.sku_id, country: this.#country };
+    const skuId = this.#offer.sku_id;
+    const country = this.#country;
     modal.onConfirm = (recaptchaTokens) => {
       this.#initiateApplePay(skuId, country, recaptchaTokens);
+      this.#recaptchaTokensPromise = getPurchaseRecaptchaTokens();
     };
-    modal.open();
+    modal.open(this.#recaptchaTokensPromise);
   }
   async #fetchSession() {
     try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "0.1.3-beta.10",
+  "version": "0.1.3-beta.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",