@paydock/client-sdk 1.126.0-beta → 1.127.1-beta

package/bundles/widget.umd.js

@@ -958,7 +958,7 @@
     version: 'x-sdk-version',
     type: 'x-sdk-type'
   });
-  SDK._version = '1.126.0-beta';
+  SDK._version = 'v1.127.1-beta';
 
   /******************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -5518,12 +5518,12 @@
    * @type {object}
    * @param {string} HTML=html
    */
-  var TOKEN_FORMAT;
+  var TOKEN_FORMAT$1;
   (function (TOKEN_FORMAT) {
     TOKEN_FORMAT["HTML"] = "html";
     TOKEN_FORMAT["URL"] = "url";
     TOKEN_FORMAT["STANDALONE_3DS"] = "standalone_3ds";
-  })(TOKEN_FORMAT || (TOKEN_FORMAT = {}));
+  })(TOKEN_FORMAT$1 || (TOKEN_FORMAT$1 = {}));
   /**
    * List of available event's name
    * @const EVENT
@@ -5582,11 +5582,11 @@
        *
        */
       function load() {
-        if (this.token.format === TOKEN_FORMAT.HTML) this.iFrame.loadFromHtml(this.token.content, {
+        if (this.token.format === TOKEN_FORMAT$1.HTML) this.iFrame.loadFromHtml(this.token.content, {
           title: '3d secure authentication'
-        }, 'threeDSecure-iframe');else if (this.token.format === TOKEN_FORMAT.URL) this.iFrame.load(this.token.content, {
+        }, 'threeDSecure-iframe');else if (this.token.format === TOKEN_FORMAT$1.URL) this.iFrame.load(this.token.content, {
           title: '3d secure authentication'
-        }, 'threeDSecure-iframe');else if (this.token.format === TOKEN_FORMAT.STANDALONE_3DS) this.standalone3dsService.load(this.token.content, {
+        }, 'threeDSecure-iframe');else if (this.token.format === TOKEN_FORMAT$1.STANDALONE_3DS) this.standalone3dsService.load(this.token.content, {
           title: '3d secure authentication'
         });else console.error('Token contain unsupported payload');
       }
@@ -5634,7 +5634,7 @@
       key: "on",
       value: function on(eventName, cb) {
         var _this = this;
-        if (this.token.format === TOKEN_FORMAT.STANDALONE_3DS) {
+        if (this.token.format === TOKEN_FORMAT$1.STANDALONE_3DS) {
           if (typeof cb === 'function') return this.eventEmitter.subscribe(eventName, cb);
           return new Promise(function (resolve) {
             return _this.eventEmitter.subscribe(eventName, function (res) {
@@ -8707,6 +8707,161 @@
     ENABLE_SRC_POPUP: 'enable_src_popup'
   };
 
+  /**
+   * Interface for classes that represent a trigger data.
+   * @interface ITriggerData
+   *
+   * @param {string} [configuration_token]
+   * @param {string} [tab_number]
+   * @param {string} [elements]
+   * @param {string} [form_values]
+   * */
+  /**
+   * List of available triggers
+   *
+   * @type {object}
+   * @param {string} SUBMIT_FORM=submit_form
+   * @param {string} CHANGE_TAB=tab
+   * @param {string} HIDE_ELEMENTS=hide_elements
+   * @param {string} SHOW_ELEMENTS=show_elements
+   * @param {string} REFRESH_CHECKOUT=refresh_checkout
+   * @param {string} UPDATE_FORM_VALUES=update_form_values
+   * @param {string} INIT_CHECKOUT=init_checkout
+   * @param {string} INJECT_CUSTOMER_DATA=inject_customer_data
+   */
+  var TRIGGER$1 = {
+    SUBMIT_FORM: 'submit_form',
+    CHANGE_TAB: 'tab',
+    HIDE_ELEMENTS: 'hide_elements',
+    SHOW_ELEMENTS: 'show_elements',
+    REFRESH_CHECKOUT: 'refresh_checkout',
+    UPDATE_FORM_VALUES: 'update_form_values',
+    INIT_CHECKOUT: 'init_checkout',
+    INJECT_CUSTOMER_DATA: 'inject_customer_data'
+  };
+  var Trigger = /*#__PURE__*/function () {
+    function Trigger(iFrame) {
+      _classCallCheck(this, Trigger);
+      this.iFrame = iFrame;
+    }
+    return _createClass(Trigger, [{
+      key: "push",
+      value: function push(triggerName) {
+        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        if (!this.iFrame.isExist()) return;
+        if (ObjectHelper.values(TRIGGER$1).indexOf(triggerName) === -1) console.warn('unsupported trigger type');
+        var body = {
+          trigger: triggerName,
+          destination: 'widget.paydock',
+          data: data
+        };
+        this.iFrame.getElement().contentWindow.postMessage(JSON.stringify(body), '*');
+      }
+    }]);
+  }();
+
+  var PerformanceService = /*#__PURE__*/function () {
+    function PerformanceService() {
+      _classCallCheck(this, PerformanceService);
+    }
+    return _createClass(PerformanceService, null, [{
+      key: "initialize",
+      value: function initialize(env) {
+        var _this = this;
+        performance.now();
+        // Set environment configuration
+        var envInstance = new Env(API_URL, env);
+        var finalUrl = envInstance.getConf().url;
+        // Add performance optimizations in parallel
+        Promise.all([
+        // Add preconnect
+        new Promise(function (resolve) {
+          _this.addLinkTag('preconnect', finalUrl, true);
+          resolve();
+        }),
+        // Add DNS prefetch
+        new Promise(function (resolve) {
+          _this.addLinkTag('dns-prefetch', finalUrl);
+          resolve();
+        }),
+        // Send warmup request
+        new Promise(function (resolve) {
+          if (window.fetch) {
+            fetch("".concat(finalUrl, "/v1/echo"), {
+              mode: 'no-cors',
+              keepalive: true
+            })["catch"](function () {})["finally"](resolve);
+          } else {
+            resolve();
+          }
+        })]);
+      }
+      /**
+       * Dynamically adds or updates a `<link>` tag in the document's `<head>`.
+       * This utility is designed for performance optimizations like `dns-prefetch` and `preconnect`.
+       *
+       * @param rel - The relationship type of the link (e.g., 'dns-prefetch', 'preconnect').
+       * @param href - The URL for the resource.
+       * @param crossorigin - Specifies if the resource should be fetched with a CORS request. Defaults to false.
+       */
+    }, {
+      key: "addLinkTag",
+      value: function addLinkTag(rel, href) {
+        var crossorigin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        try {
+          var existingTag = document.head.querySelector("link[rel=\"".concat(rel, "\"][href*=\"").concat(new URL(href).host, "\"]"));
+          if (existingTag) {
+            return;
+          }
+          var linkElement = this.createLinkElement(rel, href, crossorigin);
+          document.head.prepend(linkElement);
+        } catch (error) {
+          console.error("\u274C [Performance] Failed to add ".concat(rel, " tag for ").concat(href, "."), error);
+        }
+      }
+      /**
+       * Creates and configures a new HTMLLinkElement.
+       *
+       * @param rel - The relationship type.
+       * @param href - The resource URL.
+       * @param crossorigin - The CORS setting.
+       * @returns A configured HTMLLinkElement.
+       * @private
+       */
+    }, {
+      key: "createLinkElement",
+      value: function createLinkElement(rel, href, crossorigin) {
+        var linkElement = document.createElement('link');
+        linkElement.rel = rel;
+        linkElement.href = this.determineHref(rel, href);
+        if (crossorigin) {
+          linkElement.crossOrigin = 'anonymous';
+        }
+        return linkElement;
+      }
+      /**
+       * Determines the appropriate href value based on the link relationship.
+       *
+       * @param rel - The relationship type.
+       * @param originalHref - The original URL.
+       * @returns The processed href string.
+       * @private
+       */
+    }, {
+      key: "determineHref",
+      value: function determineHref(rel, originalHref) {
+        if (rel === 'dns-prefetch') {
+          // For dns-prefetch, a protocol-relative URL to the host is sufficient.
+          var _URL = new URL(originalHref),
+            host = _URL.host;
+          return "//".concat(host);
+        }
+        // For others, like preconnect, the full original URL is required.
+        return originalHref;
+      }
+    }]);
+  }();
+
   var ClickToPaySRC = /*#__PURE__*/function () {
     function ClickToPaySRC(iframe_selector, service_id, public_key, meta, eventEmitter, autoResize, env, alias) {
       _classCallCheck(this, ClickToPaySRC);
@@ -8729,6 +8884,7 @@
       if (env) this.link.setEnv(env, alias);
       this.iFrameContainer = new Container(iframe_selector);
       this.iFrame = new IFrame(this.iFrameContainer);
+      this.trigger = new Trigger(this.iFrame);
       this.iFrameEvent = new IFrameEvent(window);
       this.setupIFrameEvents();
     }
@@ -8764,6 +8920,8 @@
       key: "load",
       value: function load() {
         var _this2 = this;
+        // Initialize performance optimizations when environment is guaranteed to be final
+        PerformanceService.initialize(this.link.getEnv());
         this.iFrame.load(this.link.getUrl(), {
           title: 'Click To Pay checkout'
         });
@@ -8815,6 +8973,18 @@
           }
         });
       }
+      /**
+       * Send customer data to iframe using the established trigger pattern
+       *
+       * @param {CustomerData} customerData - Customer data to inject
+       */
+    }, {
+      key: "injectCustomerData",
+      value: function injectCustomerData(customerData) {
+        this.trigger.push(TRIGGER$1.INJECT_CUSTOMER_DATA, {
+          customer: customerData
+        });
+      }
     }]);
   }();
 
@@ -9003,11 +9173,11 @@
       _this.service_id = service_id;
       _this.public_key_or_access_token = public_key_or_access_token;
       _this.meta = meta;
+      _this.holdingForCustomerData = false;
       return _this;
     }
     /**
      * The final method after configuring the SRC to start the load process of Click To Pay checkout
-     *
      */
     _inherits(ClickToPay, _SRC);
     return _createClass(ClickToPay, [{
@@ -9015,62 +9185,53 @@
       value: function load() {
         if (this.provider) return;
         this.meta.customizations = this.style;
+        this.holdingForCustomerData = !!this.meta.hold_for_customer_data;
         this.provider = new ClickToPaySRC(this.iframe_selector, this.service_id, this.public_key_or_access_token, this.meta, this.eventEmitter, this.autoResize, this.env, this.alias);
         this.provider.load();
       }
-    }]);
-  }(SRC);
-
-  /**
-   * Interface for classes that represent a trigger data.
-   * @interface ITriggerData
-   *
-   * @param {string} [configuration_token]
-   * @param {string} [tab_number]
-   * @param {string} [elements]
-   * @param {string} [form_values]
-   * */
-  /**
-   * List of available triggers
-   *
-   * @type {object}
-   * @param {string} SUBMIT_FORM=submit_form
-   * @param {string} CHANGE_TAB=tab
-   * @param {string} HIDE_ELEMENTS=hide_elements
-   * @param {string} SHOW_ELEMENTS=show_elements
-   * @param {string} REFRESH_CHECKOUT=refresh_checkout
-   * @param {string} UPDATE_FORM_VALUES=update_form_values
-   * @param {string} INIT_CHECKOUT=init_checkout
-   */
-  var TRIGGER$1 = {
-    SUBMIT_FORM: 'submit_form',
-    CHANGE_TAB: 'tab',
-    HIDE_ELEMENTS: 'hide_elements',
-    SHOW_ELEMENTS: 'show_elements',
-    REFRESH_CHECKOUT: 'refresh_checkout',
-    UPDATE_FORM_VALUES: 'update_form_values',
-    INIT_CHECKOUT: 'init_checkout'
-  };
-  var Trigger = /*#__PURE__*/function () {
-    function Trigger(iFrame) {
-      _classCallCheck(this, Trigger);
-      this.iFrame = iFrame;
-    }
-    return _createClass(Trigger, [{
-      key: "push",
-      value: function push(triggerName) {
-        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        if (!this.iFrame.isExist()) return;
-        if (ObjectHelper.values(TRIGGER$1).indexOf(triggerName) === -1) console.warn('unsupported trigger type');
-        var body = {
-          trigger: triggerName,
-          destination: 'widget.paydock',
-          data: data
-        };
-        this.iFrame.getElement().contentWindow.postMessage(JSON.stringify(body), '*');
+      /**
+       * Inject customer data after widget initialization via postMessage
+       *
+       * @param {Customer} customerData - Customer data to inject
+       * @throws {Error} When customer data is invalid or widget is not ready
+       * @example
+       * widget.injectCustomerData({
+       *     email: 'user@example.com',
+       *     first_name: 'John',
+       *     last_name: 'Doe'
+       * });
+       */
+    }, {
+      key: "injectCustomerData",
+      value: function injectCustomerData(customerData) {
+        if (!this.validateCustomerData(customerData)) {
+          throw new Error('Invalid customer data format. Must include at least email or phone.');
+        }
+        if (!this.provider) {
+          throw new Error('Widget not initialized. Call load() first.');
+        }
+        this.provider.injectCustomerData(customerData);
+      }
+      /**
+       * Validate customer data format
+       *
+       * @private
+       * @param {Customer} customerData - Customer data to validate
+       * @returns {boolean} True if valid
+       */
+    }, {
+      key: "validateCustomerData",
+      value: function validateCustomerData(customerData) {
+        if (!customerData || _typeof$1(customerData) !== 'object') {
+          return false;
+        }
+        // Check if at least email or phone is provided
+        var hasEmail = customerData.email && typeof customerData.email === 'string';
+        var hasPhone = customerData.phone && _typeof$1(customerData.phone) === 'object' && customerData.phone.phone && typeof customerData.phone.phone === 'string';
+        return hasEmail || hasPhone;
       }
     }]);
-  }();
+  }(SRC);
 
   var VAULT_DISPLAY_EVENT;
   (function (VAULT_DISPLAY_EVENT) {
@@ -15689,6 +15850,30 @@
     }]);
   }(HtmlMultiWidget);
 
+  var Spinner = /*#__PURE__*/function () {
+    function Spinner() {
+      _classCallCheck(this, Spinner);
+    }
+    return _createClass(Spinner, null, [{
+      key: "getSpinnerElement",
+      value: function getSpinnerElement() {
+        return document.getElementById('spinner');
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        var spinner = this.getSpinnerElement();
+        spinner === null || spinner === void 0 ? void 0 : spinner.classList.remove('spinner-wrapper--hidden');
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        var spinner = this.getSpinnerElement();
+        spinner === null || spinner === void 0 ? void 0 : spinner.classList.add('spinner-wrapper--hidden');
+      }
+    }]);
+  }();
+
   var InstructionModule$1 = /*#__PURE__*/function () {
     function InstructionModule() {
       _classCallCheck(this, InstructionModule);
@@ -15754,30 +15939,6 @@
     };
   }
 
-  var Spinner = /*#__PURE__*/function () {
-    function Spinner() {
-      _classCallCheck(this, Spinner);
-    }
-    return _createClass(Spinner, null, [{
-      key: "getSpinnerElement",
-      value: function getSpinnerElement() {
-        return document.getElementById('spinner');
-      }
-    }, {
-      key: "show",
-      value: function show() {
-        var spinner = this.getSpinnerElement();
-        spinner === null || spinner === void 0 ? void 0 : spinner.classList.remove('spinner-wrapper--hidden');
-      }
-    }, {
-      key: "hide",
-      value: function hide() {
-        var spinner = this.getSpinnerElement();
-        spinner === null || spinner === void 0 ? void 0 : spinner.classList.add('spinner-wrapper--hidden');
-      }
-    }]);
-  }();
-
   var SessionHelper = /*#__PURE__*/function () {
     function SessionHelper() {
       _classCallCheck(this, SessionHelper);
@@ -16081,6 +16242,95 @@
   }(InstructionHandler);
   InstructionBankAccountFormShow = __decorate([Instruction('instruction.bank_account_form.show')], InstructionBankAccountFormShow);
 
+  var toByteArray_1 = toByteArray;
+  var revLookup = [];
+  var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array;
+
+  var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  for (var i$2 = 0, len = code.length; i$2 < len; ++i$2) {
+    revLookup[code.charCodeAt(i$2)] = i$2;
+  }
+
+  // Support decoding URL-safe base64 strings, as Node.js does.
+  // See: https://en.wikipedia.org/wiki/Base64#URL_applications
+  revLookup['-'.charCodeAt(0)] = 62;
+  revLookup['_'.charCodeAt(0)] = 63;
+
+  function getLens (b64) {
+    var len = b64.length;
+
+    if (len % 4 > 0) {
+      throw new Error('Invalid string. Length must be a multiple of 4')
+    }
+
+    // Trim off extra bytes after placeholder bytes are found
+    // See: https://github.com/beatgammit/base64-js/issues/42
+    var validLen = b64.indexOf('=');
+    if (validLen === -1) validLen = len;
+
+    var placeHoldersLen = validLen === len
+      ? 0
+      : 4 - (validLen % 4);
+
+    return [validLen, placeHoldersLen]
+  }
+
+  function _byteLength (b64, validLen, placeHoldersLen) {
+    return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
+  }
+
+  function toByteArray (b64) {
+    var tmp;
+    var lens = getLens(b64);
+    var validLen = lens[0];
+    var placeHoldersLen = lens[1];
+
+    var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen));
+
+    var curByte = 0;
+
+    // if there are placeholders, only get up to the last complete 4 chars
+    var len = placeHoldersLen > 0
+      ? validLen - 4
+      : validLen;
+
+    var i;
+    for (i = 0; i < len; i += 4) {
+      tmp =
+        (revLookup[b64.charCodeAt(i)] << 18) |
+        (revLookup[b64.charCodeAt(i + 1)] << 12) |
+        (revLookup[b64.charCodeAt(i + 2)] << 6) |
+        revLookup[b64.charCodeAt(i + 3)];
+      arr[curByte++] = (tmp >> 16) & 0xFF;
+      arr[curByte++] = (tmp >> 8) & 0xFF;
+      arr[curByte++] = tmp & 0xFF;
+    }
+
+    if (placeHoldersLen === 2) {
+      tmp =
+        (revLookup[b64.charCodeAt(i)] << 2) |
+        (revLookup[b64.charCodeAt(i + 1)] >> 4);
+      arr[curByte++] = tmp & 0xFF;
+    }
+
+    if (placeHoldersLen === 1) {
+      tmp =
+        (revLookup[b64.charCodeAt(i)] << 10) |
+        (revLookup[b64.charCodeAt(i + 1)] << 4) |
+        (revLookup[b64.charCodeAt(i + 2)] >> 2);
+      arr[curByte++] = (tmp >> 8) & 0xFF;
+      arr[curByte++] = tmp & 0xFF;
+    }
+
+    return arr
+  }
+
+  var TOKEN_FORMAT;
+  (function (TOKEN_FORMAT) {
+    TOKEN_FORMAT["HTML"] = "html";
+    TOKEN_FORMAT["URL"] = "url";
+    TOKEN_FORMAT["STANDALONE_3DS"] = "standalone_3ds";
+  })(TOKEN_FORMAT || (TOKEN_FORMAT = {}));
   var InstructionCanvas3dsShow = /*#__PURE__*/function (_InstructionHandler) {
     function InstructionCanvas3dsShow() {
       _classCallCheck(this, InstructionCanvas3dsShow);
@@ -16091,12 +16341,25 @@
       key: "handle",
       value: function handle(context) {
         var _this = this;
+        var token = this.decodeBase64Token(context.payload._3ds_token);
         var canvas = new Canvas3ds(this.formSelector, context.payload._3ds_token);
         canvas.setEnv(this.getEnv(context.instruction_token));
-        canvas.on('chargeAuth', function (event) {
+        canvas.on('chargeAuth', function () {
           return Spinner.show();
         });
-        canvas.on('chargeAuthSuccess', function (event) {
+        canvas.on('chargeAuthChallenge', function () {
+          if (token.format === TOKEN_FORMAT.STANDALONE_3DS) {
+            Spinner.hide();
+            _this.observeIframeAndResize();
+          }
+        });
+        canvas.on('chargeAuthDecoupled', function () {
+          if (token.format === TOKEN_FORMAT.STANDALONE_3DS) {
+            Spinner.hide();
+            _this.observeIframeAndResize();
+          }
+        });
+        canvas.on('chargeAuthSuccess', function () {
           var _a;
           (_a = _this.checkoutWidget) === null || _a === void 0 ? void 0 : _a.fetchInstruction();
           _this.api.checkout().callback({
@@ -16110,8 +16373,9 @@
           })["catch"](function (response) {
             return console.error('callback.child_widget.status - chargeAuthSuccess: error', response);
           });
+          Spinner.show();
         });
-        canvas.on('chargeAuthReject', function (event) {
+        canvas.on('chargeAuthReject', function () {
           var _a;
           // **TODO add interface for chargeAuthReject event **//
           (_a = _this.checkoutWidget) === null || _a === void 0 ? void 0 : _a.fetchInstruction();
@@ -16126,6 +16390,7 @@
           })["catch"](function (response) {
             return console.error('callback.child_widget.status - chargeAuthReject: error', response);
           });
+          Spinner.show();
         });
         canvas.on('error', function (event) {
           var _a;
@@ -16142,15 +16407,60 @@
           })["catch"](function (response) {
             return console.error('callback.child_widget.status - errorEvent: error', response);
           });
+          Spinner.show();
         });
         canvas.load();
-        Spinner.hide();
+        if (token.format !== TOKEN_FORMAT.STANDALONE_3DS) {
+          Spinner.hide();
+        }
       }
     }, {
       key: "destroy",
       value: function destroy() {
         document.querySelector(this.formSelector).innerHTML = '';
       }
+    }, {
+      key: "decodeBase64Token",
+      value: function decodeBase64Token(token) {
+        try {
+          var base64 = token.replace(/-/g, '+').replace(/_/g, '/').padEnd(Math.ceil(token.length / 4) * 4, '=');
+          var bytes = toByteArray_1(base64);
+          var json = new TextDecoder().decode(bytes);
+          return JSON.parse(json);
+        } catch (err) {
+          console.error('Failed to decode _3ds_token:', err);
+          throw err;
+        }
+      }
+    }, {
+      key: "observeIframeAndResize",
+      value: function observeIframeAndResize() {
+        var outer = document.querySelector('#standaloneWidget');
+        if (outer) {
+          outer.style.display = 'flex';
+          outer.style.justifyContent = 'center';
+        }
+        var container = document.querySelector('#paydock_authorization_iframe');
+        if (!container) {
+          console.warn('Container not found');
+          return;
+        }
+        var observer = new MutationObserver(function () {
+          var iframe = container.querySelector('iframe');
+          if (iframe) {
+            iframe.style.width = '100%';
+            iframe.style.height = '500px';
+            iframe.style.border = 'none';
+            iframe.style.display = 'block';
+            console.info('3DS iframe resized', iframe);
+            observer.disconnect();
+          }
+        });
+        observer.observe(container, {
+          childList: true,
+          subtree: true
+        });
+      }
     }]);
   }(InstructionHandler);
   InstructionCanvas3dsShow = __decorate([Instruction('instruction.canvas_3ds_form.show')], InstructionCanvas3dsShow);
@@ -17164,7 +17474,7 @@
       key: "isTimeoutInstruction",
       value: function isTimeoutInstruction(response) {
         var _a, _b;
-        return ((_a = response.payload) === null || _a === void 0 ? void 0 : _a.status) === 'expired' || ((_b = response.paload) === null || _b === void 0 ? void 0 : _b.title) === 'Session expired';
+        return ((_a = response.payload) === null || _a === void 0 ? void 0 : _a.status) === 'expired' || ((_b = response.payload) === null || _b === void 0 ? void 0 : _b.title) === 'Session expired';
       }
     }, {
       key: "handleInstruction",