paymob-pixel-alpha 1.0.9 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# pixel
+# `pixel`
 Paymob Web SDK, help our merchant to have the native payment experience.
 
 ## Installing
@@ -8,13 +8,13 @@ Paymob Web SDK, help our merchant to have the native payment experience.
 Using npm:
 
 ```bash
-$ npm install paymob-pixel-alpha --save
+$ npm install paymob-pixel --save
 ```
 
 Once the package is installed, you can import the library using `import`:
 
 ```js
-import { Pixel } from 'paymob-pixel-alpha';
+import { Pixel } from 'paymob-pixel';
 ``` -->
 
 ### CDN
@@ -27,14 +27,13 @@ Using jsDelivr:
 <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
 ```
 
-Using unpkg:
+<!-- Using unpkg:
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
 <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
 <script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
-```
-
+``` -->
 
 ## Usage
 
@@ -52,7 +51,7 @@ new Pixel({
 > <script src="https://pay.google.com/gp/p/js/pay.js"></script>
 > ```
 
-## properties
+## Properties
 
 The full list of properties is as follows:
 | Property  | Type | Definition |
@@ -64,12 +63,52 @@ The full list of properties is as follows:
 | disablePay            | Boolean         | pass true If you don’t want to use Paymob’s Pay Button for Card Payment, in this case you will dispatchEvent with name (payFromOutside) to fire the pay.  |
 | showSaveCard          | Boolean         | If this option is set to TRUE, users will have the option to save their card details for future payment.  |
 | forceSaveCard         | Boolean         | If this option is set to true, the user's card details will be saved automatically without requiring their consent  |
+| cardValidationChanged | Function        | This Functionality will be processed whenever card validation status changed.  |
 | beforePaymentComplete | Function        | Merchants can implement their own custom logic or functions before the payment is processed by Paymob. check the full example below.  |
-| afterPaymentComplete  | Function        | This Functionality will be processed fter payment is processed by Paymob. check the full example below. |
+| afterPaymentComplete  | Function        | This Functionality will be processed after payment is processed by Paymob. check the full example below. |
 | onPaymentCancel       | Function        | This function applies exclusively to Apple Pay. Merchants can implement their own custom logic to handle scenarios where a user cancels the Apple Pay payment by closing the Apple Pay SDK.  |
 | customStyle           | Object          | You can pass custom styles, for more details check the full example below.
 
 
+## Events
+The full list of events is as follows:
+| Event   | Definition |
+| ------- | ---------  |
+| payFromOutside | In case you need to use you pay button instead of SDK pay button.
+
+
+## Functions
+The full list of functions is as follows:
+| Function  | Props | Definition |
+| --------------------- | --------------  | --------------  |
+| updateIntentionData   | -               | Update intention data inside the SDK, in case any updates happend on the intention.
+
+
+## Custom Pay Button Example
+> Add **disablePay** to hide SDK pay button
+> ```js
+> new Pixel({
+>     publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+>     clientSecret: 'are_csk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+>     paymentMethods: ['card', 'google-pay', 'apple-pay'],
+>     elementId: 'example',
+>     disablePay: true,
+> });
+> ```
+> Then you can fire **payFromOutside** event when ever you want to start the payment, this will not work with Google-pay or Apple-pay
+> ```js
+> window.dispatchEvent(new Event('payFromOutside'));
+> ```
+
+
+
+## Update Intention Example
+> Whenever you made any update to the intention via API, you will need to update the intention data inside the SDK.
+> ```js
+> const response = await Pixel.updateIntentionData();
+> ```
+> **updateIntentionData** will return the response of the latest retrieve intention request.
+
 ## Full Example
 
 ```html
@@ -80,20 +119,19 @@ The full list of properties is as follows:
         <title>Pixels</title>
         <base href="/">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
-        <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
     </head>
     <body>
         <div style="position: absolute; width: 80%; margin-top: 10%;" id="example"></div>
         <button id="payFromOutsideButton">Pay From Outside Button</button>
         
-        <script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
+        <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
         <script>
             const button = document.getElementById('payFromOutsideButton');
             button.addEventListener('click', function () {
                 // Calling pay request
-                const event = new Event('payFromOutside');
-                window.dispatchEvent(event);
+                window.dispatchEvent(new Event('payFromOutside'));
             });
             onload = (event) => {
                 new Pixel({
@@ -107,7 +145,7 @@ The full list of properties is as follows:
                     cardValidationChanged: (isValid) => {
                         console.log("Is valid ? ", isValid)
                     },
-                    beforePaymentComplete: async () => {
+                    beforePaymentComplete: async (paymentMethod) => {
                         console.log('Before payment start');
                         console.log('We are waiting for 5 seconds');
                         await new Promise(res => setTimeout(() => res(''),5000))

package/main.js

@@ -19888,9 +19888,7 @@ function CardElement({
   onCardValidationChanged,
   showPaymobLogo,
   hideCardHolderName,
-  isLoading,
-  onProcessingPayment,
-  isProcessingPayment
+  isLoading
 }) {
   var _customStyle$containe;
   const {
@@ -19924,7 +19922,6 @@ function CardElement({
   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;
@@ -20053,39 +20050,21 @@ function CardElement({
             return;
           }
         }
-        setStartCardPay(true);
-        onProcessingPayment(true);
+        sendCardData(true);
         setShouldSubmitData(false);
       };
       handlePay();
     }
   }, [cardHolderName, saveCard, shouldSubmitData, iframe]);
   (0,react.useEffect)(() => {
-    if (isIframeLoaded || startCardPay && isProcessingPayment) {
-      var _iframe$contentWindow, _payment$subType, _payment$subType2;
-      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
-        type: 'cardData',
-        payload: {
-          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,
-          cardHolderName,
-          saveCard: forceSaveCard || saveCard,
-          tenure,
-          shouldSubmitData: startCardPay && isProcessingPayment
-        }
-      }, '*');
-      setStartCardPay(false);
-      onProcessingPayment(false);
+    if (isIframeLoaded) {
+      sendCardData();
     }
-  }, [isIframeLoaded, payment, isProcessingPayment]);
+  }, [isIframeLoaded, payment]);
   (0,react.useEffect)(() => {
     if (isIframeLoaded) {
-      var _iframe$contentWindow2;
-      (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
+      var _iframe$contentWindow;
+      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
         type: 'customStyles',
         payload: {
           styling: customStyle,
@@ -20097,8 +20076,8 @@ function CardElement({
     }
   }, [isIframeLoaded, iframeRef.current]);
   (0,react.useEffect)(() => {
-    var _iframe$contentWindow3;
-    iframe == null || (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+    var _iframe$contentWindow2;
+    iframe == null || (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
       type: 'cardHolderError',
       payload: {
         error: errors['name']
@@ -20116,6 +20095,24 @@ function CardElement({
       previousValidationRef.current = isCardValid;
     }
   }, [isCardValid, shouldDisablePayBtn]);
+  const sendCardData = shouldSubmitData => {
+    var _iframe$contentWindow3, _payment$subType, _payment$subType2;
+    (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+      type: 'cardData',
+      payload: {
+        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,
+        cardHolderName,
+        saveCard: forceSaveCard || saveCard,
+        tenure,
+        shouldSubmitData: shouldSubmitData
+      }
+    }, '*');
+  };
   const handlePayWithoutButton = () => {
     setShouldSubmitData(true);
   };
@@ -27242,9 +27239,7 @@ function GooglePayElement({
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onErrorMessage,
-  isLoading,
-  onProcessingPayment,
-  isProcessingPayment
+  isLoading
 }) {
   var _String;
   const {
@@ -27253,22 +27248,14 @@ 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,
     currency
   } = payment;
   const googlePay = payment;
   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);
-    }
-  }, [startGooglePay, isProcessingPayment]);
   const handleSubmit = async (paymentToken, googlePayload) => {
+    var _res$data;
     setLoading(true);
     if (onBeforePaymentComplete) {
       const result = await onBeforePaymentComplete(payment.name);
@@ -27277,12 +27264,6 @@ function GooglePayElement({
         return;
       }
     }
-    setStartGooglePay(true);
-    onProcessingPayment(true);
-    setGooglePayload(googlePayload);
-  };
-  const handlePay = 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;
@@ -27491,7 +27472,7 @@ async function fetchPayments(publicKey, clientSecret, paymentMethods) {
 
 
 
-function PaymentsList(props) {
+const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   var _customStyle$containe;
   const {
     payments,
@@ -27520,28 +27501,24 @@ 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)(() => {
-    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);
+  (0,react.useImperativeHandle)(ref, () => ({
+    getData: async () => {
+      setIsLoading(true);
+      const {
+        res,
+        paymentList,
+        savedCards
+      } = await fetchPayments(publicKey, clientSecret, selectedPaymentMethods);
+      setIsLoading(false);
+      if (res.status === 200) {
+        setPaymentList(paymentList);
+        setSavedCardsList(savedCards);
+      }
+      return res;
     }
-  };
+  }));
   const handleOnBeforePaymentComplete = async paymentMethod => {
-    return await onBeforePaymentComplete(paymentMethod, getData);
+    return await onBeforePaymentComplete(paymentMethod);
   };
   const hasOnlyXPays = () => {
     const xPays = ['apple-pay', 'google-pay'];
@@ -27591,18 +27568,14 @@ function PaymentsList(props) {
             onAfterPaymentComplete: onAfterPaymentComplete,
             onPaymentCancel: onPaymentCancel,
             customStyle: customStyle == null ? void 0 : customStyle.button,
-            isLoading: isLoading,
-            onProcessingPayment: setIsProcessingPayment,
-            isProcessingPayment: isProcessingPayment
+            isLoading: isLoading
           }), isGooglePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(GooglePayElement, {
             payment: googlePaymentMethod,
             customStyle: customStyle == null ? void 0 : customStyle.button,
             onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
             onAfterPaymentComplete: onAfterPaymentComplete,
             onErrorMessage: setErrorMessage,
-            isLoading: isLoading,
-            onProcessingPayment: setIsProcessingPayment,
-            isProcessingPayment: isProcessingPayment
+            isLoading: isLoading
           })]
         })
       }), paymentList.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -27641,13 +27614,11 @@ function PaymentsList(props) {
         showPaymobLogo,
         hideCardHolderName,
         isLoading,
-        onProcessingPayment: setIsProcessingPayment,
-        isProcessingPayment,
         isList: true
       })
     })]
   });
-}
+});
 /* harmony default export */ const List = (PaymentsList);
 ;// CONCATENATED MODULE: ./src/utils/getStyles.ts
 function getStyles(customStyle) {
@@ -27782,7 +27753,7 @@ function getStyles(customStyle) {
 
 
 
-function Payments_Payments(props) {
+const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   const {
     payment,
     customStyle,
@@ -27918,13 +27889,14 @@ function Payments_Payments(props) {
       hideCardHolderName: hideCardHolderName,
       publicKey: publicKey,
       clientSecret: clientSecret,
-      selectedPaymentMethods: selectedPaymentMethods
+      selectedPaymentMethods: selectedPaymentMethods,
+      ref: ref
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
     children: render()
   });
-}
+});
 /* harmony default export */ const components_Payments = (Payments_Payments);
 ;// CONCATENATED MODULE: ./src/utils/apiUrl.ts
 
@@ -31471,6 +31443,7 @@ i18next.use(initReactI18next).init({
 });
 /* harmony default export */ const localization_i18n = ((/* unused pure expression or super */ null && (i18n)));
 ;// CONCATENATED MODULE: ./src/lib/pixel.tsx
+var _Pixel;
 
 
 
@@ -31491,10 +31464,13 @@ class Pixel {
     this._showSaveCard = void 0;
     this._root = null;
     this._error = null;
+    this._paymentsRef = null;
     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();
   }
   updateAPIBaseURL() {
@@ -31536,9 +31512,9 @@ class Pixel {
       this.render();
     }
   }
-  async handleBeforePaymentComplete(paymentMethod, updateIntentionData) {
+  async handleBeforePaymentComplete(paymentMethod) {
     if (this._options.beforePaymentComplete) {
-      const result = await this._options.beforePaymentComplete(paymentMethod, updateIntentionData);
+      const result = await this._options.beforePaymentComplete(paymentMethod);
       if (result === false) return false;
       return true;
     }
@@ -31558,6 +31534,13 @@ class Pixel {
       this._options.cardValidationChanged(isValid);
     }
   }
+  static async updateIntentionData() {
+    var _Pixel$_instance;
+    if (!((_Pixel$_instance = Pixel._instance) != null && (_Pixel$_instance = _Pixel$_instance._paymentsRef) != null && (_Pixel$_instance = _Pixel$_instance.current) != null && _Pixel$_instance.getData)) {
+      throw new Error('Pixel not initialized');
+    }
+    return await Pixel._instance._paymentsRef.current.getData();
+  }
   render() {
     const container = document.getElementById(this._options['elementId']);
     if (!container) {
@@ -31587,7 +31570,8 @@ class Pixel {
         hideCardHolderName: this._options['hideCardHolderName'],
         publicKey: this._options['publicKey'],
         clientSecret: this._options['clientSecret'],
-        selectedPaymentMethods: this._options['paymentMethods']
+        selectedPaymentMethods: this._options['paymentMethods'],
+        ref: this._paymentsRef
       }, this._options.beforePaymentComplete && {
         onBeforePaymentComplete: this.handleBeforePaymentComplete.bind(this)
       }, this._options.afterPaymentComplete && {
@@ -31600,6 +31584,8 @@ class Pixel {
     }));
   }
 }
+_Pixel = Pixel;
+Pixel._instance = null;
 window.Pixel = Pixel;
 /* harmony default export */ const pixel = ((/* unused pure expression or super */ null && (Pixel)));
 ;// CONCATENATED MODULE: ./src/index.ts

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "paymob-pixel-alpha",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
+  "license": "MIT",
   "homepage": "https://developers.paymob.com",
   "author": "Paymob <support@paymob.com> (https://developers.paymob.com)",
   "exports": {

package/styles.css

@@ -612,6 +612,10 @@ video {
   visibility: hidden;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }