paymob-pixel-alpha 1.1.68 → 1.1.70

package/main.js

@@ -24082,42 +24082,47 @@ const PhoneInput_PhoneInput = /*#__PURE__*/(/* unused pure expression or super *
     name,
     label,
     labelHint,
-    defaultPhoneNumber,
+    phoneNumber,
+    country,
     placeholder,
     disabled,
     autoFocus = false,
     error,
     onChangeHandler,
     onCountryChange,
-    defaultCountry = 'eg',
     disableSelectCountry,
     onFocus,
     onBlur,
     canToggleToTextInput = false,
     autoComplete = false
   } = props;
-  const [selectedCountry, setSelectedCountry] = useState(Countries[defaultCountry] || Countries.eg);
+  const isPhoneControlled = phoneNumber !== undefined;
+  const isCountryControlled = country !== undefined;
+  const countryIso2 = Countries[country || 'eg'];
+  const [internalCountry, setInternalCountry] = useState(countryIso2);
+  const [internalValue, setInternalValue] = useState(phoneNumber || '');
   const [showDropdown, setShowDropdown] = useState(false);
-  const [value, setValue] = useState(defaultPhoneNumber || '');
+  const selectedCountry = isCountryControlled ? countryIso2 : internalCountry;
+  const value = (isPhoneControlled ? phoneNumber : internalValue).replace(selectedCountry.countryCode, '');
   const toggleDropdown = () => {
     setShowDropdown(prevState => !prevState);
   };
   const selectCountry = country => {
-    setSelectedCountry(country);
+    if (!isCountryControlled) setInternalCountry(country);
     setShowDropdown(false);
-    onChangeHandler == null || onChangeHandler(country.countryCode + value, country.countryIso2);
+    onChangeHandler == null || onChangeHandler(country.countryCode + value, country.countryIso2, value);
     onCountryChange && onCountryChange(country.countryIso2);
   };
   const handlePhoneChange = e => {
-    const value = e.target.value;
-    if (value === '') {
-      setValue('');
-      onChangeHandler('', selectedCountry.countryIso2);
+    const newValue = e.target.value;
+    if (newValue === '') {
+      if (!isPhoneControlled) setInternalValue('');
+      onChangeHandler == null || onChangeHandler('', selectedCountry.countryIso2, '');
       return;
     }
-    if (!/^[0-9]+$/.test(value) && !canToggleToTextInput) return;
-    setValue(value);
-    onChangeHandler(selectedCountry.countryCode + value, selectedCountry.countryIso2);
+    if (!/^[0-9]+$/.test(newValue) && !canToggleToTextInput) return;
+    if (!isPhoneControlled) setInternalValue(newValue);
+    onChangeHandler == null || onChangeHandler(selectedCountry.countryCode + newValue, selectedCountry.countryIso2, newValue);
   };
   return /*#__PURE__*/_jsxs("div", {
     className: styles['container'],
@@ -24209,7 +24214,7 @@ const PhoneField_PhoneField = props => {
     onChangeHandler,
     onApplyHandler,
     onCountryChange,
-    defaultCountry,
+    country,
     applyBtnText,
     errorMsg,
     closeOnSubmit = true
@@ -24238,7 +24243,7 @@ const PhoneField_PhoneField = props => {
       ref: inputRef,
       name: fieldName,
       placeholder: placeholder,
-      defaultCountry: defaultCountry,
+      country: country,
       onChangeHandler: handleChange,
       onCountryChange: onCountryChange,
       onFocus: handleFocus,
@@ -50431,8 +50436,7 @@ const Modal_Modal = props => {
   onCloseHandler && useClickOutside_useClickOutside(dialogRef, onCloseHandler, open && closeOnClickOutside, true);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [!isTopLayer && open && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: modal_module['modal__overlay'],
-      onClick: closeOnClickOutside ? onCloseHandler : undefined
+      className: modal_module['modal__overlay']
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("dialog", {
       ref: dialogRef,
       "data-modal-is-mobile": isMobile,
@@ -59959,7 +59963,7 @@ const FiltersBar_FiltersBar = ({
       placeholder: placeholder,
       horizontalPlacement: isMobile ? "center" : "inline_auto",
       verticalPlacement: "auto",
-      defaultCountry: COUNTRIES_INFO[country || "EGY"].country_code_iso2.toLowerCase(),
+      country: COUNTRIES_INFO[country || "EGY"].country_code_iso2.toLowerCase(),
       onChangeHandler: phone => handleFieldsErrors(phone, id, validations),
       errorMsg: fieldsErrors[id],
       onApplyHandler: onApply
@@ -70607,7 +70611,7 @@ const ContactForm = /*#__PURE__*/(/* unused pure expression or super */ null &&
       validate: value => {
         if (!value) return !phoneRequired || t('PHONE_IS_REQUIRED');
         const validPhone = parseMax(countryCode + value);
-        return (validPhone == null ? void 0 : validPhone.getType()) === 'MOBILE' && (validPhone == null ? void 0 : validPhone.isValid()) || t('PHONE_NOT_VALID');
+        return ((validPhone == null ? void 0 : validPhone.getType()) === 'MOBILE' || (validPhone == null ? void 0 : validPhone.getType()) === 'FIXED_LINE_OR_MOBILE') && (validPhone == null ? void 0 : validPhone.isValid()) || t('PHONE_NOT_VALID');
       }
     });
   }, []);
@@ -79070,10 +79074,13 @@ const ClickOTPModal = ({
     setOtp('');
   };
   const handleSendToEmail = async () => {
-    setIsLoading(true);
-    await onSendToEmail();
-    setIsLoading(false);
-    setOtp('');
+    try {
+      setIsLoading(true);
+      await onSendToEmail();
+    } catch (_unused) {} finally {
+      setIsLoading(false);
+      setOtp('');
+    }
   };
   const title = _type === 'phone' ? isPhoneVerified ? t('WELCOME_BACK') : t('VERIFY_YOUR_ACCOUNT') : t('CONFIRM_ITS_YOU');
   const text = (_type === 'phone' ? `${t('LOGGED_IN_AS')} ${email} \n` : '') + `${t('PLEASE_ENTER_CODE_TO_VERIFY', {
@@ -81589,14 +81596,15 @@ function IframeCard(props) {
     expiryRegister,
     cvcRegister,
     getValues,
-    cardType
+    cardType,
+    watch
   } = useHookForm({
     isIframe: true,
     hasOmanNetIntegration: hasOmanNetIntegration || integrationType === 'tokenization',
     countryName: country
   });
   const timeoutIdRef = useRef();
-  const cardNum = getValues('number');
+  const cardNum = watch('number');
   const isValidCard = valid.number(cardNum).isValid;
   const currentIntegrationId = hasOmanNetIntegration && (cardType === CARD_TYPES.OMAN || cardType === CARD_TYPES.MAAL) ? subType.integrationId : integrationId;
   const currentPaymentToken = hasOmanNetIntegration && (cardType === CARD_TYPES.OMAN || cardType === CARD_TYPES.MAAL) ? subType.paymentToken : paymentToken;
@@ -81777,6 +81785,8 @@ function IframeCard(props) {
             tenure
           }).then(() => {
             isSubmittingRef.current = false;
+          }).catch(() => {
+            isSubmittingRef.current = false;
           });
         }
         setShouldSubmitData(false);
@@ -82796,7 +82806,7 @@ function SavedCardsViewTwo(props) {
     if (loading) return true;
     if (isAddingCard) return false;
     if (isSplitPaymentsView && !splitAmount) return true;
-    if (showCvvInput) {
+    if (showCvvInput && !(selectedCard != null && selectedCard.networkToken)) {
       const requiredLength = isAmexCardSelected ? AMEX_CVV_LENGTH : CVV_LENGTH;
       return selectedCardCvvLength !== requiredLength;
     }
@@ -83679,7 +83689,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   publicKey,
   discounts,
   onPaymentCancel,
-  isInstantRefundActive
+  isInstantRefundActive,
+  onPaymentStateChanged
 }, ref) => {
   var _customStyle$discount, _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3, _customStyle$labelTex, _customStyle$buttonTe, _customStyle$placehol, _customStyle$discount2, _customStyle$discount3, _customStyle$errorTex, _customStyle$errorTex2, _customStyle$errorTex3, _customStyle$errorTex4, _customStyle$hintText, _customStyle$labelTex2, _customStyle$buttonTe2, _customStyle$labelTex3, _customStyle$buttonTe3, _customStyle$buttonTe4, _customStyle$buttonTe5;
   const {
@@ -83743,6 +83754,10 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   const [instantRefundAmount, setInstantRefundAmount] = (0,react.useState)('');
   const [isInquiringInstantRefund, setIsInquiringInstantRefund] = (0,react.useState)(false);
   const [isInstantRefundChecked, setIsInstantRefundChecked] = (0,react.useState)(false);
+  const checkInstantRefundGeographicEligibility = () => {
+    const countriesCurrencies = ["EGP"];
+    return countriesCurrencies.includes(currency);
+  };
   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;
   const resetInstantRefundState = () => {
@@ -83832,9 +83847,14 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
           res
         } = toggleResponse != null ? toggleResponse : {};
         if (success && res) {
-          handleDiscount(res);
+          if (res.status === 200) {
+            handleDiscount(res);
+          }
         }
-        instantRefundToggleResolve.current == null || instantRefundToggleResolve.current(!!success);
+        instantRefundToggleResolve.current == null || instantRefundToggleResolve.current({
+          ok: !!success,
+          res
+        });
         instantRefundToggleResolve.current = null;
         setIsInquiringInstantRefund(false);
       }
@@ -83990,6 +84010,21 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
       previousValidationRef.current = isCardValid;
     }
   }, [isCardValid, shouldDisablePayBtn]);
+  (0,react.useEffect)(() => {
+    var _instantRefundData$in, _instantRefundData$el;
+    if (!instantRefundData || !totalAmount || !isInstantRefundActive) return;
+    onPaymentStateChanged == null || onPaymentStateChanged({
+      type: 'INSTANT_REFUND_TOGGLE',
+      payload: {
+        enabled: isInstantRefundChecked,
+        instantRefundAmount: Number((_instantRefundData$in = instantRefundData == null ? void 0 : instantRefundData.instant_refund_fees) != null ? _instantRefundData$in : 0) / 100,
+        eligible: (_instantRefundData$el = instantRefundData == null ? void 0 : instantRefundData.eligible) != null ? _instantRefundData$el : false,
+        totalAmount,
+        originalAmount: payment == null ? void 0 : payment.amount,
+        currency
+      }
+    });
+  }, [isInstantRefundChecked, instantRefundData, totalAmount]);
   (0,react.useImperativeHandle)(ref, () => ({
     handleGenerateToken
   }));
@@ -84232,7 +84267,10 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
       }, '*');
       instantRefundToggleTimeoutRef.current = setTimeout(() => {
         if (instantRefundToggleResolve.current) {
-          instantRefundToggleResolve.current(false);
+          instantRefundToggleResolve.current({
+            ok: false,
+            res: undefined
+          });
           instantRefundToggleResolve.current = null;
           setIsInquiringInstantRefund(false);
         }
@@ -84243,13 +84281,25 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     const discountIntegrationId = getDiscountIntegrationId();
     if (!discountIntegrationId) {
       applyNoDiscountInstantRefundAmounts(nextChecked);
-      return true;
+      return {
+        ok: true,
+        res: undefined
+      };
     }
     const token = nextChecked ? instantRefundData == null ? void 0 : instantRefundData.new_payment_token : payment == null ? void 0 : payment.token;
     const res = await checkDiscount(token, payment.id, selectedCard.identifier, selectedCard.type);
-    if ((res == null ? void 0 : res.status) !== 200) return false;
+    if ((res == null ? void 0 : res.status) !== 200) {
+      return {
+        ok: true,
+        res: res
+      };
+    }
+    ;
     handleDiscount(res);
-    return true;
+    return {
+      ok: true,
+      res: res
+    };
   };
   const handleInstantRefundToggleChange = async currentChecked => {
     if (!payment || !(instantRefundData != null && instantRefundData.eligible)) return false;
@@ -84257,10 +84307,11 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
     const isSavedCardContext = !!(savedCards != null && savedCards.length) && !showCardModal && !!selectedCard;
     setIsInquiringInstantRefund(true);
     try {
-      const ok = isSavedCardContext ? await handleSavedCardToggle(nextChecked) : await postToggleToIframe(nextChecked);
-      if (!ok) return false;
+      var _response$res;
+      const response = isSavedCardContext ? await handleSavedCardToggle(nextChecked) : await postToggleToIframe(nextChecked);
+      if (!response.ok) return false;
       setIsInstantRefundChecked(nextChecked);
-      if (!hasDiscountForPayment) {
+      if (!hasDiscountForPayment || ((_response$res = response.res) == null ? void 0 : _response$res.status) !== 200) {
         applyNoDiscountInstantRefundAmounts(nextChecked);
       }
       return true;
@@ -84446,7 +84497,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             fontFamily: currencyFontFamily
           },
           children: displayCurrency
-        }), ' ', totalAmount || formattedAmount]
+        }), ' ', formattedAmount]
       })]
     }), discountedAmount && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "flex justify-between items-center text-green-600",
@@ -84583,10 +84634,10 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
         }), /*#__PURE__*/(0,jsx_runtime.jsx)("iframe", {
           title: 'Elements',
           id: "iFrame",
-          ref: iframeRef,
-          src: `${baseUrl}/${environment['IFRAME_PATH']}/?type=card&v=2&integration_type=${integrationType}`
-          // src={`http://localhost:9001/${environment['IFRAME_PATH']}/?type=card&v=2&integration_type=${integrationType}`}
+          ref: iframeRef
+          // src={`${baseUrl}/${environment['IFRAME_PATH']}/?type=card&v=2&integration_type=${integrationType}`}
           ,
+          src: `http://localhost:9001/${environment['IFRAME_PATH']}/?type=card&v=2&integration_type=${integrationType}`,
           className: Card_card_module['iframe'],
           style: {
             display: isIframeLoaded && (payment.token || integrationType === INTEGRATION_TYPE.TOKENIZATION) ? 'block' : 'none'
@@ -84637,7 +84688,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
                 customError: customStyle == null || (_customStyle$errorTex4 = customStyle.errorText) == null ? void 0 : _customStyle$errorTex4.holderName
               })
             })]
-          }), isInstantRefundActive && /*#__PURE__*/(0,jsx_runtime.jsx)(InstantRefund_InstantRefundToggle, {
+          }), isInstantRefundActive && checkInstantRefundGeographicEligibility() && /*#__PURE__*/(0,jsx_runtime.jsx)(InstantRefund_InstantRefundToggle, {
             checked: isInstantRefundChecked,
             onChange: handleInstantRefundToggleChange,
             instantRefundData: instantRefundData,
@@ -84723,7 +84774,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
               children: discountAppliedMessage
             }), /*#__PURE__*/(0,jsx_runtime.jsx)(icons_CircleCheck, {})]
-          }), isInstantRefundActive && selectedCard && !showCardModal && card.id === selectedCardId && /*#__PURE__*/(0,jsx_runtime.jsx)(InstantRefund_InstantRefundToggle, {
+          }), isInstantRefundActive && selectedCard && !showCardModal && card.id === selectedCardId && checkInstantRefundGeographicEligibility() && /*#__PURE__*/(0,jsx_runtime.jsx)(InstantRefund_InstantRefundToggle, {
             checked: isInstantRefundChecked,
             onChange: handleInstantRefundToggleChange,
             instantRefundData: instantRefundData,
@@ -94718,11 +94769,21 @@ function KnetApplePay(props) {
       }
     }
     session.onvalidatemerchant = async event => {
-      const merchantSession = await validatemerchant(event.validationURL, integrationId);
-      session.completeMerchantValidation(merchantSession);
+      try {
+        const merchantSession = await validatemerchant(event.validationURL, integrationId);
+        if (!merchantSession || typeof merchantSession !== 'object' || merchantSession.status === 0) {
+          session.abort();
+          setLoading(false);
+          return;
+        }
+        session.completeMerchantValidation(merchantSession);
+      } catch (e) {
+        session.abort();
+        setLoading(false);
+      }
     };
     session.onpaymentauthorized = async event => {
-      var _payRes$data, _payRes$data2, _payRes$data3;
+      var _event$payment, _payRes$data, _payRes$data2, _payRes$data3;
       let clientData = null;
       if (!clientInfo) {
         try {
@@ -94744,7 +94805,7 @@ function KnetApplePay(props) {
           console.log(e);
         }
       }
-      const payRes = await knetApplePayPayment(JSON.stringify(event.payment.token.paymentData), paymentToken, clientData);
+      const payRes = await knetApplePayPayment(JSON.stringify((_event$payment = event.payment) == null || (_event$payment = _event$payment.token) == null ? void 0 : _event$payment.paymentData), paymentToken, clientData);
       setLoading(false);
       let status;
       let resStatus = '';
@@ -94779,15 +94840,19 @@ function KnetApplePay(props) {
         resStatus = 'invalid';
       }
       if (onAfterPaymentComplete) {
-        session.completePayment({
-          status
-        });
+        try {
+          session.completePayment({
+            status
+          });
+        } catch (_) {}
         onAfterPaymentComplete(payRes);
       } else {
         onSubmit(resStatus, payRes.data);
-        session.completePayment({
-          status
-        });
+        try {
+          session.completePayment({
+            status
+          });
+        } catch (_) {}
       }
     };
     session.oncancel = () => {
@@ -95075,14 +95140,18 @@ function apple_pay_ApplePay(props) {
       }
     }
     session.onvalidatemerchant = async event => {
-      console.log("start validation request");
-      console.log(`validationURL: ${event.validationURL}`);
-      console.log(`integrationId: ${integrationId}`);
-      const merchantSession = await validatemerchant(event.validationURL, integrationId, displayName);
-      console.log("validation request completed");
-      console.log(`merchantSession: ${merchantSession}`);
-      console.log("start completeMerchantValidation");
-      session.completeMerchantValidation(merchantSession);
+      try {
+        const merchantSession = await validatemerchant(event.validationURL, integrationId, displayName);
+        if (!merchantSession || typeof merchantSession !== 'object' || merchantSession.status === 0) {
+          session.abort();
+          setLoading(false);
+          return;
+        }
+        session.completeMerchantValidation(merchantSession);
+      } catch (e) {
+        session.abort();
+        setLoading(false);
+      }
     };
     session.onshippingcontactselected = async event => {
       console.log({
@@ -95110,7 +95179,7 @@ function apple_pay_ApplePay(props) {
       });
     };
     session.onpaymentauthorized = async event => {
-      var _payRes$data, _payRes$data2, _payRes$data3;
+      var _event$payment, _payRes$data, _payRes$data2, _payRes$data3;
       let clientData = null;
       if (!clientInfo) {
         const billingAddress = event.payment.billingContact;
@@ -95157,7 +95226,7 @@ function apple_pay_ApplePay(props) {
       //   dispatch(addClientInfo(clientData));
       // }
       console.log("start pay request");
-      const payRes = await paymentauthorized(JSON.stringify(event.payment.token.paymentData), paymentToken, clientData);
+      const payRes = await paymentauthorized(JSON.stringify((_event$payment = event.payment) == null || (_event$payment = _event$payment.token) == null ? void 0 : _event$payment.paymentData), paymentToken, clientData);
       setLoading(false);
       let status;
       let resStatus = '';
@@ -95192,15 +95261,19 @@ function apple_pay_ApplePay(props) {
         resStatus = 'invalid';
       }
       if (onAfterPaymentComplete) {
-        session.completePayment({
-          status
-        });
+        try {
+          session.completePayment({
+            status
+          });
+        } catch (_) {}
         onAfterPaymentComplete(payRes);
       } else {
         onSubmit(resStatus, payRes.data);
-        session.completePayment({
-          status
-        });
+        try {
+          session.completePayment({
+            status
+          });
+        } catch (_) {}
       }
       //}
     };
@@ -96038,7 +96111,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     discounts,
     viewMode,
     displayName,
-    isInstantRefundActive
+    isInstantRefundActive,
+    onPaymentStateChanged
   } = props;
   const {
     t
@@ -96200,7 +96274,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
         publicKey,
         ref: cardRef,
         discounts: discounts == null ? void 0 : discounts.cards,
-        isInstantRefundActive
+        isInstantRefundActive,
+        onPaymentStateChanged
       }) : /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
         children: viewMode === 'list' ? /*#__PURE__*/(0,jsx_runtime.jsx)(ListView, {
           paymentMethods: paymentMethods,
@@ -96221,7 +96296,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           publicKey,
           ref: cardRef,
           discounts: discounts == null ? void 0 : discounts.cards,
-          isInstantRefundActive
+          isInstantRefundActive,
+          onPaymentStateChanged
         }) : /*#__PURE__*/(0,jsx_runtime.jsx)(List_TabView, {
           paymentMethods: paymentMethods,
           customStyle,
@@ -96241,7 +96317,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           publicKey,
           ref: cardRef,
           discounts: discounts == null ? void 0 : discounts.cards,
-          isInstantRefundActive
+          isInstantRefundActive,
+          onPaymentStateChanged
         })
       })
     })]
@@ -96465,7 +96542,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     integrationType,
     discounts,
     viewMode = 'tab',
-    isInstantRefundActive
+    isInstantRefundActive,
+    onPaymentStateChanged
   } = props;
   const [paymentMethod, setPaymentMethod] = (0,react.useState)(payment);
   const styles = getStyles_getStyles(customStyle);
@@ -96485,6 +96563,7 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
             onBeforePaymentComplete,
             onAfterPaymentComplete,
             onCardValidationChanged,
+            onPaymentStateChanged,
             showPaymobLogo,
             hideCardHolderName,
             integrationType,
@@ -96601,7 +96680,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
       integrationType: integrationType,
       discounts: discounts,
       viewMode: viewMode,
-      isInstantRefundActive: isInstantRefundActive
+      isInstantRefundActive: isInstantRefundActive,
+      onPaymentStateChanged: onPaymentStateChanged
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
@@ -97636,6 +97716,11 @@ class Pixel {
       this._options.cardValidationChanged(isValid);
     }
   }
+  handlePaymentStateChanged(state) {
+    if (this._options.paymentStateChanged) {
+      this._options.paymentStateChanged(state);
+    }
+  }
   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.`);
@@ -97722,6 +97807,8 @@ class Pixel {
           onPaymentCancel: this.handleOnPaymentCancel.bind(this)
         }, this._options.cardValidationChanged && {
           onCardValidationChanged: this.handleCardValidationChanged.bind(this)
+        }, this._options.paymentStateChanged && {
+          onPaymentStateChanged: this.handlePaymentStateChanged.bind(this)
         }, {
           integrationType: this._integrationType,
           discounts: this._discounts,

package/package.json

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