paymob-pixel-alpha 1.1.4 → 1.1.6

package/main.js

@@ -18914,7 +18914,7 @@ function IframeCard(props) {
         } else {
           handleCardSubmit({
             data,
-            cardHolderName,
+            cardHolderName: cardHolderName || 'n/a',
             paymentToken: hasOmanNetIntegration && isOmanNetCard ? subType.paymentToken : paymentToken,
             subType: hasOmanNetIntegration && isOmanNetCard ? subType.type : 'CARD',
             saveCard,
@@ -19987,7 +19987,6 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   const [errorMessage, setErrorMessage] = (0,react.useState)('');
   const iframeRef = (0,react.useRef)(null);
   const [errors, setErrors] = (0,react.useState)({});
-  const iframe = document.getElementById('iFrame');
   const [isIframeLoaded, setIsIframeLoaded] = (0,react.useState)(false);
   const [showDeleteCardModal, setShowDeleteCardModal] = (0,react.useState)(false);
   const [selectedDeleteCard, setSelectedDeleteCard] = (0,react.useState)();
@@ -20009,13 +20008,15 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   const shouldDisablePayBtn = showCvvInput ? loading || (isAmexCardSelected ? selectedCardCvvLength !== constants_AMEX_CVV_LENGTH : selectedCardCvvLength !== constants_CVV_LENGTH) : !selectedCardId;
   (0,react.useEffect)(() => {
     const handleDataFromIframe = event => {
-      var _event$data, _event$data2, _event$data3;
+      var _iframeRef$current, _event$data, _event$data2, _event$data3;
       if (!event.data) return;
       if (!event.data.type) return;
+      if (event.source !== ((_iframeRef$current = iframeRef.current) == null ? void 0 : _iframeRef$current.contentWindow)) return;
       if (event.data.shouldFocusOnCardName) {
-        const cardNameField = document.querySelector(`input[name=name]`);
+        var _iframeRef$current2;
+        const cardNameField = (_iframeRef$current2 = iframeRef.current) == null || (_iframeRef$current2 = _iframeRef$current2.nextElementSibling) == null ? void 0 : _iframeRef$current2.querySelector(`input[name=name]`);
         if (cardNameField !== null) {
-          cardNameField.focus();
+          cardNameField == null || cardNameField.focus();
         }
       }
       if (event.data.iframeCardHight) {
@@ -20052,10 +20053,10 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
       requiresOTP,
       isOTPResponse
     }) => {
-      var _res$data, _res$data2, _res$data3;
+      var _iframeRef$current3, _res$data, _res$data2, _res$data3;
       setShouldSubmitData(false);
       setSendOTPLoading(false);
-      const cardHolderInput = document.getElementById('name');
+      const cardHolderInput = (_iframeRef$current3 = iframeRef.current) == null || (_iframeRef$current3 = _iframeRef$current3.nextElementSibling) == null ? void 0 : _iframeRef$current3.querySelector(`input[name=name]`);
       if (cardHolderInput) {
         setTimeout(() => cardHolderInput.disabled = false, 1000);
       }
@@ -20127,10 +20128,11 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     };
   }, [isCardValid, shouldDisablePayBtn, showCardModal, savedCards == null ? void 0 : savedCards.length]);
   (0,react.useEffect)(() => {
-    if (iframe && shouldSubmitData) {
+    if (iframeRef.current && shouldSubmitData) {
       const handlePay = async () => {
+        var _iframeRef$current4;
         if (loading) return;
-        const cardHolderInput = document.getElementById('name');
+        const cardHolderInput = (_iframeRef$current4 = iframeRef.current) == null || (_iframeRef$current4 = _iframeRef$current4.nextElementSibling) == null ? void 0 : _iframeRef$current4.querySelector(`input[name=name]`);
         if (cardHolderInput) {
           cardHolderInput.disabled = true;
         }
@@ -20148,7 +20150,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
       };
       handlePay();
     }
-  }, [cardHolderName, saveCard, shouldSubmitData, iframe]);
+  }, [cardHolderName, saveCard, shouldSubmitData, iframeRef.current]);
   (0,react.useEffect)(() => {
     if (isIframeLoaded) {
       sendCardData();
@@ -20157,8 +20159,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   (0,react.useEffect)(() => {
     let resizeObserver = null;
     if (isIframeLoaded) {
-      var _iframe$contentWindow;
-      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
+      var _iframeRef$current5, _iframeRef$current6;
+      (_iframeRef$current5 = iframeRef.current) == null || (_iframeRef$current5 = _iframeRef$current5.contentWindow) == null || _iframeRef$current5.postMessage({
         type: 'customStyles',
         payload: {
           styling: customStyle,
@@ -20167,7 +20169,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
           }
         }
       }, '*');
-      const nextElement = iframe.nextElementSibling;
+      const nextElement = (_iframeRef$current6 = iframeRef.current) == null ? void 0 : _iframeRef$current6.nextElementSibling;
       resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
           const width = Math.floor(entry.contentRect.width - 0.5);
@@ -20176,7 +20178,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
           }
         }
       });
-      resizeObserver.observe(iframe);
+      iframeRef.current && resizeObserver.observe(iframeRef.current);
     }
     return () => {
       var _resizeObserver;
@@ -20184,8 +20186,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     };
   }, [isIframeLoaded, iframeRef.current]);
   (0,react.useEffect)(() => {
-    var _iframe$contentWindow2;
-    iframe == null || (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
+    var _iframeRef$current7;
+    (_iframeRef$current7 = iframeRef.current) == null || (_iframeRef$current7 = _iframeRef$current7.contentWindow) == null || _iframeRef$current7.postMessage({
       type: 'cardHolderError',
       payload: {
         error: errors['name']
@@ -20208,12 +20210,12 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   }));
   async function handleGenerateToken() {
     return new Promise((resolve, reject) => {
-      var _iframe$contentWindow3;
+      var _iframeRef$current8;
       if (loading || !isCardValid || isLoading) {
         return reject();
       }
       tokenizationResolve.current = resolve;
-      (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+      (_iframeRef$current8 = iframeRef.current) == null || (_iframeRef$current8 = _iframeRef$current8.contentWindow) == null || _iframeRef$current8.postMessage({
         type: 'tokenizeCard',
         payload: {
           publicKey,
@@ -20225,8 +20227,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   }
   ;
   const sendCardData = shouldSubmitData => {
-    var _iframe$contentWindow4, _payment$subType, _payment$subType2;
-    (_iframe$contentWindow4 = iframe.contentWindow) == null || _iframe$contentWindow4.postMessage({
+    var _iframeRef$current9, _payment$subType, _payment$subType2;
+    (_iframeRef$current9 = iframeRef.current) == null || (_iframeRef$current9 = _iframeRef$current9.contentWindow) == null || _iframeRef$current9.postMessage({
       type: 'cardData',
       payload: {
         paymentToken: payment == null ? void 0 : payment.token,
@@ -20247,8 +20249,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     setShouldSubmitData(true);
   };
   const handleFocusToPrevInput = () => {
-    var _iframe$contentWindow5;
-    (_iframe$contentWindow5 = iframe.contentWindow) == null || _iframe$contentWindow5.postMessage({
+    var _iframeRef$current10;
+    (_iframeRef$current10 = iframeRef.current) == null || (_iframeRef$current10 = _iframeRef$current10.contentWindow) == null || _iframeRef$current10.postMessage({
       type: 'setPrevFocus',
       payload: {
         shouldFocusOnCVV: true
@@ -20333,9 +20335,9 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     }
   };
   const handleOTPSubmit = async otp => {
-    var _iframe$contentWindow6, _payment$subType3;
+    var _iframeRef$current11, _payment$subType3;
     setSendOTPLoading(true);
-    (_iframe$contentWindow6 = iframe.contentWindow) == null || _iframe$contentWindow6.postMessage({
+    (_iframeRef$current11 = iframeRef.current) == null || (_iframeRef$current11 = _iframeRef$current11.contentWindow) == null || _iframeRef$current11.postMessage({
       type: 'otpData',
       payload: {
         paymentToken: payment.token,
@@ -20453,7 +20455,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             }), /*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
               height: 37
             })]
-          }), /*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
+          }), !hideCardHolderName && /*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
             height: 37
           })]
         }), /*#__PURE__*/(0,jsx_runtime.jsx)("iframe", {
@@ -31679,7 +31681,8 @@ class Pixel {
     });
     this._baseURL = this.updateAPIBaseURL();
     this._paymentsRef = /*#__PURE__*/react.createRef();
-    Pixel._instance = this;
+    Pixel._instances[options.elementId] = this;
+    Pixel._lastInstanceId = options.elementId;
     if (this._options['clientSecret'] && this._options['paymentMethods']) {
       this._integrationType = 'directPayment';
       this.getData();
@@ -31758,19 +31761,31 @@ class Pixel {
       this._options.cardValidationChanged(isValid);
     }
   }
-  static async updateIntentionData() {
-    var _Pixel$_instance;
-    if (!((_Pixel$_instance = Pixel._instance) != null && (_Pixel$_instance = _Pixel$_instance._paymentsRef) != null && (_Pixel$_instance = _Pixel$_instance.current) != null && _Pixel$_instance.getData)) {
+  static getInstance(instanceId, callingMethodName) {
+    if (Object.keys(this._instances).length > 1 && !instanceId) {
+      throw new Error(`Multiple Pixel instances detected. Please provide an instance ID for the ${callingMethodName || 'requested'} method.`);
+    }
+    const targetId = instanceId || this._lastInstanceId;
+    if (!targetId || !this._instances[targetId]) {
+      throw new Error('Invalid ID or Pixel not initialized');
+    }
+    return this._instances[targetId];
+  }
+  static async updateIntentionData(instanceId) {
+    var _instance$_paymentsRe;
+    const instance = this.getInstance(instanceId, 'updateIntentionData');
+    if (!((_instance$_paymentsRe = instance._paymentsRef) != null && (_instance$_paymentsRe = _instance$_paymentsRe.current) != null && _instance$_paymentsRe.getData)) {
       throw new Error('Pixel not initialized');
     }
-    return await Pixel._instance._paymentsRef.current.getData();
+    return await instance._paymentsRef.current.getData();
   }
-  static async submit() {
-    var _Pixel$_instance2;
-    if (!((_Pixel$_instance2 = Pixel._instance) != null && (_Pixel$_instance2 = _Pixel$_instance2._paymentsRef) != null && (_Pixel$_instance2 = _Pixel$_instance2.current) != null && _Pixel$_instance2.handleGenerateToken)) {
+  static async submit(instanceId) {
+    var _instance$_paymentsRe2;
+    const instance = this.getInstance(instanceId, 'submit');
+    if (!((_instance$_paymentsRe2 = instance._paymentsRef) != null && (_instance$_paymentsRe2 = _instance$_paymentsRe2.current) != null && _instance$_paymentsRe2.handleGenerateToken)) {
       throw new Error('Pixel not initialized');
     }
-    return await Pixel._instance._paymentsRef.current.handleGenerateToken();
+    return await instance._paymentsRef.current.handleGenerateToken();
   }
   render() {
     const container = document.getElementById(this._options['elementId']);
@@ -31818,7 +31833,8 @@ class Pixel {
   }
 }
 _Pixel = Pixel;
-Pixel._instance = null;
+Pixel._instances = {};
+Pixel._lastInstanceId = null;
 window.Pixel = Pixel;
 /* harmony default export */ const pixel = ((/* unused pure expression or super */ null && (Pixel)));
 ;// CONCATENATED MODULE: ./src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paymob-pixel-alpha",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
   "license": "MIT",