paymob-pixel-alpha 1.1.2 → 1.1.4

package/main.css

@@ -76,7 +76,7 @@
   }
 }
 
-.card_action-btn__9Y5Ha{display:flex;justify-content:center;gap:1rem}.card_gotham__a35IS{font-family:"Gotham"}.card_gotham__a35IS *{font-family:"Gotham"}
+.card_action-btn__9Y5Ha{display:flex;justify-content:center;gap:1rem}.card_gotham__a35IS{font-family:"Gotham"}.card_gotham__a35IS *{font-family:"Gotham"}.card_iframe__cRxaZ{border:0;overflow:hidden;z-index:5;position:relative}
 .bank-details_actions__LE0s9{display:flex;justify-content:center;margin-top:.75rem}.bank-details_row__X6sSZ{display:flex;margin-bottom:.75rem;column-gap:.75rem}.bank-details_accountNoLogo__KOR5M{position:relative;left:-10px}
 .bank-selection_actions__fy7Ox{display:flex;justify-content:center;margin-top:1.5rem}
 .otp_error-message__Jl9Pb{color:red;font-size:13px;margin-bottom:20px}.otp_hint__FF51s{font-size:11px;color:#b7b7b7;font-weight:bold;text-align:center;display:block;margin-bottom:20px}.otp_hint__FF51s p{margin:0 5px}.otp_otp-container__qxM9e{margin-bottom:1.25rem}.otp_resend-otp-container__RTV7D{margin-bottom:1.25rem}.otp_actions__8W-lZ{display:flex;justify-content:center}

package/main.js

@@ -7440,7 +7440,7 @@ function InputViewTwo_InputViewTwo(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: "flex flex-col w-full [&_*]:border-box relative",
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: [`flex justify-between items-center gap-2 py-2.5 px-3 w-full h-10 relative overflow-hidden border border-gray-300 ${borderStyleState === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} bg-white`, className].join(' '),
+      className: [`flex justify-between items-center gap-2 py-2.5 px-3 w-full h-10 relative overflow-hidden border border-solid border-gray-300 ${borderStyleState === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} bg-white`, className].join(' '),
       style: customStyle != null && customStyle.input ? customStyle == null ? void 0 : customStyle.input : customStyle,
       children: [label && /*#__PURE__*/(0,jsx_runtime.jsx)("label", {
         className: "w-5 h-5 text-sm flex justify-start items-center whitespace-nowrap text-end",
@@ -9990,10 +9990,21 @@ function Accordion(props) {
   const {
     borderStyle
   } = useSelector(state => state.customization);
+  const isSympl = type === 'sympl' || type === 'symplv2';
   const sortedPaymentNames = ['card', 'e-wallet', 'installments', 'pay later', 'kiosk'];
+  let badge = null;
+  if (isSympl) {
+    badge = /*#__PURE__*/_jsx("div", {
+      className: "absolute -top-3 left-1/2 -translate-x-1/2 w-auto min-w-[8rem] h-4 flex px-2 py-[0.6rem] justify-center items-center rounded-2xl bg-gray-100 overflow-visible",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "text-gray-700 text-[0.65rem] font-medium leading-6 tracking-[0.01rem] whitespace-nowrap",
+        children: "0% interest on any card"
+      })
+    });
+  }
   return /*#__PURE__*/_jsxs("div", {
-    className: `border border-gray-200 ${borderStyle === borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} w-full px-4`,
-    children: [/*#__PURE__*/_jsxs("div", {
+    className: `border border-gray-200 ${borderStyle === borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} w-full px-4 relative`,
+    children: [badge, /*#__PURE__*/_jsxs("div", {
       className: "flex gap-3 items-center cursor-pointer py-4",
       onClick: toggleAccordion,
       children: [/*#__PURE__*/_jsx("img", {
@@ -17078,7 +17089,7 @@ function SecureCheckout(props) {
   } = useTranslation('kitComponents');
   return /*#__PURE__*/_jsxs("div", {
     ref: scrollRef,
-    className: `flex ${!isMobile ? 'border-b justify-between border-gray-200 mx-20 py-11' : 'justify-center'} ${isMobile && isDark(colors == null ? void 0 : colors.accent) ? '[&_*]:text-white' : ''}`,
+    className: `flex ${!isMobile ? 'border-b justify-between border-gray-200 mx-20 [@media(max-height:880px)]:py-4 py-11' : 'justify-center'} ${isMobile && isDark(colors == null ? void 0 : colors.accent) ? '[&_*]:text-white' : ''}`,
     style: {
       background: isMobile ? colors == null ? void 0 : colors.accent : ''
     },
@@ -18274,7 +18285,7 @@ function cardFormViewTwo_Card(props) {
         id: "pay-button",
         loading: loading,
         fullWidth: true,
-        disabled: !isDirty || !isValid,
+        disabled: !isDirty || !isValid || loading,
         customStyle: styling.button
       })]
     })]
@@ -18757,7 +18768,8 @@ function IframeCard(props) {
     isOmanNetCard,
     setIsOmanNetCard,
     hasOmanNetIntegration,
-    setHasOmanNetIntegration
+    setHasOmanNetIntegration,
+    handleGenerateToken
   } = props;
   const [iframeCardHight, setIframeCardHight] = useState();
   const [iframeCustomStyles, setIframeCustomStyles] = useState({});
@@ -18770,6 +18782,9 @@ function IframeCard(props) {
   const [cardHolderError, setCardHolderError] = useState();
   const [cardHolderNameHidden, setCardHolderNameHidden] = useState(false);
   const [currency, setCurrency] = useState('');
+  const [country, setCountry] = useState('');
+  const [publicKey, setPublicKey] = useState('');
+  const [integrationType, setIntegrationType] = useState('directPayment');
   const {
     handleSubmit,
     errors,
@@ -18782,7 +18797,8 @@ function IframeCard(props) {
     cardType
   } = useHookForm({
     isIframe: true,
-    hasOmanNetIntegration
+    hasOmanNetIntegration,
+    countryName: country
   });
   const timeoutIdRef = useRef();
   useEffect(() => {
@@ -18803,6 +18819,8 @@ function IframeCard(props) {
       handleCardStylesFromSDK(event.data.payload);
     } else if (event.data.type === 'cardHolderError') {
       handleCardHolderErrorFromSDK(event.data.payload);
+    } else if (event.data.type === 'tokenizeCard') {
+      handleTokenizeCardDataFromSDK(event.data.payload);
     }
   };
   const handleCardHolderErrorFromSDK = payload => {
@@ -18838,6 +18856,21 @@ function IframeCard(props) {
     if (payload.currency) {
       setCurrency(payload.currency);
     }
+    if (payload.country) {
+      setCountry(payload.country);
+    }
+  };
+  const handleTokenizeCardDataFromSDK = payload => {
+    setIntegrationType('tokenization');
+    if (payload.publicKey) {
+      setPublicKey(payload.publicKey);
+    }
+    if (payload.cardHolderName) {
+      setCardHolderName(payload.cardHolderName);
+    }
+    if (payload.shouldSubmitData) {
+      setShouldSubmitData(payload.shouldSubmitData);
+    }
   };
   const handleCardStylesFromSDK = payload => {
     var _payload$options;
@@ -18872,14 +18905,22 @@ function IframeCard(props) {
     if (shouldSubmitData) {
       if (isValid && isDirty) {
         const data = getValues();
-        handleCardSubmit({
-          data,
-          cardHolderName,
-          paymentToken: hasOmanNetIntegration && isOmanNetCard ? subType.paymentToken : paymentToken,
-          subType: hasOmanNetIntegration && isOmanNetCard ? subType.type : 'CARD',
-          saveCard,
-          tenure
-        });
+        if (integrationType === 'tokenization') {
+          handleGenerateToken({
+            data,
+            cardHolderName,
+            publicKey
+          });
+        } else {
+          handleCardSubmit({
+            data,
+            cardHolderName,
+            paymentToken: hasOmanNetIntegration && isOmanNetCard ? subType.paymentToken : paymentToken,
+            subType: hasOmanNetIntegration && isOmanNetCard ? subType.type : 'CARD',
+            saveCard,
+            tenure
+          });
+        }
         setShouldSubmitData(false);
       }
     }
@@ -19832,7 +19873,7 @@ const environment = {
 };
 ;// CONCATENATED MODULE: ./src/components/Payments/Card/card.module.scss
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const card_module = ({"action-btn":"card_action-btn__9Y5Ha","gotham":"card_gotham__a35IS"});
+/* harmony default export */ const card_module = ({"action-btn":"card_action-btn__9Y5Ha","gotham":"card_gotham__a35IS","iframe":"card_iframe__cRxaZ"});
 ;// CONCATENATED MODULE: ./src/services/cardService.ts
 
 const payWithSavedCard = payload => {
@@ -19887,6 +19928,11 @@ const getErrorMsg = err => {
   }
   return DECLINED_MESSAGE;
 };
+;// CONCATENATED MODULE: ./src/constants/index.ts
+const INTEGRATION_TYPE = {
+  DIRECT_PAYMENT: 'directPayment',
+  TOKENIZATION: 'tokenization'
+};
 ;// CONCATENATED MODULE: ./src/components/Payments/Card/index.tsx
 
 
@@ -19899,7 +19945,8 @@ const getErrorMsg = err => {
 
 
 
-function CardElement({
+
+const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   payment,
   customStyle,
   tenure,
@@ -19914,8 +19961,11 @@ function CardElement({
   onCardValidationChanged,
   showPaymobLogo,
   hideCardHolderName,
-  isLoading
-}) {
+  isLoading,
+  country,
+  integrationType,
+  publicKey
+}, ref) => {
   var _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3;
   const {
     token,
@@ -19933,7 +19983,7 @@ function CardElement({
   const [isActionBtnDisabled, setIsActionBtnDisabled] = (0,react.useState)(false);
   const [shouldSubmitData, setShouldSubmitData] = (0,react.useState)(false);
   const [saveCard, setSaveCard] = (0,react.useState)(false);
-  const [height, setHeight] = (0,react.useState)(80.5);
+  const [height, setHeight] = (0,react.useState)(80);
   const [errorMessage, setErrorMessage] = (0,react.useState)('');
   const iframeRef = (0,react.useRef)(null);
   const [errors, setErrors] = (0,react.useState)({});
@@ -19950,6 +20000,7 @@ function CardElement({
   const [sendOTPLoading, setSendOTPLoading] = (0,react.useState)(false);
   const [paymentId, setPaymentId] = (0,react.useState)('');
   const [otpErrorMessage, setOTPErrorMessage] = (0,react.useState)('');
+  const tokenizationResolve = (0,react.useRef)(null);
   const isCardValid = hideCardHolderName ? !isActionBtnDisabled : !(isActionBtnDisabled || !cardHolderName);
   const isAmexCardSelected = (selectedCard == null ? void 0 : selectedCard.type) === constants_CARD_TYPES.AMEX;
   const selectedCardCvvLength = selectedCardCVV.length;
@@ -19958,7 +20009,7 @@ function CardElement({
   const shouldDisablePayBtn = showCvvInput ? loading || (isAmexCardSelected ? selectedCardCvvLength !== constants_AMEX_CVV_LENGTH : selectedCardCvvLength !== constants_CVV_LENGTH) : !selectedCardId;
   (0,react.useEffect)(() => {
     const handleDataFromIframe = event => {
-      var _event$data, _event$data2;
+      var _event$data, _event$data2, _event$data3;
       if (!event.data) return;
       if (!event.data.type) return;
       if (event.data.shouldFocusOnCardName) {
@@ -19968,7 +20019,7 @@ function CardElement({
         }
       }
       if (event.data.iframeCardHight) {
-        setHeight(event.data.iframeCardHight + 0.5);
+        setHeight(event.data.iframeCardHight);
       }
       if (event.data.selectedCardCVV) {
         setSelectedCardCVV(event.data.selectedCardCVV);
@@ -19991,6 +20042,10 @@ function CardElement({
       if ((event == null || (_event$data2 = event.data) == null ? void 0 : _event$data2.type) === 'openCVVToolTipModal') {
         setShowCVVTooltipModal(true);
       }
+      if ((event == null || (_event$data3 = event.data) == null ? void 0 : _event$data3.type) === 'tokenizationResponse' && tokenizationResolve.current) {
+        tokenizationResolve.current(event.data.response.res);
+        tokenizationResolve.current = null;
+      }
     };
     const handlePaymentResponse = ({
       res,
@@ -20100,6 +20155,7 @@ function CardElement({
     }
   }, [isIframeLoaded, payment]);
   (0,react.useEffect)(() => {
+    let resizeObserver = null;
     if (isIframeLoaded) {
       var _iframe$contentWindow;
       (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
@@ -20111,7 +20167,21 @@ function CardElement({
           }
         }
       }, '*');
+      const nextElement = iframe.nextElementSibling;
+      resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          const width = Math.floor(entry.contentRect.width - 0.5);
+          if (nextElement) {
+            nextElement.style.width = `${width}px`;
+          }
+        }
+      });
+      resizeObserver.observe(iframe);
     }
+    return () => {
+      var _resizeObserver;
+      (_resizeObserver = resizeObserver) == null || _resizeObserver.disconnect();
+    };
   }, [isIframeLoaded, iframeRef.current]);
   (0,react.useEffect)(() => {
     var _iframe$contentWindow2;
@@ -20133,21 +20203,43 @@ function CardElement({
       previousValidationRef.current = isCardValid;
     }
   }, [isCardValid, shouldDisablePayBtn]);
+  (0,react.useImperativeHandle)(ref, () => ({
+    handleGenerateToken
+  }));
+  async function handleGenerateToken() {
+    return new Promise((resolve, reject) => {
+      var _iframe$contentWindow3;
+      if (loading || !isCardValid || isLoading) {
+        return reject();
+      }
+      tokenizationResolve.current = resolve;
+      (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+        type: 'tokenizeCard',
+        payload: {
+          publicKey,
+          cardHolderName,
+          shouldSubmitData: true
+        }
+      }, '*');
+    });
+  }
+  ;
   const sendCardData = shouldSubmitData => {
-    var _iframe$contentWindow3, _payment$subType, _payment$subType2;
-    (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+    var _iframe$contentWindow4, _payment$subType, _payment$subType2;
+    (_iframe$contentWindow4 = iframe.contentWindow) == null || _iframe$contentWindow4.postMessage({
       type: 'cardData',
       payload: {
-        paymentToken: payment.token,
+        paymentToken: payment == null ? void 0 : 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
+          paymentToken: payment == null || (_payment$subType = payment.subType) == null ? void 0 : _payment$subType.token,
+          type: payment == null || (_payment$subType2 = payment.subType) == null ? void 0 : _payment$subType2.type
         },
         currency,
         cardHolderName,
         saveCard: forceSaveCard || saveCard,
         tenure,
-        shouldSubmitData: shouldSubmitData
+        shouldSubmitData: shouldSubmitData,
+        country
       }
     }, '*');
   };
@@ -20155,8 +20247,8 @@ function CardElement({
     setShouldSubmitData(true);
   };
   const handleFocusToPrevInput = () => {
-    var _iframe$contentWindow4;
-    (_iframe$contentWindow4 = iframe.contentWindow) == null || _iframe$contentWindow4.postMessage({
+    var _iframe$contentWindow5;
+    (_iframe$contentWindow5 = iframe.contentWindow) == null || _iframe$contentWindow5.postMessage({
       type: 'setPrevFocus',
       payload: {
         shouldFocusOnCVV: true
@@ -20241,9 +20333,9 @@ function CardElement({
     }
   };
   const handleOTPSubmit = async otp => {
-    var _iframe$contentWindow5, _payment$subType3;
+    var _iframe$contentWindow6, _payment$subType3;
     setSendOTPLoading(true);
-    (_iframe$contentWindow5 = iframe.contentWindow) == null || _iframe$contentWindow5.postMessage({
+    (_iframe$contentWindow6 = iframe.contentWindow) == null || _iframe$contentWindow6.postMessage({
       type: 'otpData',
       payload: {
         paymentToken: payment.token,
@@ -20318,7 +20410,8 @@ function CardElement({
           },
           cancelButton: Object.assign({}, customStyle == null ? void 0 : customStyle.button, {
             backgroundColor: '#fff',
-            lineHeight: 'normal'
+            lineHeight: 'normal',
+            color: ''
           }),
           button: customStyle == null ? void 0 : customStyle.button,
           label: customStyle == null ? void 0 : customStyle.label,
@@ -20349,7 +20442,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 || integrationType === INTEGRATION_TYPE.TOKENIZATION)) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "-mt-1",
           children: [/*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
             height: 37
@@ -20370,17 +20463,20 @@ function CardElement({
           src: `${baseUrl}/${environment['IFRAME_PATH']}/?type=card&v=2`
           // src={`http://localhost:9001/${environment['IFRAME_PATH']}/?type=card&v=2`}
           ,
+          className: card_module['iframe'],
           style: {
-            border: '0',
-            overflow: 'hidden',
-            display: isIframeLoaded ? 'block' : 'none'
+            display: isIframeLoaded && (payment.token || integrationType === INTEGRATION_TYPE.TOKENIZATION) ? '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 || integrationType === INTEGRATION_TYPE.TOKENIZATION) && /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
           children: [!hideCardHolderName && /*#__PURE__*/(0,jsx_runtime.jsx)(components_CardHolder_CardHolder, {
             onChange: handleCardHolderChange,
             focusToPrevInput: handleFocusToPrevInput,
@@ -20414,7 +20510,7 @@ function CardElement({
             onChange: e => setSaveCard(e.target.checked),
             customStyle: customStyle == null ? void 0 : customStyle.label
           })
-        }), !disablePay && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        }), !disablePay && integrationType === INTEGRATION_TYPE.DIRECT_PAYMENT && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           className: card_module['action-btn'],
           children: /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
             id: 'pay-button',
@@ -20424,7 +20520,7 @@ function CardElement({
             onClick: () => setShouldSubmitData(true),
             customStyle: customStyle == null ? void 0 : customStyle.button
           })
-        }), showPaymobLogo && /*#__PURE__*/(0,jsx_runtime.jsx)(CopyrightsViewTwo_Copyrights, {
+        }), showPaymobLogo && integrationType === INTEGRATION_TYPE.DIRECT_PAYMENT && /*#__PURE__*/(0,jsx_runtime.jsx)(CopyrightsViewTwo_Copyrights, {
           isElements: true
         })]
       })]
@@ -20473,7 +20569,7 @@ function CardElement({
       })]
     })]
   });
-}
+});
 /* harmony default export */ const Payments_Card = (CardElement);
 ;// CONCATENATED MODULE: ../../libs/form-validation/src/lib/form-validation.ts
 
@@ -26952,7 +27048,8 @@ function ApplePay(props) {
     checkDiscount,
     isPixel,
     isLoading,
-    paymentName
+    paymentName,
+    country
   } = props;
   const [loading, setLoading] = (0,react.useState)(false);
   const [discount, setDiscount] = (0,react.useState)({
@@ -26992,7 +27089,7 @@ function ApplePay(props) {
         amount: discount.hasDiscount ? discount.discountAmount : amount
       }
     };
-    if (window.location.hostname === "accept.paymob.com" || window.location.hostname === "accept.paymobsolutions.com") {
+    if (country === 'EGYPT') {
       payload.supportedNetworks.push('meeza');
     }
     if (clientInfo === null) {
@@ -27107,7 +27204,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
@@ -27426,7 +27523,8 @@ function ApplePayElements({
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onPaymentCancel,
-  isLoading
+  isLoading,
+  country
 }) {
   var _amount$toString;
   const {
@@ -27439,6 +27537,7 @@ function ApplePayElements({
     window.location.href = resData.redirection_url;
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(ApplePay, {
+    country: country,
     countryCode: currency == null ? void 0 : currency.slice(0, 2),
     currency: currency,
     amount: (_amount$toString = amount.toString()) == null ? void 0 : _amount$toString.replace(/,/g, ''),
@@ -27525,6 +27624,35 @@ async function fetchPayments(publicKey, clientSecret, paymentMethods) {
     savedCards: formattedSavedCards
   };
 }
+;// CONCATENATED MODULE: ./src/constants/countries.ts
+const COUNTRIES = {
+  EGYPT: 'EGYPT',
+  UAE: 'UAE',
+  PAKISTAN: 'PAKISTAN',
+  OMAN: 'OMAN',
+  SAUDI_ARABIA: 'SAUDI_ARABIA'
+};
+const COUNTRY_TO_CODE = {
+  [COUNTRIES.EGYPT]: 'egy',
+  [COUNTRIES.UAE]: 'are',
+  [COUNTRIES.PAKISTAN]: 'pak',
+  [COUNTRIES.OMAN]: 'omn',
+  [COUNTRIES.SAUDI_ARABIA]: 'sau'
+};
+const CODE_TO_COUNTRY = Object.fromEntries(Object.entries(COUNTRY_TO_CODE).map(([country, code]) => [code, country]));
+;// CONCATENATED MODULE: ./src/utils/getCountry.ts
+
+function getCountryCodeByKeys(publicKey, clientSecret) {
+  let countryCode = publicKey.split('_')[0] || '';
+  if (!['egy', 'are', 'pak', 'omn', 'sau'].includes(countryCode)) {
+    countryCode = clientSecret.split('_')[0] || '';
+  }
+  return countryCode;
+}
+function getCountryByKeys(publicKey, clientSecret) {
+  const countryCode = getCountryCodeByKeys(publicKey, clientSecret);
+  return CODE_TO_COUNTRY[countryCode];
+}
 ;// CONCATENATED MODULE: ./src/components/Payments/List/index.tsx
 
 
@@ -27537,6 +27665,7 @@ async function fetchPayments(publicKey, clientSecret, paymentMethods) {
 
 
 
+
 const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   var _customStyle$containe;
   const {
@@ -27555,7 +27684,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     hideCardHolderName,
     publicKey,
     clientSecret,
-    selectedPaymentMethods
+    selectedPaymentMethods,
+    integrationType
   } = props;
   const {
     t
@@ -27566,6 +27696,7 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   const [savedCardsList, setSavedCardsList] = (0,react.useState)(savedCards);
   const [errorMessage, setErrorMessage] = (0,react.useState)('');
   const [isLoading, setIsLoading] = (0,react.useState)(false);
+  const country = getCountryByKeys(publicKey, clientSecret);
   (0,react.useImperativeHandle)(ref, () => ({
     getData: async () => {
       setIsLoading(true);
@@ -27633,7 +27764,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
             onAfterPaymentComplete: onAfterPaymentComplete,
             onPaymentCancel: onPaymentCancel,
             customStyle: customStyle == null ? void 0 : customStyle.button,
-            isLoading: isLoading
+            isLoading: isLoading,
+            country: country
           }), isGooglePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(GooglePayElement, {
             payment: googlePaymentMethod,
             customStyle: customStyle == null ? void 0 : customStyle.button,
@@ -27679,6 +27811,10 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
         showPaymobLogo,
         hideCardHolderName,
         isLoading,
+        country,
+        integrationType,
+        publicKey,
+        ref,
         isList: true
       })
     })]
@@ -27790,7 +27926,9 @@ function getStyles(customStyle) {
     container: Object.assign({}, colorContainer, fontFamily, verticalSpacingBetweenComponents, containerPadding, widthOfContainer),
     tabs: Object.assign({}, fontFamily, radiusBorder),
     label: Object.assign({}, fontFamily, fontWeightLabel, fontSizeLabel, textColorForLabel),
-    input: Object.assign({}, fontFamily, fontWeightInputFields, fontSizeInputFields, colorBorderInputFields, radiusBorder, colorInputFields, textColorForInput, verticalPadding),
+    input: Object.assign({}, fontFamily, fontWeightInputFields, fontSizeInputFields, colorBorderInputFields, radiusBorder, colorInputFields, textColorForInput, verticalPadding, {
+      borderStyle: 'solid'
+    }),
     button: Object.assign({}, fontFamily, fontWeightPaymentButton, fontSizePaymentButton, colorBorderPaymentButton, radiusBorder, colorPrimaryPaymentButton, textColorForPaymentButton, verticalPaddingButton, {
       disabled: Object.assign({}, colorDisabled)
     }),
@@ -27836,7 +27974,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     hideCardHolderName,
     publicKey,
     clientSecret,
-    selectedPaymentMethods
+    selectedPaymentMethods,
+    integrationType
   } = props;
   const [paymentMethod, setPaymentMethod] = (0,react.useState)(payment);
   const styles = getStyles(customStyle);
@@ -27857,7 +27996,10 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
             onAfterPaymentComplete,
             onCardValidationChanged,
             showPaymobLogo,
-            hideCardHolderName
+            hideCardHolderName,
+            integrationType,
+            publicKey,
+            ref
           });
         case 'CARD-INSTALLMENT':
           return /*#__PURE__*/(0,jsx_runtime.jsx)(BankInstalment, {
@@ -27955,7 +28097,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
       publicKey: publicKey,
       clientSecret: clientSecret,
       selectedPaymentMethods: selectedPaymentMethods,
-      ref: ref
+      ref: ref,
+      integrationType: integrationType
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
@@ -31530,19 +31673,35 @@ class Pixel {
     this._root = null;
     this._error = null;
     this._paymentsRef = null;
+    this._integrationType = void 0;
     this._options = Object.assign({}, options, {
       showPaymobLogo: (_options$showPaymobLo = options.showPaymobLogo) != null ? _options$showPaymobLo : true
     });
     this._baseURL = this.updateAPIBaseURL();
     this._paymentsRef = /*#__PURE__*/react.createRef();
     Pixel._instance = this;
-    this.getData();
+    if (this._options['clientSecret'] && this._options['paymentMethods']) {
+      this._integrationType = 'directPayment';
+      this.getData();
+    } else {
+      this._integrationType = 'tokenization';
+      this.renderCard();
+    }
   }
   updateAPIBaseURL() {
     const baseURL = getAPIURLByKeys(this._options['publicKey'], this._options['clientSecret']);
     lib_axios.defaults.baseURL = baseURL;
     return baseURL;
   }
+  renderCard() {
+    this._paymentList = [{
+      name: 'card',
+      type: 'card',
+      amount: '',
+      currency: ''
+    }];
+    this.render();
+  }
   async getData() {
     const publicKey = this._options['publicKey'];
     const clientSecret = this._options['clientSecret'];
@@ -31606,6 +31765,13 @@ class Pixel {
     }
     return await Pixel._instance._paymentsRef.current.getData();
   }
+  static async submit() {
+    var _Pixel$_instance2;
+    if (!((_Pixel$_instance2 = Pixel._instance) != null && (_Pixel$_instance2 = _Pixel$_instance2._paymentsRef) != null && (_Pixel$_instance2 = _Pixel$_instance2.current) != null && _Pixel$_instance2.handleGenerateToken)) {
+      throw new Error('Pixel not initialized');
+    }
+    return await Pixel._instance._paymentsRef.current.handleGenerateToken();
+  }
   render() {
     const container = document.getElementById(this._options['elementId']);
     if (!container) {
@@ -31645,6 +31811,8 @@ class Pixel {
         onPaymentCancel: this.handleOnPaymentCancel.bind(this)
       }, this._options.cardValidationChanged && {
         onCardValidationChanged: this.handleCardValidationChanged.bind(this)
+      }, {
+        integrationType: this._integrationType
       }), Date.now())
     }));
   }

package/package.json

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

package/styles.css

@@ -636,6 +636,14 @@ video {
   bottom: -1rem;
 }
 
+.-top-3 {
+  top: -0.75rem;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
 .left-\[-16px\] {
   left: -16px;
 }
@@ -1176,6 +1184,10 @@ video {
   width: 100%;
 }
 
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
+
 .max-w-\[400px\] {
   max-width: 400px;
 }
@@ -1208,6 +1220,11 @@ video {
   flex-grow: 1;
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1410,6 +1427,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .overflow-scroll {
   overflow: scroll;
 }
@@ -1698,6 +1719,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;
 }
@@ -1997,6 +2023,11 @@ video {
   padding-bottom: 0.625rem;
 }
 
+.py-\[0\.6rem\] {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
 .py-\[10px\] {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -2084,6 +2115,10 @@ video {
   line-height: 2.25rem;
 }
 
+.text-\[0\.65rem\] {
+  font-size: 0.65rem;
+}
+
 .text-\[2rem\] {
   font-size: 2rem;
 }
@@ -2977,3 +3012,11 @@ video {
 .\[\&_input\]\:pl-6 input {
   padding-left: 1.5rem;
 }
+
+@media(max-height:880px) {
+
+  .\[\@media\(max-height\:880px\)\]\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}