paymob-pixel-alpha 1.0.9 → 1.1.0

package/main.js

@@ -26890,7 +26890,8 @@ function ApplePay(props) {
     checkDiscount,
     isPixel,
     isLoading,
-    paymentName
+    paymentName,
+    onLayerClick
   } = props;
   const [loading, setLoading] = (0,react.useState)(false);
   const [discount, setDiscount] = (0,react.useState)({
@@ -26937,13 +26938,6 @@ function ApplePay(props) {
       payload.requiredShippingContactFields = ['email', 'phone', 'name'];
     }
     const session = new window.ApplePaySession(3, payload);
-    if (onBeforePaymentComplete) {
-      const result = await onBeforePaymentComplete(paymentName);
-      if (!result) {
-        setLoading(false);
-        return;
-      }
-    }
     session.onvalidatemerchant = async event => {
       console.log("start validation request");
       console.log(`validationURL: ${event.validationURL}`);
@@ -27039,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,
@@ -27049,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
@@ -27253,7 +27250,6 @@ function GooglePayElement({
     keyPrefix: 'googlePay'
   });
   const [loading, setLoading] = (0,react.useState)(false);
-  const [googlePayload, setGooglePayload] = (0,react.useState)(null);
   const [startGooglePay, setStartGooglePay] = (0,react.useState)(false);
   const {
     amount,
@@ -27263,12 +27259,11 @@ function GooglePayElement({
   const integrationId = googlePay == null ? void 0 : googlePay.integrationId;
   (0,react.useEffect)(() => {
     if (startGooglePay && isProcessingPayment) {
-      handlePay(googlePay == null ? void 0 : googlePay.token, googlePayload);
-      setStartGooglePay(false);
-      onProcessingPayment(false);
+      const googlePayButton = document.getElementById('gpay-button-online-api-id');
+      googlePayButton == null || googlePayButton.click();
     }
   }, [startGooglePay, isProcessingPayment]);
-  const handleSubmit = async (paymentToken, googlePayload) => {
+  const handleLayerClick = async () => {
     setLoading(true);
     if (onBeforePaymentComplete) {
       const result = await onBeforePaymentComplete(payment.name);
@@ -27279,9 +27274,8 @@ function GooglePayElement({
     }
     setStartGooglePay(true);
     onProcessingPayment(true);
-    setGooglePayload(googlePayload);
   };
-  const handlePay = async (paymentToken, googlePayload) => {
+  const handleSubmit = async (paymentToken, googlePayload) => {
     var _res$data;
     const res = await payWithGooglePay(paymentToken, integrationId, googlePayload);
     setLoading(false);
@@ -27328,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')
@@ -27374,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;
   };
@@ -27409,7 +27431,8 @@ function ApplePayElements({
     checkDiscount: checkDiscount,
     isPixel: true,
     isLoading: isLoading,
-    paymentName: payment.name
+    paymentName: payment.name,
+    onLayerClick: handleLayerClick
   });
 }
 /* harmony default export */ const Payments_ApplePay = (ApplePayElements);

package/package.json

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