paymob-pixel-alpha 1.1.58 → 1.1.60

package/main.js

@@ -82367,6 +82367,7 @@ async function fetchPayments(publicKey, clientSecret, paymentMethods, baseUrl) {
         KnetCurrency: item.target_currency,
         KnetEquivalentAmountCents: item.converted_amount_cents,
         KnetMinTransactionAmount: item.minimum_transaction_amount,
+        merchantIdentifier: item.merchant_identifier,
         paymentMethodType,
         useCvv,
         subType
@@ -82640,83 +82641,6 @@ const ListView = _ref => {
   });
 };
 /* harmony default export */ const List_ListView = ((/* unused pure expression or super */ null && (ListView)));
-;// ./src/utils/ShadowWrapper.tsx
-
-
-
-
-const ShadowWrapper = ({
-  elementId,
-  children
-}) => {
-  const [shadowRoot, setShadowRoot] = (0,react.useState)(null);
-  const [error, setError] = (0,react.useState)(null);
-  (0,react.useEffect)(() => {
-    if (!document.getElementById(elementId)) return;
-    document.getElementById(elementId).innerHTML = '';
-    const container = document.getElementById(elementId).appendChild(document.createElement('div'));
-    if (!('attachShadow' in Element.prototype)) {
-      setError('Shadow DOM is not supported in this browser');
-      return;
-    }
-    try {
-      let shadow = container.shadowRoot;
-      if (!shadow) {
-        shadow = container.attachShadow({
-          mode: 'open'
-        });
-        environment.PIXEL_CSS_LINKS.forEach(href => {
-          if (href.match(/\.(woff2?|ttf|otf|eot)$/)) {
-            const fontName = 'currencyFont';
-            const font = new FontFace(fontName, `url(${href})`);
-            font.load().then(loadedFace => {
-              var _shadow;
-              //@ts-ignore
-              document.fonts.add(loadedFace);
-              const style = document.createElement('style');
-              style.textContent = `
-                  @font-face {
-                    font-family: '${fontName}';
-                    src: url('${href}');
-                    font-display: swap;
-                  }
-                `;
-              (_shadow = shadow) == null || _shadow.appendChild(style);
-            }).catch(err => console.error(`Failed to load font: ${href}`, err));
-          } else {
-            var _shadow2;
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = href;
-            (_shadow2 = shadow) == null || _shadow2.appendChild(link);
-          }
-        });
-      }
-      setShadowRoot(shadow);
-    } catch (error) {
-      console.error('Failed to create Shadow DOM:', error);
-      setError(`Failed to create Shadow DOM: ${error instanceof Error ? error.message : String(error)}`);
-    }
-    return () => {
-      setShadowRoot(null);
-    };
-  }, [elementId]);
-  if (error) {
-    const container = document.getElementById(elementId);
-    return /*#__PURE__*/(0,react_dom.createPortal)(/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      style: {
-        color: 'red',
-        padding: '10px'
-      },
-      children: error
-    }), container);
-  }
-  if (shadowRoot) {
-    return /*#__PURE__*/(0,react_dom.createPortal)(children, shadowRoot);
-  }
-  return null;
-};
-/* harmony default export */ const utils_ShadowWrapper = (ShadowWrapper);
 ;// ./src/components/Payments/List/index.tsx
 
 
@@ -82733,11 +82657,9 @@ const ShadowWrapper = ({
 
 
 
-
 const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   var _customStyle$containe;
   const {
-    elementId,
     payments,
     customStyle,
     baseUrl,
@@ -82899,13 +82821,50 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           })
         })
       })]
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-      elementId: elementId,
-      children: paymentMethods.length >= 1 && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: list_module['payments-list'],
-        children: paymentMethods.length === 1 ? renderSelectedPaymentMethod(paymentMethods[0], {
+    }), paymentMethods.length >= 1 && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: list_module['payments-list'],
+      children: paymentMethods.length === 1 ? renderSelectedPaymentMethod(paymentMethods[0], {
+        customStyle,
+        paymentMethodsCount: paymentMethods.length,
+        baseUrl,
+        disablePay,
+        savedCards: savedCardsList,
+        forceSaveCard,
+        showSaveCard,
+        onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
+        onAfterPaymentComplete,
+        onCardValidationChanged,
+        showPaymobLogo,
+        hideCardHolderName,
+        isLoading,
+        country,
+        integrationType,
+        publicKey,
+        ref: cardRef,
+        discounts: discounts == null ? void 0 : discounts.cards
+      }) : /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
+        children: viewMode === 'list' ? /*#__PURE__*/(0,jsx_runtime.jsx)(ListView, {
+          paymentMethods: paymentMethods,
+          customStyle,
+          baseUrl,
+          disablePay,
+          savedCards: savedCardsList,
+          forceSaveCard,
+          showSaveCard,
+          onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
+          onAfterPaymentComplete,
+          onCardValidationChanged,
+          showPaymobLogo,
+          hideCardHolderName,
+          isLoading,
+          country,
+          integrationType,
+          publicKey,
+          ref: cardRef,
+          discounts: discounts == null ? void 0 : discounts.cards
+        }) : /*#__PURE__*/(0,jsx_runtime.jsx)(List_TabView, {
+          paymentMethods: paymentMethods,
           customStyle,
-          paymentMethodsCount: paymentMethods.length,
           baseUrl,
           disablePay,
           savedCards: savedCardsList,
@@ -82922,46 +82881,6 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           publicKey,
           ref: cardRef,
           discounts: discounts == null ? void 0 : discounts.cards
-        }) : /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
-          children: viewMode === 'list' ? /*#__PURE__*/(0,jsx_runtime.jsx)(ListView, {
-            paymentMethods: paymentMethods,
-            customStyle,
-            baseUrl,
-            disablePay,
-            savedCards: savedCardsList,
-            forceSaveCard,
-            showSaveCard,
-            onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
-            onAfterPaymentComplete,
-            onCardValidationChanged,
-            showPaymobLogo,
-            hideCardHolderName,
-            isLoading,
-            country,
-            integrationType,
-            publicKey,
-            ref: cardRef,
-            discounts: discounts == null ? void 0 : discounts.cards
-          }) : /*#__PURE__*/(0,jsx_runtime.jsx)(List_TabView, {
-            paymentMethods: paymentMethods,
-            customStyle,
-            baseUrl,
-            disablePay,
-            savedCards: savedCardsList,
-            forceSaveCard,
-            showSaveCard,
-            onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
-            onAfterPaymentComplete,
-            onCardValidationChanged,
-            showPaymobLogo,
-            hideCardHolderName,
-            isLoading,
-            country,
-            integrationType,
-            publicKey,
-            ref: cardRef,
-            discounts: discounts == null ? void 0 : discounts.cards
-          })
         })
       })
     })]
@@ -83161,12 +83080,10 @@ function getStyles_getStyles(customStyle) {
 
 
 
-
 
 
 const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   const {
-    elementId,
     payment,
     customStyle,
     paymentList,
@@ -83196,163 +83113,111 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
       var _paymentMethod$name;
       switch ((_paymentMethod$name = paymentMethod.name) == null ? void 0 : _paymentMethod$name.toUpperCase()) {
         case 'CARD':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Card, {
-              payment: paymentMethod,
-              customStyle: styles,
-              baseUrl,
-              savedCards,
-              disablePay,
-              forceSaveCard,
-              showSaveCard,
-              onBeforePaymentComplete,
-              onAfterPaymentComplete,
-              onCardValidationChanged,
-              showPaymobLogo,
-              hideCardHolderName,
-              integrationType,
-              publicKey
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Card, {
+            payment: paymentMethod,
+            customStyle: styles,
+            baseUrl,
+            savedCards,
+            disablePay,
+            forceSaveCard,
+            showSaveCard,
+            onBeforePaymentComplete,
+            onAfterPaymentComplete,
+            onCardValidationChanged,
+            showPaymobLogo,
+            hideCardHolderName,
+            integrationType,
+            publicKey
           });
         case 'CARD-INSTALLMENT':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(BankInstalment, {
-              payment: paymentMethod,
-              customStyle: styles,
-              baseUrl
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(BankInstalment, {
+            payment: paymentMethod,
+            customStyle: styles,
+            baseUrl
           });
         case 'KNET':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Knet, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Knet, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'KNET-APPLE-PAY':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_KnetApplePay, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_KnetApplePay, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'NIFT':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(NiftElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(NiftElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'EASYPAISADIRECT':
         case 'EASYPAISA':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(EasypaisaElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(EasypaisaElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'JAZZCASH':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(JazzcashElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(JazzcashElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'POSTPAY':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(PostpayElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(PostpayElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'TABBY':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(TabbyElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(TabbyElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'WALLETS':
         case 'WALLET':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(WalletElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(WalletElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'FORSA':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(ForsaElements, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(ForsaElements, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'PREMIUM':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(PremiumElement, {
-              payment: paymentMethod,
-              customStyle: styles,
-              baseUrl
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(PremiumElement, {
+            payment: paymentMethod,
+            customStyle: styles,
+            baseUrl
           });
         case 'KIOSK':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Aman, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_Aman, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'VALU':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_ValU, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_ValU, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'SOUHOOLAV3':
         case 'SOUHOOLA':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(SouhoolaElements, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(SouhoolaElements, {
+            payment: paymentMethod,
+            customStyle: styles
           });
         case 'SYMPL':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(SymplElement, {
-              payment: paymentMethod,
-              customStyle: styles,
-              baseUrl
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(SymplElement, {
+            payment: paymentMethod,
+            customStyle: styles,
+            baseUrl
           });
         case 'STCPAY':
-          return /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
-            elementId: elementId,
-            children: /*#__PURE__*/(0,jsx_runtime.jsx)(StcPayElement, {
-              payment: paymentMethod,
-              customStyle: styles
-            })
+          return /*#__PURE__*/(0,jsx_runtime.jsx)(StcPayElement, {
+            payment: paymentMethod,
+            customStyle: styles
           });
       }
     }
     return /*#__PURE__*/(0,jsx_runtime.jsx)(List, {
-      elementId: elementId,
       payments: paymentList,
       setPaymentMethod: setPaymentMethod,
       customStyle: styles,
@@ -87030,6 +86895,83 @@ i18next.use(initReactI18next).init({
   }
 });
 /* harmony default export */ const localization_i18n = ((/* unused pure expression or super */ null && (i18n)));
+;// ./src/utils/ShadowWrapper.tsx
+
+
+
+
+const ShadowWrapper = ({
+  elementId,
+  children
+}) => {
+  const [shadowRoot, setShadowRoot] = (0,react.useState)(null);
+  const [error, setError] = (0,react.useState)(null);
+  (0,react.useEffect)(() => {
+    if (!document.getElementById(elementId)) return;
+    document.getElementById(elementId).innerHTML = '';
+    const container = document.getElementById(elementId).appendChild(document.createElement('div'));
+    if (!('attachShadow' in Element.prototype)) {
+      setError('Shadow DOM is not supported in this browser');
+      return;
+    }
+    try {
+      let shadow = container.shadowRoot;
+      if (!shadow) {
+        shadow = container.attachShadow({
+          mode: 'open'
+        });
+        environment.PIXEL_CSS_LINKS.forEach(href => {
+          if (href.match(/\.(woff2?|ttf|otf|eot)$/)) {
+            const fontName = 'currencyFont';
+            const font = new FontFace(fontName, `url(${href})`);
+            font.load().then(loadedFace => {
+              var _shadow;
+              //@ts-ignore
+              document.fonts.add(loadedFace);
+              const style = document.createElement('style');
+              style.textContent = `
+                  @font-face {
+                    font-family: '${fontName}';
+                    src: url('${href}');
+                    font-display: swap;
+                  }
+                `;
+              (_shadow = shadow) == null || _shadow.appendChild(style);
+            }).catch(err => console.error(`Failed to load font: ${href}`, err));
+          } else {
+            var _shadow2;
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            (_shadow2 = shadow) == null || _shadow2.appendChild(link);
+          }
+        });
+      }
+      setShadowRoot(shadow);
+    } catch (error) {
+      console.error('Failed to create Shadow DOM:', error);
+      setError(`Failed to create Shadow DOM: ${error instanceof Error ? error.message : String(error)}`);
+    }
+    return () => {
+      setShadowRoot(null);
+    };
+  }, [elementId]);
+  if (error) {
+    const container = document.getElementById(elementId);
+    return /*#__PURE__*/(0,react_dom.createPortal)(/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      style: {
+        color: 'red',
+        padding: '10px'
+      },
+      children: error
+    }), container);
+  }
+  if (shadowRoot) {
+    return /*#__PURE__*/(0,react_dom.createPortal)(children, shadowRoot);
+  }
+  return null;
+};
+/* harmony default export */ const utils_ShadowWrapper = (ShadowWrapper);
 ;// ./src/lib/pixel.tsx
 var _Pixel;
 
@@ -87042,6 +86984,7 @@ var _Pixel;
 
 
 
+
 class Pixel {
   constructor(options) {
     var _options$showPaymobLo;
@@ -87206,35 +87149,38 @@ class Pixel {
       return;
     }
     this._root.render(/*#__PURE__*/(0,jsx_runtime.jsx)(react.StrictMode, {
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(components_Payments, Object.assign({
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ShadowWrapper, {
         elementId: elementId,
-        baseUrl: this._baseURL,
-        paymentList: this._paymentList,
-        payment: this._paymentMethod,
-        disablePay: this._options['disablePay'],
-        showPaymobLogo: this._options['showPaymobLogo'],
-        customStyle: this._options['customStyle'],
-        savedCards: this._savedCards,
-        forceSaveCard: this._options['forceSaveCard'],
-        showSaveCard: this._options['showSaveCard'],
-        hideCardHolderName: this._options['hideCardHolderName'],
-        publicKey: this._options['publicKey'],
-        clientSecret: this._options['clientSecret'],
-        selectedPaymentMethods: this._options['paymentMethods'],
-        ref: this._paymentsRef
-      }, this._options.beforePaymentComplete && {
-        onBeforePaymentComplete: this.handleBeforePaymentComplete.bind(this)
-      }, this._options.afterPaymentComplete && {
-        onAfterPaymentComplete: this.handleAfterPaymentComplete.bind(this)
-      }, this._options.onPaymentCancel && {
-        onPaymentCancel: this.handleOnPaymentCancel.bind(this)
-      }, this._options.cardValidationChanged && {
-        onCardValidationChanged: this.handleCardValidationChanged.bind(this)
-      }, {
-        integrationType: this._integrationType,
-        discounts: this._discounts,
-        viewMode: this._options.viewMode
-      }), Date.now())
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(components_Payments, Object.assign({
+          baseUrl: this._baseURL,
+          paymentList: this._paymentList,
+          payment: this._paymentMethod,
+          disablePay: this._options['disablePay'],
+          showPaymobLogo: this._options['showPaymobLogo'],
+          customStyle: this._options['customStyle'],
+          savedCards: this._savedCards,
+          forceSaveCard: this._options['forceSaveCard'],
+          showSaveCard: this._options['showSaveCard'],
+          hideCardHolderName: this._options['hideCardHolderName'],
+          publicKey: this._options['publicKey'],
+          clientSecret: this._options['clientSecret'],
+          selectedPaymentMethods: this._options['paymentMethods'],
+          ref: this._paymentsRef
+        }, this._options.beforePaymentComplete && {
+          onBeforePaymentComplete: this.handleBeforePaymentComplete.bind(this)
+        }, this._options.afterPaymentComplete && {
+          onAfterPaymentComplete: this.handleAfterPaymentComplete.bind(this)
+        }, this._options.onPaymentCancel && {
+          onPaymentCancel: this.handleOnPaymentCancel.bind(this)
+        }, this._options.cardValidationChanged && {
+          onCardValidationChanged: this.handleCardValidationChanged.bind(this)
+        }, {
+          integrationType: this._integrationType,
+          discounts: this._discounts,
+          viewMode: this._options.viewMode,
+          displayName: this._options.displayName
+        }), Date.now())
+      })
     }));
   }
 }

package/package.json

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