paymob-pixel-alpha 1.1.64 → 1.1.65

package/main.js

@@ -76694,7 +76694,6 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     paymentMethodType,
     useCvv
   } = payment;
-  const formattedAmount = formatAmountBasedOnCurrency_formatAmountBasedOnCurrency(String(amount), currency);
   const {
     t
   } = useTranslation_useTranslation('card');
@@ -76741,7 +76740,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   } = formatCurrencyForDisplay_formatCurrencyForDisplay(currency);
   const [showFeesDetails, setShowFeesDetails] = (0,react.useState)(false);
   const [discountedAmount, setDiscountedAmount] = (0,react.useState)('');
-  const [feesAmount, setFeesAmount] = (0,react.useState)(payment != null && payment.feesAmount ? formatAmountBasedOnCurrency_formatAmountBasedOnCurrency(String(payment.feesAmount), currency) : '');
+  const [feesAmount, setFeesAmount] = (0,react.useState)((payment == null ? void 0 : payment.feesAmount) || '');
   const [updatedPaymentToken, setUpdatedPaymentToken] = (0,react.useState)('');
   const showCvvInput = paymentMethodType === constants_PAYMENT_METHODS_TYPES.MOTO && useCvv || paymentMethodType === constants_PAYMENT_METHODS_TYPES.ONLINE;
   const shouldDisablePayBtn = showCvvInput ? loading || (isAmexCardSelected ? selectedCardCvvLength !== src_constants_AMEX_CVV_LENGTH : selectedCardCvvLength !== constants_CVV_LENGTH) : !selectedCardId;
@@ -77026,12 +77025,10 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     const discountIntegrationId = discounts == null || (_discounts$data = discounts.data) == null || (_discounts$data = _discounts$data.find(discount => (discount == null ? void 0 : discount.integration_id) === integrationId)) == null ? void 0 : _discounts$data.integration_id;
     if (!hasDiscount || !discountIntegrationId) return;
     const res = await checkDiscount(updatedPaymentToken || paymentToken, discountIntegrationId, identifier, savedCardType);
-    console.log("🚀 ~ handleSavedCardDiscount ~ res:", res);
     handleDiscount(res);
     if (res.status === 200) return true;
   };
   const handleDiscount = res => {
-    console.log("🚀 ~ handleDiscount ~ res:", res);
     handleResetDiscountMessages();
     if (!res) return;
     if (res.status === 200) {
@@ -77076,7 +77073,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   };
   const handleFeesReset = () => {
     setTotalAmount("");
-    setFeesAmount(payment != null && payment.feesAmount ? formatAmountBasedOnCurrency_formatAmountBasedOnCurrency(String(payment.feesAmount), currency) : '');
+    setFeesAmount((payment == null ? void 0 : payment.feesAmount) || '');
     setShowFeesDetails(false);
     setUpdatedPaymentToken("");
     handleResetDiscountMessages();
@@ -77275,7 +77272,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             fontFamily: currencyFontFamily
           },
           children: displayCurrency
-        }), ' ', totalAmount || formattedAmount]
+        }), ' ', amount]
       })]
     }), discountedAmount && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "flex justify-between items-center text-green-600",
@@ -77482,7 +77479,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
                 style: {
                   textDecoration: 'line-through'
                 },
-                children: formattedAmount
+                children: amount
               })]
             }),
             onClick: () => setShouldSubmitData(true),
@@ -77563,7 +77560,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
               style: {
                 textDecoration: 'line-through'
               },
-              children: formattedAmount
+              children: amount
             })]
           }),
           customStyle: customStyle == null ? void 0 : customStyle.button,
@@ -84342,7 +84339,7 @@ const payWithKnet = (token, payload) => {
     source: {
       identifier: 'KnetCard',
       amount_cents: payload.amount,
-      unified_checkout: payload.isElements ? 'False' : 'True',
+      unified_checkout: 'False',
       subtype: 'KNET'
     },
     payment_token: token,
@@ -85244,11 +85241,10 @@ function GooglePayElement({
 }
 ;// ./src/services/applePayService.ts
 
-const applePayService_validatemerchant = async (appleURL, integrationId, displayName) => {
+const applePayService_validatemerchant = async (appleURL, integrationId) => {
   return lib_axios.post(`/api/auth/merchant/validate`, {
     appleURL,
-    integrationId,
-    displayName
+    integrationId
   }).then(res => res.data.api_response).catch(err => err == null ? void 0 : err.response);
 };
 const paymentauthorized = async (applePaytoken, paymentToken) => {
@@ -85279,8 +85275,7 @@ function ApplePayElements({
   onAfterPaymentComplete,
   onPaymentCancel,
   isLoading,
-  country,
-  displayName
+  country
 }) {
   var _amount$toString;
   const {
@@ -85298,7 +85293,6 @@ function ApplePayElements({
     currency: currency,
     amount: (_amount$toString = amount.toString()) == null ? void 0 : _amount$toString.replace(/,/g, ''),
     merchantName: merchantName,
-    displayName: displayName,
     paymentToken: (applePay == null ? void 0 : applePay.token) || '',
     integrationId: (applePay == null ? void 0 : applePay.id) || '',
     validatemerchant: applePayService_validatemerchant,
@@ -85647,83 +85641,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
 
 
@@ -85740,11 +85657,9 @@ const ShadowWrapper = ({
 
 
 
-
 const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   var _customStyle$containe;
   const {
-    elementId,
     payments,
     customStyle,
     baseUrl,
@@ -85763,8 +85678,7 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     selectedPaymentMethods,
     integrationType,
     discounts,
-    viewMode,
-    displayName
+    viewMode
   } = props;
   const {
     t
@@ -85825,6 +85739,7 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     if (a.type === 'knet-apple-pay' && b.type === 'knet') return 1;
     return 0;
   });
+  console.log('paymentMethods list', paymentMethods);
   const isApplePay = () => {
     const hasApplePay = !!filteredPaymentList.find(item => item.name === 'apple-pay');
     return hasApplePay && isApplePaySupported();
@@ -85874,8 +85789,7 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
             onPaymentCancel: onPaymentCancel,
             customStyle: customStyle == null ? void 0 : customStyle.button,
             isLoading: isLoading,
-            country: country,
-            displayName: displayName
+            country: country
           }), isGooglePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(GooglePayElement, {
             payment: googlePaymentMethod,
             customStyle: customStyle == null ? void 0 : customStyle.button,
@@ -85905,13 +85819,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,
@@ -85928,46 +85879,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
-          })
         })
       })
     })]
@@ -86167,12 +86078,10 @@ function getStyles_getStyles(customStyle) {
 
 
 
-
 
 
 const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   const {
-    elementId,
     payment,
     customStyle,
     paymentList,
@@ -86192,8 +86101,7 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     selectedPaymentMethods,
     integrationType,
     discounts,
-    viewMode = 'tab',
-    displayName
+    viewMode = 'tab'
   } = props;
   const [paymentMethod, setPaymentMethod] = (0,react.useState)(payment);
   const styles = getStyles_getStyles(customStyle);
@@ -86202,163 +86110,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,
@@ -86379,8 +86235,7 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
       ref: ref,
       integrationType: integrationType,
       discounts: discounts,
-      viewMode: viewMode,
-      displayName: displayName
+      viewMode: viewMode
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
@@ -90036,6 +89891,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;
 
@@ -90048,6 +89980,7 @@ var _Pixel;
 
 
 
+
 class Pixel {
   constructor(options) {
     var _options$showPaymobLo;
@@ -90212,35 +90145,37 @@ 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
+        }), Date.now())
+      })
     }));
   }
 }

package/package.json

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