paymob-pixel-alpha 1.0.8 → 1.1.0

package/main.js

@@ -10055,10 +10055,18 @@ function useWidth() {
   const [isMobile, setIsMobile] = (0,react.useState)(false);
   (0,react.useEffect)(() => {
     const handleResize = () => {
-      if (window.innerWidth <= 644) {
-        setIsMobile(true);
+      if (window.visualViewport) {
+        if (window.visualViewport.width <= 644) {
+          setIsMobile(true);
+        } else {
+          setIsMobile(false);
+        }
       } else {
-        setIsMobile(false);
+        if (window.innerWidth <= 644) {
+          setIsMobile(true);
+        } else {
+          setIsMobile(false);
+        }
       }
     };
     handleResize();
@@ -17637,6 +17645,7 @@ function TermsConditions_TermsConditions() {
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ../../node_modules/react-loading-skeleton/dist/index.js
@@ -18753,12 +18762,16 @@ function mobileCardFormViewTwo_MobileCard(props) {
 
 
 function IframeCard(props) {
-  var _subType$type;
   const {
     loading,
     handleCardSubmit,
+    handleOTPSubmit,
     getCardLogo,
-    useHookForm
+    useHookForm,
+    isOmanNetCard,
+    setIsOmanNetCard,
+    hasOmanNetIntegration,
+    setHasOmanNetIntegration
   } = props;
   const [iframeCardHight, setIframeCardHight] = useState();
   const [iframeCustomStyles, setIframeCustomStyles] = useState({});
@@ -18771,7 +18784,6 @@ function IframeCard(props) {
   const [cardHolderError, setCardHolderError] = useState();
   const [cardHolderNameHidden, setCardHolderNameHidden] = useState(false);
   const [currency, setCurrency] = useState('');
-  const hasOmanNetIntegration = (subType == null || (_subType$type = subType.type) == null ? void 0 : _subType$type.toLowerCase()) === CARD_TYPES.OMAN;
   const {
     handleSubmit,
     errors,
@@ -18791,11 +18803,16 @@ function IframeCard(props) {
     window.addEventListener('message', handleDataFromSDK);
     return () => window.removeEventListener('message', handleDataFromSDK);
   }, []);
+  useEffect(() => {
+    setIsOmanNetCard == null || setIsOmanNetCard(cardType === CARD_TYPES.OMAN);
+  }, [cardType, setIsOmanNetCard]);
   const handleDataFromSDK = event => {
     if (event.data.type === 'setPrevFocus') {
       handlePrevFocusFromSDK(event.data.payload);
     } else if (event.data.type === 'cardData') {
       handleCardDataFromSDK(event.data.payload);
+    } else if (event.data.type === 'otpData') {
+      handleOTPSubmit(event.data.payload);
     } else if (event.data.type === 'customStyles') {
       handleCardStylesFromSDK(event.data.payload);
     } else if (event.data.type === 'cardHolderError') {
@@ -18825,7 +18842,9 @@ function IframeCard(props) {
       setPaymentToken(payload.paymentToken);
     }
     if ((_payload$subType = payload.subType) != null && _payload$subType.paymentToken && (_payload$subType2 = payload.subType) != null && _payload$subType2.type) {
+      var _payload$subType$type;
       setSubType(payload.subType);
+      setHasOmanNetIntegration(((_payload$subType$type = payload.subType.type) == null ? void 0 : _payload$subType$type.toLowerCase()) === CARD_TYPES.OMAN);
     }
     if (payload.tenure) {
       setTenure(payload.tenure);
@@ -18870,8 +18889,8 @@ function IframeCard(props) {
         handleCardSubmit({
           data,
           cardHolderName,
-          paymentToken: hasOmanNetIntegration && cardType === CARD_TYPES.OMAN ? subType.paymentToken : paymentToken,
-          subType: hasOmanNetIntegration && cardType === CARD_TYPES.OMAN ? subType.type : 'CARD',
+          paymentToken: hasOmanNetIntegration && isOmanNetCard ? subType.paymentToken : paymentToken,
+          subType: hasOmanNetIntegration && isOmanNetCard ? subType.type : 'CARD',
           saveCard,
           tenure
         });
@@ -19869,7 +19888,9 @@ function CardElement({
   onCardValidationChanged,
   showPaymobLogo,
   hideCardHolderName,
-  isLoading
+  isLoading,
+  onProcessingPayment,
+  isProcessingPayment
 }) {
   var _customStyle$containe;
   const {
@@ -19882,6 +19903,7 @@ function CardElement({
   const {
     t
   } = useTranslation_useTranslation('card');
+  const isMobile = useWidth();
   const [loading, setLoading] = (0,react.useState)(false);
   const [cardHolderName, setCardHolderName] = (0,react.useState)('');
   const [isActionBtnDisabled, setIsActionBtnDisabled] = (0,react.useState)(false);
@@ -19899,6 +19921,10 @@ function CardElement({
   const [selectedCardCVV, setSelectedCardCVV] = (0,react.useState)('');
   const [showCardModal, setShowCardModal] = (0,react.useState)(false);
   const [showCVVTooltipModal, setShowCVVTooltipModal] = (0,react.useState)(false);
+  const [showOTP, setShowOTP] = (0,react.useState)(false);
+  const [sendOTPLoading, setSendOTPLoading] = (0,react.useState)(false);
+  const previousValidationRef = (0,react.useRef)(false);
+  const [startCardPay, setStartCardPay] = (0,react.useState)(false);
   const isCardValid = hideCardHolderName ? !isActionBtnDisabled : !(isActionBtnDisabled || !cardHolderName);
   const isAmexCardSelected = (selectedCard == null ? void 0 : selectedCard.type) === constants_CARD_TYPES.AMEX;
   const selectedCardCvvLength = selectedCardCVV.length;
@@ -19941,24 +19967,31 @@ function CardElement({
         setShowCVVTooltipModal(true);
       }
     };
-    const handlePaymentResponse = res => {
-      var _res$data, _res$data2;
+    const handlePaymentResponse = ({
+      res,
+      requiresOTP
+    }) => {
+      var _res$data, _res$data2, _res$data3;
       setShouldSubmitData(false);
+      setSendOTPLoading(false);
       const cardHolderInput = document.getElementById('name');
       if (cardHolderInput) {
         setTimeout(() => cardHolderInput.disabled = false, 1000);
       }
-      if (onAfterPaymentComplete && ((_res$data = res.data) == null ? void 0 : _res$data.is_3d_secure) !== 'true') {
+      if (requiresOTP) {
+        setShowOTP(true);
+      } else if (onAfterPaymentComplete && ((_res$data = res.data) == null ? void 0 : _res$data.is_3d_secure) !== 'true') {
         onAfterPaymentComplete(res);
-      } else if (res.status === 200 && (_res$data2 = res.data) != null && _res$data2.redirection_url) {
-        window.location.href = res.data.redirection_url;
+      } else if (res.status === 200 && ((_res$data2 = res.data) != null && _res$data2.redirection_url || (_res$data3 = res.data) != null && _res$data3.redirect_url)) {
+        var _res$data4, _res$data5;
+        window.location.href = ((_res$data4 = res.data) == null ? void 0 : _res$data4.redirection_url) || ((_res$data5 = res.data) == null ? void 0 : _res$data5.redirect_url);
       } else if (res.status === 400) {
-        var _res$data3, _res$data4, _res$data5;
-        if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data3 = res.data) == null ? void 0 : _res$data3.msg) === 'Retry limit reached.') {
+        var _res$data6, _res$data7, _res$data8;
+        if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data6 = res.data) == null ? void 0 : _res$data6.msg) === 'Retry limit reached.') {
           setErrorMessage(t('ERR_MSG_EXCEEDED_TRIALS'));
-        } else if (((_res$data4 = res.data) == null ? void 0 : _res$data4.message) === 'Session Error') {
+        } else if (((_res$data7 = res.data) == null ? void 0 : _res$data7.message) === 'Session Error') {
           setErrorMessage(t('ERR_MSG_ALREADY_PROCESSED'));
-        } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data5 = res.data) == null ? void 0 : _res$data5.msg) === 'Order has already paid.') {
+        } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data8 = res.data) == null ? void 0 : _res$data8.msg) === 'Order has already paid.') {
           setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
         } else {
           setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20006,7 +20039,6 @@ function CardElement({
   (0,react.useEffect)(() => {
     if (iframe && shouldSubmitData) {
       const handlePay = async () => {
-        var _iframe$contentWindow;
         if (loading) return;
         const cardHolderInput = document.getElementById('name');
         if (cardHolderInput) {
@@ -20014,56 +20046,46 @@ function CardElement({
         }
         setLoading(true);
         if (onBeforePaymentComplete) {
-          const result = await onBeforePaymentComplete();
+          const result = await onBeforePaymentComplete(payment.name);
           if (!result) {
             setShouldSubmitData(false);
             setLoading(false);
             return;
           }
         }
-        (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
-          type: 'cardData',
-          payload: {
-            cardHolderName,
-            saveCard: forceSaveCard || saveCard,
-            tenure,
-            shouldSubmitData
-          }
-        }, '*');
+        setStartCardPay(true);
+        onProcessingPayment(true);
         setShouldSubmitData(false);
       };
       handlePay();
     }
   }, [cardHolderName, saveCard, shouldSubmitData, iframe]);
   (0,react.useEffect)(() => {
-    if (isIframeLoaded) {
-      var _iframe$contentWindow2, _payment$subType, _payment$subType2, _iframe$contentWindow3;
-      (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
+    if (isIframeLoaded || startCardPay && isProcessingPayment) {
+      var _iframe$contentWindow, _payment$subType, _payment$subType2;
+      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
         type: 'cardData',
         payload: {
-          paymentToken: token,
+          paymentToken: payment.token,
           subType: {
             paymentToken: (_payment$subType = payment.subType) == null ? void 0 : _payment$subType.token,
             type: (_payment$subType2 = payment.subType) == null ? void 0 : _payment$subType2.type
           },
-          currency: currency
-        }
-      }, '*');
-      (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
-        type: 'paymentInfo',
-        payload: {
-          amount,
           currency,
-          showSaveCard,
-          payment
+          cardHolderName,
+          saveCard: forceSaveCard || saveCard,
+          tenure,
+          shouldSubmitData: startCardPay && isProcessingPayment
         }
       }, '*');
+      setStartCardPay(false);
+      onProcessingPayment(false);
     }
-  }, [isIframeLoaded, payment]);
+  }, [isIframeLoaded, payment, isProcessingPayment]);
   (0,react.useEffect)(() => {
     if (isIframeLoaded) {
-      var _iframe$contentWindow4;
-      (_iframe$contentWindow4 = iframe.contentWindow) == null || _iframe$contentWindow4.postMessage({
+      var _iframe$contentWindow2;
+      (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
         type: 'customStyles',
         payload: {
           styling: customStyle,
@@ -20075,8 +20097,8 @@ function CardElement({
     }
   }, [isIframeLoaded, iframeRef.current]);
   (0,react.useEffect)(() => {
-    var _iframe$contentWindow5;
-    iframe == null || (_iframe$contentWindow5 = iframe.contentWindow) == null || _iframe$contentWindow5.postMessage({
+    var _iframe$contentWindow3;
+    iframe == null || (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
       type: 'cardHolderError',
       payload: {
         error: errors['name']
@@ -20084,16 +20106,22 @@ function CardElement({
     }, '*');
   }, [errors.name]);
   (0,react.useEffect)(() => {
-    if (Object.keys(errors).length === 4) {
+    const isSavedCardView = (savedCards == null ? void 0 : savedCards.length) && !showCardModal;
+    const correctErrorsCount = Object.keys(errors).length === 4;
+    if (isSavedCardView && previousValidationRef.current !== !shouldDisablePayBtn) {
+      onCardValidationChanged == null || onCardValidationChanged(!shouldDisablePayBtn);
+      previousValidationRef.current = !shouldDisablePayBtn;
+    } else if (correctErrorsCount && previousValidationRef.current !== isCardValid) {
       onCardValidationChanged == null || onCardValidationChanged(isCardValid);
+      previousValidationRef.current = isCardValid;
     }
-  }, [isCardValid]);
+  }, [isCardValid, shouldDisablePayBtn]);
   const handlePayWithoutButton = () => {
     setShouldSubmitData(true);
   };
   const handleFocusToPrevInput = () => {
-    var _iframe$contentWindow6;
-    (_iframe$contentWindow6 = iframe.contentWindow) == null || _iframe$contentWindow6.postMessage({
+    var _iframe$contentWindow4;
+    (_iframe$contentWindow4 = iframe.contentWindow) == null || _iframe$contentWindow4.postMessage({
       type: 'setPrevFocus',
       payload: {
         shouldFocusOnCVV: true
@@ -20124,7 +20152,7 @@ function CardElement({
     if (loading) return;
     setLoading(true);
     if (onBeforePaymentComplete) {
-      const result = await onBeforePaymentComplete();
+      const result = await onBeforePaymentComplete(payment.name);
       if (!result) {
         setSelectedCard(null);
         setSelectedCardCVV('');
@@ -20155,12 +20183,12 @@ function CardElement({
         window.location.href = res.data.redirection_url;
       }
     } else if (res.status === 400) {
-      var _res$data6, _res$data7, _res$data8;
-      if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data6 = res.data) == null ? void 0 : _res$data6.msg) === 'Retry limit reached.') {
+      var _res$data9, _res$data10, _res$data11;
+      if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data9 = res.data) == null ? void 0 : _res$data9.msg) === 'Retry limit reached.') {
         setErrorMessage(t('ERR_MSG_EXCEEDED_TRIALS'));
-      } else if (((_res$data7 = res.data) == null ? void 0 : _res$data7.message) === 'Session Error') {
+      } else if (((_res$data10 = res.data) == null ? void 0 : _res$data10.message) === 'Session Error') {
         setErrorMessage(t('ERR_MSG_ALREADY_PROCESSED'));
-      } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data8 = res.data) == null ? void 0 : _res$data8.msg) === 'Order has already paid.') {
+      } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data11 = res.data) == null ? void 0 : _res$data11.msg) === 'Order has already paid.') {
         setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
       } else {
         setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20177,22 +20205,65 @@ function CardElement({
       setErrorMessage(t('ERR_MSG_SOMETHING_WENT_WRONG'));
     }
   };
+  const handleOTPSubmit = async otp => {
+    var _iframe$contentWindow5, _payment$subType3;
+    setSendOTPLoading(true);
+    (_iframe$contentWindow5 = iframe.contentWindow) == null || _iframe$contentWindow5.postMessage({
+      type: 'otpData',
+      payload: {
+        paymentToken: payment.token,
+        subType: {
+          paymentToken: (_payment$subType3 = payment.subType) == null ? void 0 : _payment$subType3.token
+        },
+        otp
+      }
+    }, '*');
+  };
   const handleShowNewCardForm = () => {
     if (loading) return;
     setSelectedCard(null);
     setSelectedCardCVV('');
     setShowCardModal(true);
+    if (previousValidationRef.current) {
+      onCardValidationChanged == null || onCardValidationChanged(false);
+      previousValidationRef.current = false;
+    }
   };
   const handleViewSavedCards = () => {
     setShowCardModal(false);
     setIsIframeLoaded(false);
+    setCardHolderName('');
+    if (previousValidationRef.current) {
+      onCardValidationChanged == null || onCardValidationChanged(false);
+      previousValidationRef.current = false;
+    }
+  };
+  const handleCloseOTP = () => {
+    setShowOTP(false);
+    setErrorMessage('');
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: customStyle != null && (_customStyle$containe = customStyle.container) != null && _customStyle$containe.fontFamily ? '' : card_module['gotham'],
     style: Object.assign({}, customStyle == null ? void 0 : customStyle.container, isList && {
       padding: 'unset'
     }),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(CVVToolTipModal_CVVToolTipModal, {
+    children: [isMobile && showOTP && /*#__PURE__*/(0,jsx_runtime.jsx)(MobileOTPModal_MobileOTPModal, {
+      onClose: handleCloseOTP,
+      onSubmit: handleOTPSubmit,
+      length: 4,
+      modalHeader: `${4}-digit code`,
+      loading: sendOTPLoading
+    }), !isMobile && showOTP && /*#__PURE__*/(0,jsx_runtime.jsx)(ModalView_ModalView, {
+      showModal: showOTP,
+      onClose: handleCloseOTP,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(OTPModal_OTPModal, {
+        onClose: handleCloseOTP,
+        onSubmit: handleOTPSubmit,
+        length: 4,
+        modalHeader: `${4}-digit code`,
+        loading: sendOTPLoading
+      })
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(CVVToolTipModal_CVVToolTipModal, {
       onClose: () => setShowCVVTooltipModal(false),
       showModal: showCVVTooltipModal
     }), errorMessage && /*#__PURE__*/(0,jsx_runtime.jsx)(ErrorMessageViewTwo_ErrorMessage, {
@@ -26818,7 +26889,9 @@ function ApplePay(props) {
     customStyle,
     checkDiscount,
     isPixel,
-    isLoading
+    isLoading,
+    paymentName,
+    onLayerClick
   } = props;
   const [loading, setLoading] = (0,react.useState)(false);
   const [discount, setDiscount] = (0,react.useState)({
@@ -26865,13 +26938,6 @@ function ApplePay(props) {
       payload.requiredShippingContactFields = ['email', 'phone', 'name'];
     }
     const session = new window.ApplePaySession(3, payload);
-    if (onBeforePaymentComplete) {
-      const result = await onBeforePaymentComplete();
-      if (!result) {
-        setLoading(false);
-        return;
-      }
-    }
     session.onvalidatemerchant = async event => {
       console.log("start validation request");
       console.log(`validationURL: ${event.validationURL}`);
@@ -26967,7 +27033,7 @@ function ApplePay(props) {
     session.begin();
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: `w-full ${discount.hasDiscount ? `flex flex-col gap-2 !h-auto ${!isPixel ? 'sm:mb-6' : ''}` : ''}`,
+    className: `w-full ${isPixel ? 'relative' : ''} ${discount.hasDiscount ? `flex flex-col gap-2 !h-auto ${!isPixel ? 'sm:mb-6' : ''}` : ''}`,
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
       id: "apple-pay-button",
       icon: apple_pay_namespaceObject,
@@ -26977,6 +27043,9 @@ function ApplePay(props) {
       customStyle: customStyle,
       disabled: loading || isLoading,
       loading: loading || isLoading
+    }), isPixel && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+      onClick: () => onLayerClick == null ? void 0 : onLayerClick(setLoading),
+      className: "absolute inset-0 cursor-pointer"
     }), discount.hasDiscount && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
       className: "flex text-center flex-col justify-center text-green-400 text-sm font-medium leading-6 tracking-[0.01rem]",
       children: discount.discountMessage
@@ -27170,7 +27239,9 @@ function GooglePayElement({
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onErrorMessage,
-  isLoading
+  isLoading,
+  onProcessingPayment,
+  isProcessingPayment
 }) {
   var _String;
   const {
@@ -27179,22 +27250,33 @@ function GooglePayElement({
     keyPrefix: 'googlePay'
   });
   const [loading, setLoading] = (0,react.useState)(false);
+  const [startGooglePay, setStartGooglePay] = (0,react.useState)(false);
   const {
     amount,
     currency
   } = payment;
   const googlePay = payment;
   const integrationId = googlePay == null ? void 0 : googlePay.integrationId;
-  const handleSubmit = async (paymentToken, googlePayload) => {
-    var _res$data;
+  (0,react.useEffect)(() => {
+    if (startGooglePay && isProcessingPayment) {
+      const googlePayButton = document.getElementById('gpay-button-online-api-id');
+      googlePayButton == null || googlePayButton.click();
+    }
+  }, [startGooglePay, isProcessingPayment]);
+  const handleLayerClick = async () => {
     setLoading(true);
     if (onBeforePaymentComplete) {
-      const result = await onBeforePaymentComplete();
+      const result = await onBeforePaymentComplete(payment.name);
       if (!result) {
         setLoading(false);
         return;
       }
     }
+    setStartGooglePay(true);
+    onProcessingPayment(true);
+  };
+  const handleSubmit = async (paymentToken, googlePayload) => {
+    var _res$data;
     const res = await payWithGooglePay(paymentToken, integrationId, googlePayload);
     setLoading(false);
     const redirectionUrl = (_res$data = res.data) == null ? void 0 : _res$data.redirection_url;
@@ -27240,17 +27322,23 @@ function GooglePayElement({
     }
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(GooglePay, {
-      onSubmit: handleSubmit,
-      paymentToken: (googlePay == null ? void 0 : googlePay.token) || '',
-      paymentGateway: (googlePay == null ? void 0 : googlePay.gateway) || '',
-      isLiveIntegration: googlePay == null ? void 0 : googlePay.live,
-      merchantIdentifier: googlePay == null ? void 0 : googlePay.merchantIdentifier,
-      amount: (_String = String(amount)) == null ? void 0 : _String.replace(/,/g, ''),
-      currency: currency,
-      countryCode: currency == null ? void 0 : currency.slice(0, 2),
-      customStyle: customStyle,
-      isLoading: isLoading
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: "relative w-full",
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(GooglePay, {
+        onSubmit: handleSubmit,
+        paymentToken: (googlePay == null ? void 0 : googlePay.token) || '',
+        paymentGateway: (googlePay == null ? void 0 : googlePay.gateway) || '',
+        isLiveIntegration: googlePay == null ? void 0 : googlePay.live,
+        merchantIdentifier: googlePay == null ? void 0 : googlePay.merchantIdentifier,
+        amount: (_String = String(amount)) == null ? void 0 : _String.replace(/,/g, ''),
+        currency: currency,
+        countryCode: currency == null ? void 0 : currency.slice(0, 2),
+        customStyle: customStyle,
+        isLoading: isLoading
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
+        onClick: handleLayerClick,
+        className: "absolute inset-0 cursor-pointer"
+      })]
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(LoadingModal, {
       show: loading,
       text: t('LOADING_MSG')
@@ -27286,21 +27374,43 @@ const checkDiscount = paymentToken => {
 
 
 
+
 function ApplePayElements({
   payment,
   customStyle,
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onPaymentCancel,
-  isLoading
+  isLoading,
+  onProcessingPayment,
+  isProcessingPayment
 }) {
   var _amount$toString;
+  const [startApplePay, setStartApplePay] = (0,react.useState)(false);
   const {
     amount,
     currency,
     merchantName
   } = payment;
   const applePay = payment;
+  (0,react.useEffect)(() => {
+    if (startApplePay && isProcessingPayment) {
+      const applePayButton = document.getElementById('apple-pay-button');
+      applePayButton == null || applePayButton.click();
+    }
+  }, [startApplePay, isProcessingPayment]);
+  const handleLayerClick = async setLoading => {
+    setLoading(true);
+    if (onBeforePaymentComplete) {
+      const result = await onBeforePaymentComplete(payment.name);
+      if (!result) {
+        setLoading(false);
+        return;
+      }
+    }
+    setStartApplePay(true);
+    onProcessingPayment(true);
+  };
   const handleSubmit = (status, resData) => {
     window.location.href = resData.redirection_url;
   };
@@ -27320,7 +27430,9 @@ function ApplePayElements({
     customStyle: customStyle,
     checkDiscount: checkDiscount,
     isPixel: true,
-    isLoading: isLoading
+    isLoading: isLoading,
+    paymentName: payment.name,
+    onLayerClick: handleLayerClick
   });
 }
 /* harmony default export */ const Payments_ApplePay = (ApplePayElements);
@@ -27431,25 +27543,29 @@ function PaymentsList(props) {
   const [savedCardsList, setSavedCardsList] = (0,react.useState)(savedCards);
   const [errorMessage, setErrorMessage] = (0,react.useState)('');
   const [isLoading, setIsLoading] = (0,react.useState)(false);
+  const [isProcessingPayment, setIsProcessingPayment] = (0,react.useState)(false);
   (0,react.useEffect)(() => {
-    async function getData() {
-      setIsLoading(true);
-      const {
-        res,
-        paymentList,
-        savedCards
-      } = await fetchPayments(publicKey, clientSecret, selectedPaymentMethods);
-      setIsLoading(false);
-      if (res.status === 200) {
-        setPaymentList(paymentList);
-        setSavedCardsList(savedCards);
-      }
-    }
     window.addEventListener('updateIntentionData', getData);
     return () => {
       window.removeEventListener('updateIntentionData', getData);
     };
   }, []);
+  const getData = async () => {
+    setIsLoading(true);
+    const {
+      res,
+      paymentList,
+      savedCards
+    } = await fetchPayments(publicKey, clientSecret, selectedPaymentMethods);
+    setIsLoading(false);
+    if (res.status === 200) {
+      setPaymentList(paymentList);
+      setSavedCardsList(savedCards);
+    }
+  };
+  const handleOnBeforePaymentComplete = async paymentMethod => {
+    return await onBeforePaymentComplete(paymentMethod, getData);
+  };
   const hasOnlyXPays = () => {
     const xPays = ['apple-pay', 'google-pay'];
     return paymentList.every(method => xPays.includes(method.name));
@@ -27494,18 +27610,22 @@ function PaymentsList(props) {
         }) : /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
           children: [isApplePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(Payments_ApplePay, {
             payment: applePaymentMethod,
-            onBeforePaymentComplete: onBeforePaymentComplete,
+            onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
             onAfterPaymentComplete: onAfterPaymentComplete,
             onPaymentCancel: onPaymentCancel,
             customStyle: customStyle == null ? void 0 : customStyle.button,
-            isLoading: isLoading
+            isLoading: isLoading,
+            onProcessingPayment: setIsProcessingPayment,
+            isProcessingPayment: isProcessingPayment
           }), isGooglePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(GooglePayElement, {
             payment: googlePaymentMethod,
             customStyle: customStyle == null ? void 0 : customStyle.button,
-            onBeforePaymentComplete: onBeforePaymentComplete,
+            onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
             onAfterPaymentComplete: onAfterPaymentComplete,
             onErrorMessage: setErrorMessage,
-            isLoading: isLoading
+            isLoading: isLoading,
+            onProcessingPayment: setIsProcessingPayment,
+            isProcessingPayment: isProcessingPayment
           })]
         })
       }), paymentList.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -27538,12 +27658,14 @@ function PaymentsList(props) {
         savedCards: savedCardsList,
         forceSaveCard,
         showSaveCard,
-        onBeforePaymentComplete,
+        onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
         onAfterPaymentComplete,
         onCardValidationChanged,
         showPaymobLogo,
         hideCardHolderName,
         isLoading,
+        onProcessingPayment: setIsProcessingPayment,
+        isProcessingPayment,
         isList: true
       })
     })]
@@ -31437,9 +31559,9 @@ class Pixel {
       this.render();
     }
   }
-  async handleBeforePaymentComplete() {
+  async handleBeforePaymentComplete(paymentMethod, updateIntentionData) {
     if (this._options.beforePaymentComplete) {
-      const result = await this._options.beforePaymentComplete();
+      const result = await this._options.beforePaymentComplete(paymentMethod, updateIntentionData);
       if (result === false) return false;
       return true;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paymob-pixel-alpha",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
   "homepage": "https://developers.paymob.com",

package/styles.css

@@ -604,6 +604,10 @@ video {
   visibility: visible !important;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .invisible {
   visibility: hidden;
 }