paymob-pixel-alpha 1.1.1 → 1.1.3

package/main.js

@@ -10216,7 +10216,8 @@ function ModalView_ModalView(props) {
   const {
     onClose,
     showModal,
-    children
+    children,
+    customStyle
   } = props;
   const stopPropagation = e => {
     e.stopPropagation();
@@ -10233,6 +10234,9 @@ function ModalView_ModalView(props) {
         className: "relative w-auto max-h-full mobile:w-11/12",
         children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           className: `relative bg-white shadow ${borderStyle === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'}`,
+          style: {
+            borderRadius: (customStyle == null ? void 0 : customStyle['borderRadius']) || ''
+          },
           children: children
         })
       })
@@ -10488,7 +10492,7 @@ function OTPViewTwo_OTP(props) {
   const [value, setValue] = (0,react.useState)(otpValue || '');
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
 
   //regular expression to tests whether a string is a digit
   const RExp_DIGIT = new RegExp(/^\d+$/);
@@ -10644,7 +10648,7 @@ const GenericOTP = props => {
   } = props;
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
   const [otp, setOTP] = (0,react.useState)('');
   const handleOTPChange = e => {
     const value = e.target.value.replace(/\D/g, '');
@@ -10696,7 +10700,8 @@ function OTPModal_OTPModal(props) {
     setResetCounter,
     loading,
     error,
-    onErrorMessage
+    onErrorMessage,
+    customStyle
   } = props;
   const {
     t
@@ -10706,7 +10711,7 @@ function OTPModal_OTPModal(props) {
   const [resendingOTP, setResendingOTP] = (0,react.useState)(false);
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
   (0,react.useEffect)(() => {
     if (!loading && resendingOTP) {
       if (error) {
@@ -10733,8 +10738,10 @@ function OTPModal_OTPModal(props) {
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "max-w-[400px]",
+    style: customStyle == null ? void 0 : customStyle['container'],
     children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "flex px-6 py-6 flex-col gap-2 items-start",
+      style: customStyle == null ? void 0 : customStyle['label'],
       children: [length && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
         className: "text-lg font-semibold",
         children: modalHeader
@@ -10756,6 +10763,7 @@ function OTPModal_OTPModal(props) {
             onErrorMessage: onErrorMessage
           }), error && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
             className: "text-red-600 text-sm font-normal leading-[1.125rem] tracking-[.01rem]",
+            style: customStyle == null ? void 0 : customStyle['error'],
             children: error
           })]
         }, resetOtpComponent.toString()), onResend && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -10769,6 +10777,7 @@ function OTPModal_OTPModal(props) {
         })]
       }), (loading || resendingOTP) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "flex justify-center items-center bg-white w-full h-20 flex-col gap-4",
+        style: customStyle == null ? void 0 : customStyle['container'],
         children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "flex animate-pulse",
           children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -10792,17 +10801,18 @@ function OTPModal_OTPModal(props) {
         onClick: onClose,
         type: "button",
         className: `py-[10px] px-4 md:py-3 md:px-4 text-gray-500 bg-white hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 ${borderStyle === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} border border-gray-200 text-base hover:text-gray-900 focus:z-10`,
+        style: customStyle == null ? void 0 : customStyle['cancelButton'],
         children: "Cancel"
       }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
         label: "Submit",
         id: "pay-button",
         onClick: handleOtpSubmit,
         disabled: !otp || loading,
-        customStyle: {
+        customStyle: Object.assign({
           height: 'unset',
           padding: '0.625rem 1rem'
-        },
-        className: "mt-0"
+        }, customStyle == null ? void 0 : customStyle['button']),
+        className: "!mt-0"
       })]
     })]
   });
@@ -17089,38 +17099,8 @@ function SecureCheckout(props) {
   });
 }
 /* harmony default export */ const components_SecureCheckout = ((/* unused pure expression or super */ null && (SecureCheckout)));
-;// CONCATENATED MODULE: ../../libs/kit-components/src/assets/icons/close-icon.svg
-var close_icon_path;
-var close_icon_excluded = (/* unused pure expression or super */ null && (["title", "titleId"]));
-function close_icon_extends() { return close_icon_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, close_icon_extends.apply(null, arguments); }
-function close_icon_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = close_icon_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function close_icon_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-
-
-var SvgCloseIcon = function SvgCloseIcon(_ref, ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = close_icon_objectWithoutProperties(_ref, close_icon_excluded);
-  return /*#__PURE__*/React.createElement("svg", close_icon_extends({
-    width: "800px",
-    height: "800px",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, close_icon_path || (close_icon_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z",
-    fill: "#667085"
-  })));
-};
-var close_icon_ForwardRef = /*#__PURE__*/(/* unused pure expression or super */ null && (forwardRef(SvgCloseIcon)));
-
-/* harmony default export */ const close_icon = (__webpack_require__.p + "close-icon.371f61902d3cf35dc76286080a72af1f.svg");
+;// CONCATENATED MODULE: ../../libs/kit-components/src/assets/icons/close-icon.png
+const close_icon_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAACXBIWXMAAAFKAAABSgHphfmiAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAu5JREFUeJztms9u2kAQh38D4U6u8AwR4pGCgpq0lYLEIZIvlg9N6aGCtLRCUJEnqpTkHeAa7q69uQQRFY0x+9eR5rtwwMyOPtZrz+ySUgrCPrXQCVQVEcMgYhhEDIOIYRAxDCKGQcQwiBgGEcMgYhhEDIOIYTgxDXA1HHVVlp/lhKf5OHqwkVQVciGTtsOHwZevILoBQACUAqbtZjqI4zg3SepYkiSprTaNCQGft7kQMJqNo0g3praYq+Gom+f539dE3rJsNdO+LzlJktTWm8YCQO+/rxTV6t3Z95tHnbjaa4zK8jPsSwGA3nrTWCRJ4nz9KpACAIQs6+jG1k4+JzwB4KabczkHpACAQr2uNVsAAzHzcfSggGnBJc7klJACBUx1byPA8HG9mETXSmFWcElv/Xzyx6YcItDqufELBVKg1H27mQ5MxjFKWCmoxV30sVAO0bktOUSg/vXtbyJcFiR13zr9d2G6+Bsn60uOTymApTdf13J8SwEslgSu5ISQAliulWzLCSUFcFBE2pITUgrgqLo2lRNaCuCw7aArpwpSAMf9mGPlVEUKYNh2KEuZV3gAy9fPwmt8Ve5exAAlb5EiPM2ULd5am6VuK/7HXqUAnnu+WnICSAECNMOPkhNICiC7BCzexRy1CFtsWRyL1wG1nkyB5HgbzOhxHUCOvOAxOP8HyvZoW820P59EF757yBxOBzi29vHdQy7CWXDdgrAqcpwENq2SqyDHelBbrYPQcqwGtN1PCSnH6g6hiyZTKDlWArnuvIWQ8262TX3LMQrgu0frU47Rj/uD27sDtc/Sdj9FKaj2afoJuxJiH6Lz1aYxMRnHxVGzLU7rmjIHh6p21AzwUOzFcZy3mmkf/Myp3FEzbxXwATnhjpoRMMJOjgLRD58nNoGdHAX8fJsLASOTo2bG/ZjL4bcOsqyDev3RJBEb2MzF24bbe0N2CRhEDIOIYRAxDCKGQcQwiBgGEcMgYhhEDIOIYRAxDCKG4QXD79JL5r6MQwAAAABJRU5ErkJggg==";
 ;// CONCATENATED MODULE: ../../libs/kit-components/src/components/OrderDetailsModal/index.tsx
 
 
@@ -17377,7 +17357,8 @@ function MobileOTPModal_MobileOTPModal(props) {
     setResetCounter,
     error,
     onErrorMessage,
-    loading
+    loading,
+    customStyle
   } = props;
   const {
     t
@@ -17421,13 +17402,15 @@ function MobileOTPModal_MobileOTPModal(props) {
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       onClick: e => e.stopPropagation(),
       className: "flex relative flex-col gap-2 py-8 w-full bg-white h-[88%] rounded-3xl",
+      style: customStyle == null ? void 0 : customStyle['container'],
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
         onClick: onClose,
         className: "absolute top-4 right-4 w-6 cursor-pointer",
-        src: close_icon,
+        src: close_icon_namespaceObject,
         alt: "close"
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "flex flex-col gap-2 px-6 items-start",
+        style: customStyle == null ? void 0 : customStyle['label'],
         children: [length && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
           className: "text-lg font-semibold",
           children: modalHeader
@@ -17449,6 +17432,7 @@ function MobileOTPModal_MobileOTPModal(props) {
               onErrorMessage: onErrorMessage
             }), error && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
               className: "text-red-600 text-sm font-normal leading-[1.125rem] tracking-[.01rem]",
+              style: customStyle == null ? void 0 : customStyle['error'],
               children: error
             })]
           }, resetOtpComponent.toString()), onResend && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -17462,6 +17446,7 @@ function MobileOTPModal_MobileOTPModal(props) {
           })]
         }), (loading || resendingOTP) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "flex justify-center items-center bg-white w-full h-20 flex-col gap-4",
+          style: customStyle == null ? void 0 : customStyle['container'],
           children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
             className: "flex animate-pulse",
             children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -17486,7 +17471,8 @@ function MobileOTPModal_MobileOTPModal(props) {
           id: "pay-button",
           onClick: handleOtpSubmit,
           disabled: !otp || loading,
-          className: "w-full"
+          className: "w-full",
+          customStyle: customStyle == null ? void 0 : customStyle['button']
         })
       })]
     })
@@ -19862,6 +19848,45 @@ const payWithSavedCard = payload => {
     api_source: 'PIXEL'
   }).then(res => res).catch(err => err == null ? void 0 : err.response);
 };
+;// CONCATENATED MODULE: ./src/utils/getErrorMsg.ts
+const getErrorMsg_isString = data => typeof data === 'string';
+const DECLINED_MESSAGE = 'Payment is declined';
+const getErrorMsg = err => {
+  var _data$data, _data$data2;
+  const data = err == null ? void 0 : err.data;
+  if (!err) {
+    return DECLINED_MESSAGE;
+  }
+  if (getErrorMsg_isString(err)) {
+    return err;
+  }
+  if (data != null && data['data.message'] && getErrorMsg_isString(data['data.message'])) {
+    return data['data.message'];
+  }
+  if (data != null && data.message && getErrorMsg_isString(data.message)) {
+    return data.message;
+  }
+  if (data != null && data.msg && getErrorMsg_isString(data.msg)) {
+    return data.msg;
+  }
+  if (data != null && data.detail && getErrorMsg_isString(data.detail)) {
+    return data.detail;
+  }
+  if (data != null && data.error && getErrorMsg_isString(data.error)) {
+    return data.error;
+  }
+  if (data != null && data.error_message && getErrorMsg_isString(data.error_message)) {
+    return data.error_message;
+  }
+  if (data != null && (_data$data = data.data) != null && _data$data.message && getErrorMsg_isString((_data$data2 = data.data) == null ? void 0 : _data$data2.message)) {
+    var _data$data3;
+    return (_data$data3 = data.data) == null ? void 0 : _data$data3.message;
+  }
+  if (Array.isArray(data) && getErrorMsg_isString(data[0])) {
+    return data[0];
+  }
+  return DECLINED_MESSAGE;
+};
 ;// CONCATENATED MODULE: ./src/components/Payments/Card/index.tsx
 
 
@@ -19873,6 +19898,7 @@ const payWithSavedCard = payload => {
 // import { DeleteCard } from '@unified-checkout/card';
 
 
+
 function CardElement({
   payment,
   customStyle,
@@ -19890,7 +19916,7 @@ function CardElement({
   hideCardHolderName,
   isLoading
 }) {
-  var _customStyle$containe;
+  var _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3;
   const {
     token,
     amount,
@@ -19919,9 +19945,11 @@ function CardElement({
   const [selectedCardCVV, setSelectedCardCVV] = (0,react.useState)('');
   const [showCardModal, setShowCardModal] = (0,react.useState)(false);
   const [showCVVTooltipModal, setShowCVVTooltipModal] = (0,react.useState)(false);
+  const previousValidationRef = (0,react.useRef)(false);
   const [showOTP, setShowOTP] = (0,react.useState)(false);
   const [sendOTPLoading, setSendOTPLoading] = (0,react.useState)(false);
-  const previousValidationRef = (0,react.useRef)(false);
+  const [paymentId, setPaymentId] = (0,react.useState)('');
+  const [otpErrorMessage, setOTPErrorMessage] = (0,react.useState)('');
   const isCardValid = hideCardHolderName ? !isActionBtnDisabled : !(isActionBtnDisabled || !cardHolderName);
   const isAmexCardSelected = (selectedCard == null ? void 0 : selectedCard.type) === constants_CARD_TYPES.AMEX;
   const selectedCardCvvLength = selectedCardCVV.length;
@@ -19966,7 +19994,8 @@ function CardElement({
     };
     const handlePaymentResponse = ({
       res,
-      requiresOTP
+      requiresOTP,
+      isOTPResponse
     }) => {
       var _res$data, _res$data2, _res$data3;
       setShouldSubmitData(false);
@@ -19975,20 +20004,29 @@ function CardElement({
       if (cardHolderInput) {
         setTimeout(() => cardHolderInput.disabled = false, 1000);
       }
+      const redirectionUrl = ((_res$data = res.data) == null ? void 0 : _res$data.redirection_url) || ((_res$data2 = res.data) == null ? void 0 : _res$data2.redirect_url);
       if (requiresOTP) {
+        setPaymentId(res.data.payment_id);
         setShowOTP(true);
-      } else if (onAfterPaymentComplete && ((_res$data = res.data) == null ? void 0 : _res$data.is_3d_secure) !== 'true') {
+      } else if (onAfterPaymentComplete && ((_res$data3 = res.data) == null ? void 0 : _res$data3.is_3d_secure) !== 'true') {
         onAfterPaymentComplete(res);
-      } 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 === 200 && isOTPResponse) {
+        if (redirectionUrl && (res.data.result === 'CAPTURED' || res.data.result === 'APPROVED')) {
+          window.location.href = redirectionUrl;
+        } else {
+          setOTPErrorMessage(getErrorMsg(res));
+        }
+      } else if (res.status !== 200 && isOTPResponse) {
+        setOTPErrorMessage(getErrorMsg(res));
+      } else if (res.status === 200 && redirectionUrl) {
+        window.location.href = redirectionUrl;
       } 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$data4, _res$data5, _res$data6;
+        if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data4 = res.data) == null ? void 0 : _res$data4.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$data5 = res.data) == null ? void 0 : _res$data5.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$data6 = res.data) == null ? void 0 : _res$data6.msg) === 'Order has already paid.') {
           setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
         } else {
           setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20180,12 +20218,12 @@ function CardElement({
         window.location.href = res.data.redirection_url;
       }
     } else if (res.status === 400) {
-      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.') {
+      var _res$data7, _res$data8, _res$data9;
+      if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data7 = res.data) == null ? void 0 : _res$data7.msg) === 'Retry limit reached.') {
         setErrorMessage(t('ERR_MSG_EXCEEDED_TRIALS'));
-      } else if (((_res$data10 = res.data) == null ? void 0 : _res$data10.message) === 'Session Error') {
+      } else if (((_res$data8 = res.data) == null ? void 0 : _res$data8.message) === 'Session Error') {
         setErrorMessage(t('ERR_MSG_ALREADY_PROCESSED'));
-      } 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.') {
+      } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data9 = res.data) == null ? void 0 : _res$data9.msg) === 'Order has already paid.') {
         setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
       } else {
         setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20212,7 +20250,8 @@ function CardElement({
         subType: {
           paymentToken: (_payment$subType3 = payment.subType) == null ? void 0 : _payment$subType3.token
         },
-        otp
+        otp,
+        paymentId
       }
     }, '*');
   };
@@ -20249,16 +20288,43 @@ function CardElement({
       onSubmit: handleOTPSubmit,
       length: 4,
       modalHeader: `${4}-digit code`,
-      loading: sendOTPLoading
+      loading: sendOTPLoading,
+      onErrorMessage: setOTPErrorMessage,
+      error: otpErrorMessage,
+      customStyle: {
+        container: {
+          backgroundColor: (customStyle == null || (_customStyle$containe2 = customStyle.container) == null ? void 0 : _customStyle$containe2.backgroundColor) || '',
+          borderRadius: (customStyle == null || (_customStyle$button = customStyle.button) == null ? void 0 : _customStyle$button.borderRadius) || ''
+        },
+        button: customStyle == null ? void 0 : customStyle.button,
+        label: customStyle == null ? void 0 : customStyle.label,
+        error: customStyle == null ? void 0 : customStyle.error
+      }
     }), !isMobile && showOTP && /*#__PURE__*/(0,jsx_runtime.jsx)(ModalView_ModalView, {
       showModal: showOTP,
       onClose: handleCloseOTP,
+      customStyle: customStyle == null ? void 0 : customStyle.button,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(OTPModal_OTPModal, {
         onClose: handleCloseOTP,
         onSubmit: handleOTPSubmit,
         length: 4,
         modalHeader: `${4}-digit code`,
-        loading: sendOTPLoading
+        loading: sendOTPLoading,
+        onErrorMessage: setOTPErrorMessage,
+        error: otpErrorMessage,
+        customStyle: {
+          container: {
+            backgroundColor: (customStyle == null || (_customStyle$containe3 = customStyle.container) == null ? void 0 : _customStyle$containe3.backgroundColor) || ''
+          },
+          cancelButton: Object.assign({}, customStyle == null ? void 0 : customStyle.button, {
+            backgroundColor: '#fff',
+            lineHeight: 'normal',
+            color: ''
+          }),
+          button: customStyle == null ? void 0 : customStyle.button,
+          label: customStyle == null ? void 0 : customStyle.label,
+          error: customStyle == null ? void 0 : customStyle.error
+        }
       })
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(CVVToolTipModal_CVVToolTipModal, {
       onClose: () => setShowCVVTooltipModal(false),
@@ -20284,7 +20350,7 @@ function CardElement({
         })]
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "[&>div:nth-child(even)]:w-[calc(100%-1px)]",
-        children: [!isIframeLoaded && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        children: [(!isIframeLoaded || !payment.token) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "-mt-1",
           children: [/*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
             height: 37
@@ -20308,14 +20374,18 @@ function CardElement({
           style: {
             border: '0',
             overflow: 'hidden',
-            display: isIframeLoaded ? 'block' : 'none'
+            display: isIframeLoaded && payment.token ? 'block' : 'none'
           },
           frameBorder: "0",
           scrolling: "no",
           width: "100%",
           height: height,
-          onLoad: () => setIsIframeLoaded(true)
-        }), isIframeLoaded && /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+          onLoad: () => {
+            setTimeout(() => {
+              setIsIframeLoaded(true);
+            }, 200);
+          }
+        }), isIframeLoaded && payment.token && /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
           children: [!hideCardHolderName && /*#__PURE__*/(0,jsx_runtime.jsx)(components_CardHolder_CardHolder, {
             onChange: handleCardHolderChange,
             focusToPrevInput: handleFocusToPrevInput,
@@ -27042,7 +27112,7 @@ function ApplePay(props) {
       icon: apple_pay_namespaceObject,
       fullWidth: true,
       onClick: handleSubmit,
-      className: `!mt-0 !p-0 ${discount.hasDiscount ? 'min-h-[2.875rem]' : ''}`,
+      className: `!bg-black !mt-0 !p-0 ${discount.hasDiscount ? 'min-h-[2.875rem]' : ''}`,
       customStyle: customStyle,
       disabled: loading || isLoading,
       loading: loading || isLoading

package/package.json

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

package/styles.css

@@ -1698,6 +1698,11 @@ video {
   border-top-color: rgb(255 21 82 / var(--tw-border-opacity));
 }
 
+.\!bg-black {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
+}
+
 .bg-\[\#0002\] {
   background-color: #0002;
 }

package/close-icon.371f61902d3cf35dc76286080a72af1f.svg

@@ -1,19 +0,0 @@
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import * as React from "react";
-var SvgCloseIcon = function SvgCloseIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 800,
-    height: 800,
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "#667085",
-    fillRule: "evenodd",
-    d: "M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414",
-    clipRule: "evenodd"
-  })));
-};
-export { SvgCloseIcon as ReactComponent };
-export default "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkyODkgNS4yOTI4OUM1LjY4MzQyIDQuOTAyMzcgNi4zMTY1OCA0LjkwMjM3IDYuNzA3MTEgNS4yOTI4OUwxMiAxMC41ODU4TDE3LjI5MjkgNS4yOTI4OUMxNy42ODM0IDQuOTAyMzcgMTguMzE2NiA0LjkwMjM3IDE4LjcwNzEgNS4yOTI4OUMxOS4wOTc2IDUuNjgzNDIgMTkuMDk3NiA2LjMxNjU4IDE4LjcwNzEgNi43MDcxMUwxMy40MTQyIDEyTDE4LjcwNzEgMTcuMjkyOUMxOS4wOTc2IDE3LjY4MzQgMTkuMDk3NiAxOC4zMTY2IDE4LjcwNzEgMTguNzA3MUMxOC4zMTY2IDE5LjA5NzYgMTcuNjgzNCAxOS4wOTc2IDE3LjI5MjkgMTguNzA3MUwxMiAxMy40MTQyTDYuNzA3MTEgMTguNzA3MUM2LjMxNjU4IDE5LjA5NzYgNS42ODM0MiAxOS4wOTc2IDUuMjkyODkgMTguNzA3MUM0LjkwMjM3IDE4LjMxNjYgNC45MDIzNyAxNy42ODM0IDUuMjkyODkgMTcuMjkyOUwxMC41ODU4IDEyTDUuMjkyODkgNi43MDcxMUM0LjkwMjM3IDYuMzE2NTggNC45MDIzNyA1LjY4MzQyIDUuMjkyODkgNS4yOTI4OVoiIGZpbGw9IiM2NjcwODUiLz4KPC9zdmc+";