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

package/README.md

@@ -2911,6 +2911,7 @@ List of available triggers
 | REFRESH_CHECKOUT | <code>string</code> | <code>&quot;refresh_checkout&quot;</code> | 
 | UPDATE_FORM_VALUES | <code>string</code> | <code>&quot;update_form_values&quot;</code> | 
 | INIT_CHECKOUT | <code>string</code> | <code>&quot;init_checkout&quot;</code> | 
+| INJECT_CUSTOMER_DATA | <code>string</code> | <code>&quot;inject_customer_data&quot;</code> | 
 
 
 ## Payment sources widget
@@ -8104,6 +8105,115 @@ src.setStyles({
 });
 ```
 
+## Configurations for background loading and improved User Load times
+
+### hold_for_customer_data
+When set to `true`, this flag allows you to load the Click to Pay iframe in the background while collecting customer information. This improves the perceived performance by starting the iframe load process early.
+
+```javascript
+const clickToPay = new cba.ClickToPay("#checkoutIframe", SERVICE_ID, PUBLIC_KEY, {
+  hold_for_customer_data: true,
+  dpa_config: {
+    dpa_id: DPA_ID,
+    // ... other config
+  }
+});
+```
+
+### injectCustomerData(customer)
+Once you have collected the customer information, use this method to provide it to the Click to Pay iframe. This will trigger the checkout to continue.
+
+```javascript
+clickToPay.injectCustomerData({
+  email: "customer@example.com",
+  first_name: "John",
+  last_name: "Doe",
+  phone: "+61400123456"  // Include country code
+});
+```
+
+### Background Loading Example
+Here's a complete example showing how to implement background loading while collecting customer information:
+
+```javascript
+// 1. Initialize with hold_for_customer_data
+const clickToPay = new cba.ClickToPay("#checkoutIframe", SERVICE_ID, PUBLIC_KEY, {
+  hold_for_customer_data: true,
+  dpa_config: {
+    dpa_id: DPA_ID,
+    // ... other config
+  }
+});
+
+// Hide checkout and show form initially
+document.getElementById("checkoutIframe").style.display = 'none';
+document.getElementById("customerForm").style.display = 'block';
+document.getElementById("loader").style.display = 'none';
+
+// 2. Setup event handlers
+clickToPay.on('iframeLoaded', () => {
+  // Iframe is now loaded
+});
+
+clickToPay.on('checkoutReady', () => {
+  // Hide loader, show checkout
+  document.getElementById("loader").style.display = 'none';
+  document.getElementById("checkoutIframe").style.display = 'block';
+  clickToPay.showCheckout();
+});
+
+// 3. Start loading in background
+clickToPay.load();
+
+// 4. Handle form submission
+document.getElementById("submitButton").addEventListener("click", (e) => {
+  e.preventDefault();
+
+  const customer = {
+    email: document.getElementById("email").value.trim(),
+    first_name: document.getElementById("firstName").value.trim(),
+    last_name: document.getElementById("lastName").value.trim(),
+    phone: document.getElementById("phone").value.trim()
+  };
+
+  // Hide form, show loader
+  document.getElementById("customerForm").style.display = "none";
+  document.getElementById("loader").style.display = "flex";
+
+  try {
+    // Inject customer data to continue checkout
+    clickToPay.injectCustomerData(customer);
+  } catch (error) {
+    // Show form again on error
+    document.getElementById("customerForm").style.display = "block";
+    document.getElementById("loader").style.display = "none";
+    alert("An error occurred. Please try again.");
+  }
+});
+```
+
+#### HTML Structure
+Here's the required HTML structure for the background loading example:
+
+```html
+<!-- Click to Pay iframe container -->
+<div id="checkoutIframe"></div>
+
+<!-- Customer information form -->
+<form id="customerForm">
+  <input type="email" id="email" placeholder="Email" required>
+  <input type="text" id="firstName" placeholder="First Name" required>
+  <input type="text" id="lastName" placeholder="Last Name" required>
+  <input type="tel" id="phone" placeholder="Phone (with country code)" required>
+  <button type="submit" id="submitButton">Continue to Checkout</button>
+</form>
+
+<!-- Loading indicator -->
+<div id="loader" style="display: none;">
+  Loading...
+</div>
+```
+
 ## Classes
 
 <dl>
@@ -8159,7 +8269,7 @@ Interface of data used for the Mastercard Checkout. For further information refe
 | [checkout_experience] | <code>string</code> | Checkout experience type, either 'WITHIN_CHECKOUT' or 'PAYMENT_SETTINGS'. |
 | [services] | <code>string</code> | Services offered, such as 'INLINE_CHECKOUT' or 'INLINE_INSTALLMENTS'. |
 | [dpa_transaction_options] | <code>object</code> | Object that stores options for creating a transaction with DPA. |
-| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA’s preferred locale, example en_US. |
+| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA's preferred locale, example en_US. |
 | [dpa_transaction_options.dpa_accepted_billing_countries] | <code>Array.&lt;string&gt;</code> | List of accepted billing countries for DPA in ISO 3166-1 alpha-2 format. |
 | [dpa_transaction_options.dpa_billing_preference] | <code>string</code> | Billing preferences for DPA, options are 'FULL', 'POSTAL_COUNTRY', 'NONE'. |
 | [dpa_transaction_options.payment_options] | <code>Array.&lt;object&gt;</code> | Payment options included in the transaction. |
@@ -8184,6 +8294,12 @@ Interface of data used for the Mastercard Checkout. For further information refe
 | [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
 | [customer.phone.phone] | <code>string</code> | Customer phone number. |
 | [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |
+| [dpa_config] | <code>object</code> | Raw DPA configuration object for performance optimization. Skips API call when provided. |
+| [dpa_config.dpa_id] | <code>string</code> | DPA identifier. |
+| [dpa_config.dpa_name] | <code>string</code> | DPA name. |
+| [dpa_config.dpa_supported_card_schemes] | <code>Array.&lt;string&gt;</code> | List of supported card schemes: 'MASTERCARD', 'VISA', 'AMEX', 'DISCOVER'. |
+| [dpa_config.mode] | <code>string</code> | DPA mode, either 'sandbox' or 'live'. |
+| [hold_for_customer_data] | <code>boolean</code> | Flag to hold initialization for customer data injection. Enables background initialization. |
 
 <a name="EventData" id="EventData" href="#EventData">&nbsp;</a>
 
@@ -8258,6 +8374,7 @@ Class ClickToPay include methods for interacting with the ClickToPay checkout an
 * [ClickToPay](#ClickToPay) ⇐ <code>SRC</code>
     * [new ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)](#new_ClickToPay_new)
     * [.load()](#ClickToPay+load)
+    * [.injectCustomerData(customerData)](#ClickToPay+injectCustomerData)
     * [.setStyles(fields)](#SRC+setStyles)
     * [.setEnv(env, [alias])](#SRC+setEnv)
     * [.getEnv()](#SRC+getEnv)
@@ -8288,6 +8405,29 @@ var mastercardSRC = new ClickToPay('#checkoutIframe', 'service_id', 'public_key'
 The final method after configuring the SRC to start the load process of Click To Pay checkout
 
 **Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+<a name="ClickToPay+injectCustomerData" id="ClickToPay+injectCustomerData" href="#ClickToPay+injectCustomerData">&nbsp;</a>
+
+### clickToPay.injectCustomerData(customerData)
+Inject customer data after widget initialization via postMessage
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Throws**:
+
+- <code>Error</code> When customer data is invalid or widget is not ready
+
+
+| Param | Type | Description |
+| --- | --- | --- |
+| customerData | <code>Customer</code> | Customer data to inject |
+
+**Example**  
+```js
+widget.injectCustomerData({
+    email: 'user@example.com',
+    first_name: 'John',
+    last_name: 'Doe'
+});
+```
 <a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>
 
 ### clickToPay.setStyles(fields)

package/bundles/index.cjs

@@ -954,7 +954,7 @@ SDK.headerKeys = Object.freeze({
   version: 'x-sdk-version',
   type: 'x-sdk-type'
 });
-SDK._version = 'v1.127.0-beta';
+SDK._version = 'v1.127.1-beta';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8703,6 +8703,161 @@ var STYLE = {
   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);
@@ -8725,6 +8880,7 @@ var ClickToPaySRC = /*#__PURE__*/function () {
     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();
   }
@@ -8760,6 +8916,8 @@ var ClickToPaySRC = /*#__PURE__*/function () {
     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'
       });
@@ -8811,6 +8969,18 @@ var ClickToPaySRC = /*#__PURE__*/function () {
         }
       });
     }
+    /**
+     * 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
+      });
+    }
   }]);
 }();
 
@@ -8999,11 +9169,11 @@ var ClickToPay = /*#__PURE__*/function (_SRC) {
     _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, [{
@@ -9011,62 +9181,53 @@ var ClickToPay = /*#__PURE__*/function (_SRC) {
     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) {
@@ -15685,6 +15846,30 @@ var HtmlWidget = /*#__PURE__*/function (_HtmlMultiWidget) {
   }]);
 }(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);
@@ -15750,30 +15935,6 @@ function Instruction(instruction) {
   };
 }
 
-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);
@@ -17309,7 +17470,7 @@ var Checkout = /*#__PURE__*/function () {
     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",

package/bundles/index.cjs.d.ts

@@ -1243,6 +1243,7 @@ interface ITriggerData {
  * @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
  */
 declare const TRIGGER: {
     SUBMIT_FORM: string;
@@ -1252,6 +1253,7 @@ declare const TRIGGER: {
     REFRESH_CHECKOUT: string;
     UPDATE_FORM_VALUES: string;
     INIT_CHECKOUT: string;
+    INJECT_CUSTOMER_DATA: string;
 };
 declare class Trigger {
     protected iFrame: IFrame;
@@ -2899,6 +2901,12 @@ interface Customer {
     first_name?: string;
     last_name?: string;
 }
+interface DpaConfig {
+    dpa_id: string;
+    dpa_name: string;
+    dpa_supported_card_schemes: ('MASTERCARD' | 'VISA' | 'AMEX' | 'DISCOVER')[];
+    mode: 'sandbox' | 'live';
+}
 interface IClickToPayMeta extends IBaseSRCMeta {
     dpa_data?: IBaseSRCMeta['dpa_data'] & {
         dpa_address?: string;
@@ -2927,6 +2935,8 @@ interface IClickToPayMeta extends IBaseSRCMeta {
     customer?: Customer;
     unaccepted_card_type?: 'CREDIT' | 'DEBIT';
     recognition_token?: string;
+    dpa_config?: DpaConfig;
+    hold_for_customer_data?: boolean;
 }
 type MASTERCARD_DPA_SHIPPING_BILLING_PREFERENCE = 'FULL' | 'POSTAL_COUNTRY' | 'NONE';
 type MASTERCARD_ORDER_TYPE = 'SPLIT_SHIPMENT' | 'PREFERRED_CARD';
@@ -3077,6 +3087,8 @@ declare class ApiInternal extends ApiBase {
     gateway(): ApiGatewayInternal;
 }
 
+type CustomerData = Customer;
+
 interface SRCProvider {
     load(): void;
     getEnv(): string;
@@ -3086,6 +3098,7 @@ interface SRCProvider {
     showCheckout?(): void;
     reload(): void;
     useAutoResize?(): void;
+    injectCustomerData(customerData: CustomerData): void;
 }
 
 declare abstract class SRC {
@@ -3189,12 +3202,33 @@ declare class ClickToPay extends SRC {
     protected service_id: string;
     protected public_key_or_access_token: string;
     protected meta: IClickToPayMeta;
+    protected holdingForCustomerData: boolean;
     /** @constructs */ constructor(iframe_selector: string, service_id: string, public_key_or_access_token: string, meta: IClickToPayMeta);
     /**
      * The final method after configuring the SRC to start the load process of Click To Pay checkout
-     *
      */
     load(): void;
+    /**
+     * 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'
+     * });
+     */
+    injectCustomerData(customerData: Customer): void;
+    /**
+     * Validate customer data format
+     *
+     * @private
+     * @param {Customer} customerData - Customer data to validate
+     * @returns {boolean} True if valid
+     */
+    private validateCustomerData;
 }
 
 declare class VaultDisplayIframeEvent extends IFrameEvent {