paymob-pixel-alpha 1.1.6 → 1.1.8

package/README.md

@@ -8,13 +8,13 @@ Paymob Web SDK, help our merchant to have the native payment experience.
 Using npm:
 
 ```bash
-$ npm install paymob-pixel --save
+$ npm install paymob-pixel-alpha --save
 ```
 
 Once the package is installed, you can import the library using `import`:
 
 ```js
-import { Pixel } from 'paymob-pixel';
+import { Pixel } from 'paymob-pixel-alpha';
 ``` -->
 
 ### CDN
@@ -30,9 +30,9 @@ Using jsDelivr:
 <!-- 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>
+<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/styles.css">
+<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/main.css">
+<script src="https://unpkg.com/paymob-pixel/main.js" type="module"></script>
 ``` -->
 
 ## Usage
@@ -81,7 +81,7 @@ The full list of events is as follows:
 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.
+| updateIntentionData   | elementId       | Update intention data inside the SDK, in case any updates happend on the intention.
 
 
 ## Custom Pay Button Example
@@ -108,6 +108,12 @@ The full list of functions is as follows:
 > const response = await Pixel.updateIntentionData();
 > ```
 > **updateIntentionData** will return the response of the latest retrieve intention request.
+>
+>> **Note**: In case you have multiple instance of Pixel within the same page, you have to pass the **elementId** to **updateIntentionData**
+>> ```js
+>> const response = await Pixel.updateIntentionData("example");
+>> ```
+>
 
 ## Full Example
 
@@ -160,34 +166,202 @@ The full list of functions is as follows:
                         console.log("====> onPaymentCancel")
                     },
                     customStyle: {
-                        Font_Family: 'monospace',
-                        Font_Size_Label: '18',
-                        Font_Size_Input_Fields: '18',
-                        Font_Size_Payment_Button: '28',
-                        Font_Weight_Label: 400,
-                        Font_Weight_Input_Fields: 400,
-                        Font_Weight_Payment_Button: 900,
-                        Color_Container: '#b7ffe4',
-                        Color_Border_Input_Fields: '#f00',
-                        Color_Border_Payment_Button: '#f00',
-                        Radius_Border: '50',
-                        Color_Disabled: '#c153bf',
-                        Color_Error: '#4a6',
-                        Color_Primary: '#c153bf',
-                        Color_Input_Fields: 'yellow',
-                        Text_Color_For_Label: '#f00',
-                        Text_Color_For_Payment_Button: '#f00',
-                        Text_Color_For_Input_Fields: '#f00',
-                        Color_For_Text_Placeholder: '#c153bf',
-                        Width_of_Container: '100%',
-                        Vertical_Padding: '50',
-                        Vertical_Spacing_between_components: '8',
-                        Container_Padding: '50'
-                    },
+                      HideCardIcons: true,
+                      Direction: 'rtl',
+                      Label_Text: {
+                        cardLabel: "بيانات البطاقة"
+                      },
+                      Placeholder_Text: {
+                        holderName: 'الاسم علي البطاقة',
+                        cardNumber:'رقم البطاقة',
+                        expiryDate:'سنة / شهر',
+                        securityCode:'(CVV) الرمز الامني'
+                      },
+                      Error_Text: {
+                        holderName: 'مطلوب اسم حامل البطاقة',
+                        cardNumber: 'مطلوب رقم البطاقة',
+                        expiryDate: 'مطلوب تاريخ انتهاء الصلاحية',
+                        securityCode: 'مطلوب رمز CVV مكون من 3 أرقام'
+                      },
+                      Font_Family: 'monospace',
+                      Font_Size_Label: '18',
+                      Font_Size_Input_Fields: '18',
+                      Font_Size_Payment_Button: '28',
+                      Font_Weight_Label: 400,
+                      Font_Weight_Input_Fields: 400,
+                      Font_Weight_Payment_Button: 900,
+                      Color_Container: '#b7ffe4',
+                      Color_Border_Input_Fields: '#f00',
+                      Color_Border_Payment_Button: '#f00',
+                      Radius_Border: '50',
+                      Color_Disabled: '#c153bf',
+                      Color_Error: '#4a6',
+                      Color_Primary: '#c153bf',
+                      Color_Input_Fields: 'yellow',
+                      Text_Color_For_Label: '#f00',
+                      Text_Color_For_Payment_Button: '#f00',
+                      Text_Color_For_Input_Fields: '#f00',
+                      Color_For_Text_Placeholder: '#c153bf',
+                      Width_of_Container: '100%',
+                      Vertical_Padding: '50',
+                      Vertical_Spacing_between_components: '8',
+                      Container_Padding: '50'
+                    }
                 });
             };
         </script>
         <script src="https://pay.google.com/gp/p/js/pay.js"></script>
   </body>
+</html>
+```
+
+&nbsp;
+
+---
+
+&nbsp;
+
+# `Pixel Tokenization`
+Use Pixel SDK for only card tokenization.
+
+## Installing
+
+### CDN
+
+Using jsDelivr:
+
+```html
+<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">
+<script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
+```
+
+## Usage
+
+```js
+new Pixel({
+    publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+    elementId: 'example',
+    supportedNetworks: ['visa', 'mada']
+});
+```
+## Properties
+
+The full list of properties is as follows:
+| Property  | Type | Definition |
+| --------------------- | --------------  | --------------  |
+| publicKey             | String          | It can be accessed from Merchant’s Dashboard → Settings → Account Info. |
+| elementId             | String          | ID of the HTML element where the checkout pixel will be embedded. |
+| supportedNetworks     | Array           | List of Supported networks. |
+| hideCardHolderName    | Boolean         | If this option is set to false, will hide the card holder name input. |
+| cardValidationChanged | Function        | This Functionality will be processed whenever card validation status changed.|
+| customStyle           | Object          | You can pass custom styles, for more details check the full example below.
+
+## Functions
+The full list of functions is as follows:
+| Function  | Props | Definition |
+| --------------------- | --------------  | --------------  |
+| submit                | elementId       | Submit the card data and return the tokenized card.
+
+## Submit Example
+> Use to fire the tokenization request and get the tokenized card data.
+> ```js
+> const response = await Pixel.submit();
+> ```
+> **submit** will return the response of the tokenization request .
+>
+>> **Note**: In case you have multiple instance of Pixel within the same page, you have to pass the **elementId** to **submit**
+>> ```js
+>> const response = await Pixel.submit("example");
+>> ```
+>
+
+## Full Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Pixel Tokenization</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <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 id="example"></div>
+    <button id="btn-submit">Submit</button>
+    <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
+    <script>
+      onload = (event) => {
+        new Pixel({
+          publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+          elementId: 'example',
+          supportedNetworks: ['visa', 'mada'],
+          cardValidationChanged: (isValid) => {
+            console.log("Is valid ? ", isValid)
+          },
+          customStyle: {
+            HideCardIcons: true,
+            Direction: 'rtl',
+            Label_Text: {
+              cardLabel: "بيانات البطاقة"
+            },
+            Placeholder_Text: {
+              holderName: 'الاسم علي البطاقة',
+              cardNumber:'رقم البطاقة',
+              expiryDate:'سنة / شهر',
+              securityCode:'(CVV) الرمز الامني'
+            },
+            Error_Text: {
+              holderName: 'مطلوب اسم حامل البطاقة',
+              cardNumber: 'مطلوب رقم البطاقة',
+              expiryDate: 'مطلوب تاريخ انتهاء الصلاحية',
+              securityCode: 'مطلوب رمز CVV مكون من 3 أرقام'
+            },
+            Font_Family: 'monospace',
+            Font_Size_Label: '18',
+            Font_Size_Input_Fields: '18',
+            Font_Size_Payment_Button: '28',
+            Font_Weight_Label: 400,
+            Font_Weight_Input_Fields: 400,
+            Font_Weight_Payment_Button: 900,
+            Color_Container: '#b7ffe4',
+            Color_Border_Input_Fields: '#f00',
+            Color_Border_Payment_Button: '#f00',
+            Radius_Border: '50',
+            Color_Disabled: '#c153bf',
+            Color_Error: '#4a6',
+            Color_Primary: '#c153bf',
+            Color_Input_Fields: 'yellow',
+            Text_Color_For_Label: '#f00',
+            Text_Color_For_Payment_Button: '#f00',
+            Text_Color_For_Input_Fields: '#f00',
+            Color_For_Text_Placeholder: '#c153bf',
+            Width_of_Container: '100%',
+            Vertical_Padding: '50',
+            Vertical_Spacing_between_components: '8',
+            Container_Padding: '50'
+          }
+        })
+        // Submit Call
+        const submitBtn = document.getElementById('btn-submit');
+        submitBtn.addEventListener('click', async () => {
+          try {
+            const response = await Pixel.submit();
+            console.log("Response:", response.data)
+
+          } catch (error) {
+            console.log("Error:", error)
+
+          }
+        })
+      };
+    </script>
+</body>
+
 </html>
 ```