@dintero/checkout-web-sdk 0.4.5 → 0.5.1

package/coverage/{Chrome Headless 105.0.5173.0 (Linux x86_64) → Chrome Headless 108.0.5351.0 (Linux x86_64)}/html/subscribe.ts.html

@@ -213,7 +213,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">28x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -265,37 +265,37 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1295x</span>
+<span class="cline-any cline-yes">1490x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">259x</span>
-<span class="cline-any cline-yes">3679x</span>
-<span class="cline-any cline-yes">3679x</span>
-<span class="cline-any cline-yes">3679x</span>
+<span class="cline-any cline-yes">298x</span>
+<span class="cline-any cline-yes">4392x</span>
+<span class="cline-any cline-yes">4392x</span>
+<span class="cline-any cline-yes">4392x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3679x</span>
-<span class="cline-any cline-yes">3679x</span>
+<span class="cline-any cline-yes">4392x</span>
+<span class="cline-any cline-yes">4392x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">27x</span>
-<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">28x</span>
+<span class="cline-any cline-yes">28x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">259x</span>
+<span class="cline-any cline-yes">298x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">259x</span>
-<span class="cline-any cline-yes">32x</span>
+<span class="cline-any cline-yes">298x</span>
+<span class="cline-any cline-yes">35x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">259x</span>
+<span class="cline-any cline-yes">298x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -427,7 +427,7 @@ export const subscribe = (options: SubscriptionOptions): Subscription =&gt; {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 01 2022 12:32:43 GMT+0000 (Coordinated Universal Time)
+                at Sat Nov 12 2022 16:43:31 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

package/coverage/{Chrome Headless 105.0.5173.0 (Linux x86_64) → Chrome Headless 108.0.5351.0 (Linux x86_64)}/html/url.ts.html

@@ -169,7 +169,7 @@ export const getSessionUrl = (options: SessionUrlOptions): string => {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 01 2022 12:32:43 GMT+0000 (Coordinated Universal Time)
+                at Sat Nov 12 2022 16:43:31 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

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

@@ -14,7 +14,8 @@ export declare enum CheckoutEvents {
 }
 export declare enum InternalCheckoutEvents {
     HeightChanged = "HeightChanged",
-    LanguageChanged = "LanguageChanged"
+    LanguageChanged = "LanguageChanged",
+    ScrollToTop = "ScrollToTop"
 }
 export declare type SessionNotFound = {
     type: CheckoutEvents.SessionNotFound;

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.4.5",
+	version: "0.5.1",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -46,7 +46,7 @@ var pkg = {
 		"karma-typescript": "^5.0.3",
 		mocha: "^8.1.1",
 		prettier: "^2.6.2",
-		puppeteer: "^15.0.0",
+		puppeteer: "^19.0.0",
 		"semantic-release": "^19.0.2",
 		sinon: "^14.0.0",
 		typescript: "^4.2.4"
@@ -57,7 +57,6 @@ var pkg = {
 };
 
 let CheckoutEvents;
-
 (function (CheckoutEvents) {
   CheckoutEvents["SessionNotFound"] = "SessionNotFound";
   CheckoutEvents["SessionLoaded"] = "SessionLoaded";
@@ -71,21 +70,20 @@ let CheckoutEvents;
   CheckoutEvents["ActivePaymentProductType"] = "ActivePaymentProductType";
   CheckoutEvents["ValidateSession"] = "ValidateSession";
 })(CheckoutEvents || (CheckoutEvents = {}));
-
 let InternalCheckoutEvents;
-
 (function (InternalCheckoutEvents) {
   InternalCheckoutEvents["HeightChanged"] = "HeightChanged";
   InternalCheckoutEvents["LanguageChanged"] = "LanguageChanged";
+  InternalCheckoutEvents["ScrollToTop"] = "ScrollToTop";
 })(InternalCheckoutEvents || (InternalCheckoutEvents = {}));
 
 /**
  * Wraps window.location.assign()
  */
-
 const windowLocationAssign = url => {
   window.location.assign(url);
 };
+
 /**
  * Get the url for the session./yarn-error.log
 .DS_Store
@@ -99,12 +97,11 @@ const getSessionUrl = options => {
     ui,
     shouldCallValidateSession
   } = options;
-
   if (!endpoint) {
     throw new Error("Invalid endpoint");
-  } // Compose url for view session endpoint with optional language parameter.
-
+  }
 
+  // Compose url for view session endpoint with optional language parameter.
   let languageParam = language ? `language=${language}` : "";
   let uiParam = ui ? `ui=${ui}` : "";
   let sdk = `sdk=${pkg.version}`;
@@ -123,12 +120,14 @@ const createIframeAsync = (container, endpoint, url) => {
   if (!container || !container.appendChild) {
     throw new Error("Invalid container");
   }
+  const iframe = document.createElement("iframe");
 
-  const iframe = document.createElement("iframe"); // No border, transparent and stretch to 100% of the container width.
-
+  // No border, transparent and stretch to 100% of the container width.
   iframe.setAttribute("frameborder", "0");
   iframe.setAttribute("allowTransparency", "true");
-  iframe.setAttribute("style", "width:100%; height:0;"); // TODO: Get this to work as expected, might be tricky with current
+  iframe.setAttribute("style", "width:100%; height:0;");
+
+  // TODO: Get this to work as expected, might be tricky with current
   // tests since they will require the csp to be "unsafe-inline".
   // The server needs to add the same property in the Content Security
   // Policy headers in the response for this to work. A CSP header set by
@@ -136,25 +135,27 @@ const createIframeAsync = (container, endpoint, url) => {
   // CSP from the iframe host.
   // Content Security Policy, should be limited to "endpoint".
   // iframe.setAttribute("csp", `default-src  ${endpoint}`);
+
   // Apply extra restrictions to the content in the iframe.
   // allow popups is needed to open terms in new window
+  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox");
+
+  // The download priority of the resource in the <iframe>'s src attribute.
+  iframe.setAttribute("importance", "high");
 
-  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"); // The download priority of the resource in the <iframe>'s src attribute.
+  // Set the iframe source to the url.
+  iframe.setAttribute("src", url);
 
-  iframe.setAttribute("importance", "high"); // Set the iframe source to the url.
+  // Resolve or reject promise when iframe loads.
 
-  iframe.setAttribute("src", url); // Resolve or reject promise when iframe loads.
   // // Add iframe to the container.
   // container.appendChild(iframe);
-
   return {
     iframe,
     initiate: async () => {
       return new Promise((resolve, reject) => {
         iframe.onload = () => resolve();
-
         iframe.onerror = () => reject();
-
         container.appendChild(iframe);
       });
     }
@@ -175,11 +176,10 @@ const postAck = (iframe, event) => {
     }, event.origin || "*");
   }
 };
+
 /**
  * Post a SessionLock-event to the checkout iframe.
  */
-
-
 const postSessionLock = (iframe, sid) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
@@ -188,10 +188,10 @@ const postSessionLock = (iframe, sid) => {
     }, "*");
   }
 };
+
 /**
  * Post the validation result to the checkout iframe
  */
-
 const postValidationResult = (iframe, sid, result) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
@@ -201,10 +201,10 @@ const postValidationResult = (iframe, sid, result) => {
     }, "*");
   }
 };
+
 /**
  * Post RefreshSession-event to the checkout iframe.
  */
-
 const postSessionRefresh = (iframe, sid) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
@@ -213,10 +213,10 @@ const postSessionRefresh = (iframe, sid) => {
     }, "*");
   }
 };
+
 /**
  * Post setActivePaymentProductType-event to the checkout iframe.
  */
-
 const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
   if (iframe.contentWindow) {
     iframe.contentWindow.postMessage({
@@ -226,11 +226,11 @@ const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
     }, "*");
   }
 };
+
 /**
  * Subscribe to events from an iframe given a handler and a set
  * of event types.
  */
-
 const subscribe = options => {
   const {
     sid,
@@ -238,29 +238,30 @@ const subscribe = options => {
     handler,
     eventTypes,
     checkout
-  } = options; // Wrap event handler in a function that checks for correct origin and
-  // filters on event type(s) in the event data.
+  } = options;
 
+  // Wrap event handler in a function that checks for correct origin and
+  // filters on event type(s) in the event data.
   const wrappedHandler = event => {
     const correctOrigin = event.origin === endpoint;
     const correctWindow = event.source === checkout.iframe.contentWindow;
     const correctSid = event.data && event.data.sid === sid;
     const correctMessageType = eventTypes.indexOf(event.data && event.data.type) !== -1;
-
     if (correctOrigin && correctWindow && correctSid && correctMessageType) {
       postAck(checkout.iframe, event);
       handler(event.data, checkout);
     }
-  }; // Add event listener to the iframe.
-
+  };
 
-  window.addEventListener("message", wrappedHandler, false); // Function to remove the event listener from the iframe.
+  // Add event listener to the iframe.
+  window.addEventListener("message", wrappedHandler, false);
 
+  // Function to remove the event listener from the iframe.
   const unsubscribe = () => {
     window.removeEventListener("message", wrappedHandler, false);
-  }; // Return object with unsubscribe function.
-
+  };
 
+  // Return object with unsubscribe function.
   return {
     unsubscribe
   };
@@ -274,32 +275,47 @@ const followHref = event => {
     windowLocationAssign(event.href);
   }
 };
+
 /**
  * An event handler that sets height of the iframe.
  */
-
-
 const setIframeHeight = (event, checkout) => {
   if (event.height || event.height === 0) {
     checkout.iframe.setAttribute("style", `width:100%; height:${event.height}px;`);
   }
 };
 
+/**
+ * An event handler that scrolls to the top of the iframe. This is useful when the user
+ * is navigated to another page.
+ */
+const scrollToIframeTop = (event, checkout) => {
+  try {
+    checkout.iframe.scrollIntoView({
+      block: 'start',
+      behavior: 'smooth'
+    });
+  } catch (e) {
+    // Ignore erorr silenty bug log it to the console.
+    console.error(e);
+  }
+};
+
+/**
+ * An event handler that sets language in the iframe.
+ */
 const setLanguage = (event, checkout) => {
   if (event.language) {
     checkout.language = event.language;
   }
 };
-
 const handleWithResult = (sid, endpoint, handler) => {
   return (event, checkout) => {
     const eventKeys = ["sid", "merchant_reference", "transaction_id", "error"];
     const pairs = eventKeys.map(key => [key, event[key]]);
-
     if (event.type === CheckoutEvents.SessionCancel && !event.error) {
       pairs.push(["error", "cancelled"]);
     }
-
     pairs.push(["language", checkout.language]);
     pairs.push(["sdk", pkg.version]);
     const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
@@ -307,11 +323,10 @@ const handleWithResult = (sid, endpoint, handler) => {
     handler(event, checkout);
   };
 };
+
 /**
  * Show a dintero payment session in an embedded iframe.
  */
-
-
 const embed = async options => {
   const {
     container,
@@ -330,8 +345,9 @@ const embed = async options => {
     onValidateSession
   } = options;
   let checkout;
-  const subscriptions = []; // Create iframe
+  const subscriptions = [];
 
+  // Create iframe
   const {
     iframe,
     initiate
@@ -342,30 +358,27 @@ const embed = async options => {
     ui: "inline",
     shouldCallValidateSession: onValidateSession !== undefined
   }));
+
   /**
    * Function that removes the iframe and all event listeners.
    */
-
   const destroy = () => {
     if (iframe) {
       subscriptions.forEach(sub => sub.unsubscribe());
-
       if (iframe.parentElement) {
         container.removeChild(iframe);
       }
     }
   };
+
   /**
    * Turn an action into a promise by specifying resolve and
    * reject events.
    */
-
-
   const promisifyAction = (action, resolveEvent, rejectEvent) => {
     if (!checkout) {
       throw new Error("Unable to create action promise: checkout is undefined");
     }
-
     return new Promise((resolve, reject) => {
       const eventSubscriptions = [];
       eventSubscriptions.push(subscribe({
@@ -391,40 +404,34 @@ const embed = async options => {
       action();
     });
   };
-
   const lockSession = () => {
     return promisifyAction(() => {
       postSessionLock(iframe, sid);
     }, CheckoutEvents.SessionLocked, CheckoutEvents.SessionLockFailed);
   };
-
   const refreshSession = () => {
     return promisifyAction(() => {
       postSessionRefresh(iframe, sid);
     }, CheckoutEvents.SessionUpdated, CheckoutEvents.SessionNotFound);
   };
-
   const setActivePaymentProductType = paymentProductType => {
     postActivePaymentProductType(iframe, sid, paymentProductType);
   };
-
   const submitValidationResult = result => {
     postValidationResult(iframe, sid, result);
   };
-
   const wrappedOnValidateSession = (event, checkout) => {
     if (onValidateSession) {
       onValidateSession(event, checkout, submitValidationResult);
     }
   };
-
   const wrappedOnSessionLocked = (event, checkout) => {
     if (onSessionLocked) {
       onSessionLocked(event, checkout, refreshSession);
     }
-  }; // Create checkout object that wraps the destroy function.
-
+  };
 
+  // Create checkout object that wraps the destroy function.
   checkout = {
     destroy,
     iframe,
@@ -433,14 +440,18 @@ const embed = async options => {
     refreshSession,
     setActivePaymentProductType,
     submitValidationResult
-  }; // Add event handlers (or in some cases add a fallback href handler).
+  };
 
+  // Add event handlers (or in some cases add a fallback href handler).
   [{
     handler: setLanguage,
     eventTypes: [InternalCheckoutEvents.LanguageChanged]
   }, {
     handler: setIframeHeight,
     eventTypes: [InternalCheckoutEvents.HeightChanged]
+  }, {
+    handler: scrollToIframeTop,
+    eventTypes: [InternalCheckoutEvents.ScrollToTop]
   }, {
     handler: onSession,
     eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
@@ -487,23 +498,24 @@ const embed = async options => {
         checkout
       }));
     }
-  }); // Add iframe to DOM
-
-  await initiate(); // Return object with function to destroy the checkout.
+  });
 
+  // Add iframe to DOM
+  await initiate();
+  // Return object with function to destroy the checkout.
   return checkout;
 };
+
 /**
  * Redirect the customer to a payment session in the Dintero Checkout.
  */
-
 const redirect = options => {
   const {
     sid,
     language,
     endpoint = "https://checkout.dintero.com"
-  } = options; // Redirect the current browser window to the checkout session url.
-
+  } = options;
+  // Redirect the current browser window to the checkout session url.
   windowLocationAssign(getSessionUrl({
     sid,
     endpoint,