@dintero/checkout-web-sdk 0.12.15 → 0.12.17

package/dist/declarations/src/index.d.ts

@@ -24,6 +24,7 @@ export interface DinteroCheckoutInstance {
     })[];
     session: Session | undefined;
     popOutWindow: Window | undefined;
+    paymentCompleted: boolean;
 }
 export interface DinteroCheckoutOptions {
     sid: string;

package/dist/declarations/src/subscribe.d.ts

@@ -21,43 +21,43 @@ export type Subscription = {
 /**
  * Post a SessionLock-event to the checkout iframe.
  */
-export declare const postSessionLock: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postSessionLock: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post the validation result to the checkout iframe
  */
-export declare const postValidationResult: (iframe: HTMLIFrameElement, sid: string, result: SessionValidationCallback) => void;
+export declare const postValidationResult: (iframe: HTMLIFrameElement, sid: string, result: SessionValidationCallback, targetOrigin: string) => void;
 /**
  * Post the address call back result to the checkout iframe
  */
-export declare const postAddressCallbackResult: (iframe: HTMLIFrameElement, sid: string, result: AddressCallbackResult) => void;
+export declare const postAddressCallbackResult: (iframe: HTMLIFrameElement, sid: string, result: AddressCallbackResult, targetOrigin: string) => void;
 /**
  * Post RefreshSession-event to the checkout iframe.
  */
-export declare const postSessionRefresh: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postSessionRefresh: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post SetActivePaymentProductType-event to the checkout iframe.
  */
-export declare const postActivePaymentProductType: (iframe: HTMLIFrameElement, sid: string, paymentProductType?: string) => void;
+export declare const postActivePaymentProductType: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string, paymentProductType?: string) => void;
 /**
  * Post ClosePopOut-event to the checkout iframe.
  */
-export declare const postValidatePopOutEvent: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postValidatePopOutEvent: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post OpenPopOutFailed-event to the checkout iframe.
  */
-export declare const postOpenPopOutFailedEvent: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postOpenPopOutFailedEvent: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post OpenedPopOut-event to the checkout iframe.
  */
-export declare const postOpenPopOutEvent: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postOpenPopOutEvent: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post ClosePopOut-event to the checkout iframe.
  */
-export declare const postClosePopOutEvent: (iframe: HTMLIFrameElement, sid: string) => void;
+export declare const postClosePopOutEvent: (iframe: HTMLIFrameElement, sid: string, targetOrigin: string) => void;
 /**
  * Post SetLanguage-event to the checkout iframe.
  */
-export declare const postSetLanguage: (iframe: HTMLIFrameElement, sid: string, language: string) => void;
+export declare const postSetLanguage: (iframe: HTMLIFrameElement, sid: string, language: string, targetOrigin: string) => void;
 /**
  * Subscribe to events from an iframe given a handler and a set
  * of event types.

package/dist/dintero-checkout-web-sdk.cjs.dev.js

@@ -6,7 +6,7 @@ require('native-promise-only');
 
 var pkg = {
 	name: "@dintero/checkout-web-sdk",
-	version: "0.12.15",
+	version: "0.12.17",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -40,16 +40,16 @@ var pkg = {
 	devDependencies: {
 		"@babel/core": "7.29.7",
 		"@babel/preset-typescript": "7.29.7",
-		"@biomejs/biome": "2.4.15",
+		"@biomejs/biome": "2.5.0",
 		"@preconstruct/cli": "2.8.13",
 		"@semantic-release/exec": "7.1.0",
 		"@semantic-release/git": "10.0.1",
-		"@vitest/browser": "4.1.7",
+		"@vitest/browser": "4.1.9",
 		"@vitest/browser-webdriverio": "^4.0.4",
-		"semantic-release": "25.0.3",
+		"semantic-release": "25.0.5",
 		typescript: "6.0.3",
-		vitest: "4.1.7",
-		webdriverio: "9.27.2"
+		vitest: "4.1.9",
+		webdriverio: "9.29.0"
 	},
 	dependencies: {
 		"native-promise-only": "0.8.1"
@@ -224,6 +224,19 @@ const getPopOutUrl = ({
   }
   return `${padTrailingSlash(endpoint)}?${params.toString()}`;
 };
+
+/**
+ * Get the target origin for postMessage calls derived from the endpoint.
+ * Falls back to the default checkout endpoint when none is configured.
+ */
+const getTargetOrigin = endpoint => {
+  const resolvedEndpoint = endpoint || "https://checkout.dintero.com";
+  try {
+    return new URL(resolvedEndpoint).origin;
+  } catch {
+    throw new Error("Invalid endpoint");
+  }
+};
 const getHostname = () => {
   try {
     const {
@@ -249,6 +262,7 @@ const hostnameIsTop = () => {
 const url = {
   getPopOutUrl,
   getSessionUrl,
+  getTargetOrigin,
   windowLocationAssign
 };
 
@@ -352,38 +366,38 @@ const openPopOut = async options => {
     popOutWindow
   };
 };
-const postPopOutSessionLock = (popOutWindow, sid) => {
+const postPopOutSessionLock = (popOutWindow, sid, targetOrigin) => {
   try {
     if (popOutWindow) {
       popOutWindow.postMessage({
         type: "LockSession",
         sid
-      }, "*");
+      }, targetOrigin);
     }
   } catch (e) {
     console.error(e);
   }
 };
-const postPopOutSessionRefresh = (popOutWindow, sid) => {
+const postPopOutSessionRefresh = (popOutWindow, sid, targetOrigin) => {
   try {
     if (popOutWindow) {
       popOutWindow.postMessage({
         type: "RefreshSession",
         sid
-      }, "*");
+      }, targetOrigin);
     }
   } catch (e) {
     console.error(e);
   }
 };
-const postPopOutActivePaymentProductType = (popOutWindow, sid, paymentProductType) => {
+const postPopOutActivePaymentProductType = (popOutWindow, sid, targetOrigin, paymentProductType) => {
   try {
     if (popOutWindow) {
       popOutWindow.postMessage({
         type: "SetActivePaymentProductType",
         sid,
         payment_product_type: paymentProductType
-      }, "*");
+      }, targetOrigin);
     }
   } catch (e) {
     console.error(e);
@@ -840,135 +854,135 @@ const removePopOutButton = () => {
 /**
  * Post a message acknowledgement to the checkout iframe.
  */
-const postAck = (source, event) => {
+const postAck = (source, event, targetOrigin) => {
   if (event.data.mid && source) {
     source.postMessage({
       ack: event.data.mid
-    }, event.origin || "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post a SessionLock-event to the checkout iframe.
  */
-const postSessionLock = (iframe, sid) => {
+const postSessionLock = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "LockSession",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post the validation result to the checkout iframe
  */
-const postValidationResult = (iframe, sid, result) => {
+const postValidationResult = (iframe, sid, result, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "ValidationResult",
       sid,
       ...result
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post the address call back result to the checkout iframe
  */
-const postAddressCallbackResult = (iframe, sid, result) => {
+const postAddressCallbackResult = (iframe, sid, result, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "AddressCallbackResult",
       sid,
       ...result
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post RefreshSession-event to the checkout iframe.
  */
-const postSessionRefresh = (iframe, sid) => {
+const postSessionRefresh = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "RefreshSession",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post SetActivePaymentProductType-event to the checkout iframe.
  */
-const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
+const postActivePaymentProductType = (iframe, sid, targetOrigin, paymentProductType) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "SetActivePaymentProductType",
       sid,
       payment_product_type: paymentProductType
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post ClosePopOut-event to the checkout iframe.
  */
-const postValidatePopOutEvent = (iframe, sid) => {
+const postValidatePopOutEvent = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "ValidatingPopOut",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post OpenPopOutFailed-event to the checkout iframe.
  */
-const postOpenPopOutFailedEvent = (iframe, sid) => {
+const postOpenPopOutFailedEvent = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "OpenPopOutFailed",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post OpenedPopOut-event to the checkout iframe.
  */
-const postOpenPopOutEvent = (iframe, sid) => {
+const postOpenPopOutEvent = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "OpenedPopOut",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post ClosePopOut-event to the checkout iframe.
  */
-const postClosePopOutEvent = (iframe, sid) => {
+const postClosePopOutEvent = (iframe, sid, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "ClosedPopOut",
       sid
-    }, "*");
+    }, targetOrigin);
   }
 };
 
 /**
  * Post SetLanguage-event to the checkout iframe.
  */
-const postSetLanguage = (iframe, sid, language) => {
+const postSetLanguage = (iframe, sid, language, targetOrigin) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
       type: "SetLanguage",
       sid,
       language
-    }, "*");
+    }, targetOrigin);
   }
 };
 
@@ -994,7 +1008,7 @@ const subscribe = options => {
     const correctSid = event.data && event.data.sid === sid;
     const correctMessageType = eventTypes.indexOf(event.data?.type) !== -1;
     if (correctOrigin && correctWindow && correctSid && correctMessageType) {
-      postAck(checkout.iframe.contentWindow, event);
+      postAck(checkout.iframe.contentWindow, event, endpointUrl.origin);
       handler(event.data, checkout);
     }
   };
@@ -1056,6 +1070,7 @@ const setLanguage = (event, checkout) => {
     checkout.language = event.language;
   }
 };
+const paymentCompletedEvents = [CheckoutEvents.SessionCancel, CheckoutEvents.SessionPaymentOnHold, CheckoutEvents.SessionPaymentAuthorized, CheckoutEvents.SessionPaymentError];
 
 /**
  * Wrap function with try catch so an error in a single function won't short circuit other code in the current context.
@@ -1079,12 +1094,11 @@ const createPopOutMessageHandler = (source, checkout) => {
     // biome-ignore lint/suspicious/noExplicitAny: internal LanguageChanged event, not part of SessionEvent
     handler: (eventData, checkout) => {
       // Tell the embedded checkout to change language.
-      postSetLanguage(checkout.iframe, checkout.options.sid, eventData.language);
+      postSetLanguage(checkout.iframe, checkout.options.sid, eventData.language, url.getTargetOrigin(checkout.options.endpoint));
     }
   };
 
   // Close pop out, and remove SDK rendered button when payment is completed.
-  const paymentCompletedEvents = [CheckoutEvents.SessionCancel, CheckoutEvents.SessionPaymentOnHold, CheckoutEvents.SessionPaymentAuthorized, CheckoutEvents.SessionPaymentError];
   const popOutCompletedHandler = {
     internalPopOutHandler: true,
     eventTypes: paymentCompletedEvents,
@@ -1151,7 +1165,7 @@ const showPopOut = async (event, checkout) => {
     onOpen: popOutWindow => createPopOutMessageHandler(popOutWindow, checkout),
     onClose: () => {
       removeBackdrop();
-      postClosePopOutEvent(checkout.iframe, checkout.options.sid);
+      postClosePopOutEvent(checkout.iframe, checkout.options.sid, url.getTargetOrigin(checkout.options.endpoint));
       setPopOutButtonDisabled(false);
       checkout.popOutWindow = undefined;
     }
@@ -1162,7 +1176,7 @@ const showPopOut = async (event, checkout) => {
     popOutWindow
   } = openPopOutResult;
   if (popOutWindow) {
-    postOpenPopOutEvent(checkout.iframe, checkout.options.sid);
+    postOpenPopOutEvent(checkout.iframe, checkout.options.sid, url.getTargetOrigin(checkout.options.endpoint));
     // Add pop out window to checkout instance
     checkout.popOutWindow = popOutWindow;
     createBackdrop({
@@ -1172,7 +1186,7 @@ const showPopOut = async (event, checkout) => {
     });
     return true;
   } else {
-    postOpenPopOutFailedEvent(checkout.iframe, checkout.options.sid);
+    postOpenPopOutFailedEvent(checkout.iframe, checkout.options.sid, url.getTargetOrigin(checkout.options.endpoint));
     return false;
   }
 };
@@ -1186,7 +1200,7 @@ const createPopOutValidationCallback = (event, checkout) => {
   return result => {
     // Tell the embedded iframe about the validation result so it can show an error message if
     // the validation failed.
-    postValidationResult(checkout.iframe, checkout.options.sid, result);
+    postValidationResult(checkout.iframe, checkout.options.sid, result, url.getTargetOrigin(checkout.options.endpoint));
     if (result.success && checkout.popOutWindow) {
       // Redirect user to session in pop out window
       checkout.popOutWindow.location.href = url.getPopOutUrl({
@@ -1217,7 +1231,7 @@ const handlePopOutButtonClick = async (event, checkout) => {
     // Let the host application validate the payment session before opening checkout.
 
     // Tell the embedded iframe that we are validating the session
-    postValidatePopOutEvent(checkout.iframe, checkout.options.sid);
+    postValidatePopOutEvent(checkout.iframe, checkout.options.sid, url.getTargetOrigin(checkout.options.endpoint));
 
     // Create callback function added to the SDK event and onValidateSession attributes
     const callback = createPopOutValidationCallback(event, checkout);
@@ -1236,7 +1250,7 @@ const handlePopOutButtonClick = async (event, checkout) => {
       postValidationResult(checkout.iframe, checkout.options.sid, {
         success: false,
         clientValidationError: "Validation runtime error"
-      });
+      }, url.getTargetOrigin(checkout.options.endpoint));
     }
   }
 };
@@ -1252,6 +1266,9 @@ const isShowPopOutButton = event => {
  * Display the SDK rendered pop out button on top of the embedded iframe
  */
 const handleShowButton = (event, checkout) => {
+  if (checkout.paymentCompleted) {
+    return;
+  }
   if (isShowPopOutButton(event)) {
     if (event.session) {
       // Update checkout instance session
@@ -1281,6 +1298,15 @@ const handleRemoveButton = (event, _checkout) => {
     removePopOutButton();
   }
 };
+
+/**
+ * Mark the payment as completed and remove the pop out button. Once completed,
+ * handleShowButton ignores any further ShowPopOutButton messages.
+ */
+const handlePaymentCompleted = (_event, checkout) => {
+  checkout.paymentCompleted = true;
+  removePopOutButton();
+};
 const cleanUpPopOut = checkout => {
   // Ensures that the pop out is no longer open when the payment is completed or the checkout is destroyed.
   removePopOutButton();
@@ -1331,6 +1357,10 @@ const embed = async options => {
     onAddressCallback,
     popOut
   } = internalOptions;
+
+  // Origin of the checkout endpoint, used as the target origin for all
+  // postMessage calls so messages are only ever delivered to the trusted origin.
+  const targetOrigin = url.getTargetOrigin(endpoint);
   let checkout;
   const subscriptions = [];
   let has_delivered_final_event = false;
@@ -1420,30 +1450,30 @@ const embed = async options => {
   };
   const lockSession = () => {
     return promisifyAction(() => {
-      postSessionLock(iframe, sid);
-      popOutModule.postPopOutSessionLock(checkout?.popOutWindow, sid);
+      postSessionLock(iframe, sid, targetOrigin);
+      popOutModule.postPopOutSessionLock(checkout?.popOutWindow, sid, targetOrigin);
     }, CheckoutEvents.SessionLocked, CheckoutEvents.SessionLockFailed);
   };
   const refreshSession = () => {
     return promisifyAction(() => {
-      postSessionRefresh(iframe, sid);
-      popOutModule.postPopOutSessionRefresh(checkout?.popOutWindow, sid);
+      postSessionRefresh(iframe, sid, targetOrigin);
+      popOutModule.postPopOutSessionRefresh(checkout?.popOutWindow, sid, targetOrigin);
     }, CheckoutEvents.SessionUpdated, CheckoutEvents.SessionNotFound);
   };
   const setActivePaymentProductType = paymentProductType => {
     // Send to either embed or pop out
     if (options.popOut) {
-      popOutModule.postPopOutActivePaymentProductType(checkout?.popOutWindow, sid, paymentProductType);
+      popOutModule.postPopOutActivePaymentProductType(checkout?.popOutWindow, sid, targetOrigin, paymentProductType);
     } else {
-      postActivePaymentProductType(iframe, sid, paymentProductType);
+      postActivePaymentProductType(iframe, sid, targetOrigin, paymentProductType);
     }
   };
   const submitValidationResult = result => {
-    postValidationResult(iframe, sid, result);
+    postValidationResult(iframe, sid, result, targetOrigin);
     // For pop out we do validation when opening the pop out
   };
   const submitAddressCallbackResult = result => {
-    postAddressCallbackResult(iframe, sid, result);
+    postAddressCallbackResult(iframe, sid, result, targetOrigin);
     // For pop out we do validation when opening the pop out
   };
 
@@ -1564,6 +1594,9 @@ const embed = async options => {
   }, {
     handler: wrappedOnAddressCallback,
     eventTypes: [CheckoutEvents.AddressCallback]
+  }, {
+    handler: handlePaymentCompleted,
+    eventTypes: paymentCompletedEvents
   }, {
     handler: handleShowButton,
     eventTypes: [InternalCheckoutEvents.ShowPopOutButton]
@@ -1584,7 +1617,8 @@ const embed = async options => {
     options: internalOptions,
     handlers,
     session: undefined,
-    popOutWindow: undefined
+    popOutWindow: undefined,
+    paymentCompleted: false
   };
   const checkoutInstance = checkout;
   for (const {