paymob-pixel-alpha 1.1.7 → 1.1.8

package/README.md

@@ -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
@@ -166,30 +166,47 @@ 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>
@@ -207,6 +224,18 @@ The full list of functions is as follows:
 # `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
@@ -225,7 +254,8 @@ The full list of properties is as follows:
 | 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.
+| 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:
@@ -273,6 +303,48 @@ The full list of functions is as follows:
           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

package/main.js

@@ -10127,12 +10127,14 @@ function FormInputViewTwo_FormInput(props) {
       className: `bg-white box-border px-3 border border-solid ${borderStyleState === borderStyle_borderStyleConstants.RECTANGULAR && '!rounded-none'} flex justify-between gap-2 items-center w-full h-10 opacity-100 relative ${className != null ? className : ''}`,
       style: customStyle != null && customStyle.input ? customStyle == null ? void 0 : customStyle.input : customStyle,
       children: [icon && icon, /*#__PURE__*/(0,jsx_runtime.jsx)("input", Object.assign({
+        dir: "ltr",
         id: name,
         name: name,
         type: type,
-        className: `py-3 text-left bg-transparent h-full w-full border-0 pr-4 box-border text-inherit focus:outline-none focus-visible:outline-none ${customInputStyle != null ? customInputStyle : ''} [&::placeholder]:text-[var(--placeholder-color)]`,
+        className: `py-3 ${(customStyle == null ? void 0 : customStyle.direction) === 'rtl' ? 'text-right pl-4' : 'text-left pr-4'} bg-transparent h-full w-full border-0 box-border text-inherit focus:outline-none focus-visible:outline-none ${customInputStyle != null ? customInputStyle : ''} [&::placeholder]:text-[var(--placeholder-color)]`,
         style: {
-          '--placeholder-color': (customStyle == null || (_customStyle$placehol = customStyle.placeholder) == null ? void 0 : _customStyle$placehol.color) || '#667085'
+          '--placeholder-color': (customStyle == null || (_customStyle$placehol = customStyle.placeholder) == null ? void 0 : _customStyle$placehol.color) || '#667085',
+          direction: 'ltr'
         },
         value: value,
         onChange: onChange,
@@ -18077,7 +18079,9 @@ function CardNumberViewTwo_CardNumber(props) {
     maxLength,
     cardType,
     getCardLogo,
-    customStyle
+    customStyle,
+    placeholder,
+    hideCardIcons
   } = props;
   const {
     t
@@ -18147,12 +18151,9 @@ function CardNumberViewTwo_CardNumber(props) {
       }
     }
   }, []);
-  return /*#__PURE__*/_jsx(FormInput, {
-    formRegister: formRegister,
-    name: 'number',
-    className: className,
-    placeholder: t('CARD_NUMBER_PLACEHOLDER'),
-    label: getCardLogo(cardType) === '' || noCardLogo ? /*#__PURE__*/_jsxs("span", {
+  const getLabel = () => {
+    if (hideCardIcons) return;
+    return getCardLogo(cardType) === '' || noCardLogo ? /*#__PURE__*/_jsxs("span", {
       className: "flex gap-1 items-center justify-end w-full h-full mobile:w-auto",
       children: [currency === 'SAR' && /*#__PURE__*/_jsx("img", {
         src: MadaIcon,
@@ -18182,7 +18183,14 @@ function CardNumberViewTwo_CardNumber(props) {
         src: getCardLogo(cardType),
         alt: cardType
       })
-    }),
+    });
+  };
+  return /*#__PURE__*/_jsx(FormInput, {
+    formRegister: formRegister,
+    name: 'number',
+    className: className,
+    placeholder: placeholder || t('CARD_NUMBER_PLACEHOLDER'),
+    label: getLabel(),
     error: error,
     maxLength: maxLength,
     inputMode: "numeric",
@@ -18200,13 +18208,14 @@ function ExpiryDate_ExpiryDate(props) {
     maxLength,
     disabled,
     error,
-    className
+    className,
+    placeholder
   } = props;
   return /*#__PURE__*/_jsx(FormInput, {
     name: 'expiry',
     error: error,
     formRegister: formRegister,
-    placeholder: 'MM/YY',
+    placeholder: placeholder || 'MM/YY',
     maxLength: maxLength,
     customStyle: customStyle,
     className: className,
@@ -19022,6 +19031,7 @@ function mobileCardFormViewTwo_MobileCard(props) {
 
 
 function IframeCard(props) {
+  var _iframeCustomStyles$c, _iframeCustomStyles$c2, _iframeCustomStyles$p, _iframeCustomStyles$c3, _iframeCustomStyles$c4, _iframeCustomStyles$p2, _iframeCustomStyles$c5, _iframeCustomStyles$c6, _iframeCustomStyles$p3;
   const {
     loading,
     handleCardSubmit,
@@ -19043,6 +19053,7 @@ function IframeCard(props) {
   const [tenure, setTenure] = useState('');
   const [shouldSubmitData, setShouldSubmitData] = useState(false);
   const [cardHolderError, setCardHolderError] = useState();
+  const [cardIconsHidden, setCardIconsHidden] = useState(false);
   const [cardHolderNameHidden, setCardHolderNameHidden] = useState(false);
   const [currency, setCurrency] = useState('');
   const [country, setCountry] = useState('');
@@ -19136,9 +19147,17 @@ function IframeCard(props) {
     }
   };
   const handleCardStylesFromSDK = payload => {
-    var _payload$options;
+    var _payload$styling3, _payload$options;
     if (payload.styling) {
+      var _payload$styling;
       setIframeCustomStyles(payload.styling);
+      if ((_payload$styling = payload.styling) != null && (_payload$styling = _payload$styling.container) != null && _payload$styling.direction) {
+        var _payload$styling2;
+        document.documentElement.dir = (_payload$styling2 = payload.styling) == null || (_payload$styling2 = _payload$styling2.container) == null ? void 0 : _payload$styling2.direction;
+      }
+    }
+    if ((_payload$styling3 = payload.styling) != null && _payload$styling3.hideCardIcons) {
+      setCardIconsHidden(true);
     }
     if ((_payload$options = payload.options) != null && _payload$options['hideCardHolderName']) {
       setCardHolderNameHidden(true);
@@ -19227,9 +19246,10 @@ function IframeCard(props) {
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    id: "iframe"
-    // style={iframeCustomStyles?.container}
-    ,
+    id: "iframe",
+    style: {
+      direction: (iframeCustomStyles == null || (_iframeCustomStyles$c = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c.direction) || 'ltr'
+    },
     className: "w-[calc(100%-1px)]",
     children: [/*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsx(CardNumber, {
@@ -19242,9 +19262,12 @@ function IframeCard(props) {
         className: `!rounded-b-none border-b-0 rounded-t-lg ${errors['number'] ? 'border-red-300' : 'border-gray-300'}`,
         customStyle: {
           input: iframeCustomStyles == null ? void 0 : iframeCustomStyles.input,
-          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder
+          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder,
+          direction: iframeCustomStyles == null || (_iframeCustomStyles$c2 = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c2.direction
         },
-        currency: currency
+        currency: currency,
+        placeholder: iframeCustomStyles == null || (_iframeCustomStyles$p = iframeCustomStyles.placeholderText) == null ? void 0 : _iframeCustomStyles$p.cardNumber,
+        hideCardIcons: cardIconsHidden
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: "flex",
@@ -19253,22 +19276,27 @@ function IframeCard(props) {
         error: errors['expiry'],
         maxLength: EXPIRY_DATE_LENGTH,
         expiryDate: getValues('expiry'),
-        className: `${cardHolderNameHidden ? '!rounded-t-none !rounded-ee-none' : '!rounded-none'} ${errors['number'] ? 'border-t-red-300' : ''} ${errors['cvc'] ? 'border-r-red-300' : ''} ${errors['expiry'] ? 'border-red-300' : 'border-gray-300'} ${cardHolderError ? 'border-b-red-300' : ''}`,
+        className: `${cardHolderNameHidden ? '!rounded-t-none !rounded-ee-none' : '!rounded-none'} ${errors['number'] ? 'border-t-red-300' : ''} ${errors['cvc'] ? (iframeCustomStyles == null || (_iframeCustomStyles$c3 = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c3.direction) === 'rtl' ? 'border-l-red-300' : 'border-r-red-300' : ''} ${errors['expiry'] ? 'border-red-300' : 'border-gray-300'} ${cardHolderError ? 'border-b-red-300' : ''}`,
         customStyle: {
           input: iframeCustomStyles == null ? void 0 : iframeCustomStyles.input,
-          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder
-        }
+          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder,
+          direction: iframeCustomStyles == null || (_iframeCustomStyles$c4 = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c4.direction
+        },
+        placeholder: iframeCustomStyles == null || (_iframeCustomStyles$p2 = iframeCustomStyles.placeholderText) == null ? void 0 : _iframeCustomStyles$p2.expiryDate
       }), /*#__PURE__*/_jsx(CVV, {
         formRegister: cvcRegister,
         maxLength: cardType === CARD_TYPES.AMEX ? AMEX_CVV_LENGTH : CVV_LENGTH,
         error: errors['cvc'],
-        className: `${cardHolderNameHidden ? '!rounded-t-none !rounded-es-none' : '!rounded-none'} border-l-0 ${errors['number'] ? 'border-t-red-300' : ''} ${errors['cvc'] ? 'border-red-300' : 'border-gray-300'} ${cardHolderError ? 'border-b-red-300' : ''}`,
+        className: `${cardHolderNameHidden ? '!rounded-t-none !rounded-es-none' : '!rounded-none'} 
+          ${(iframeCustomStyles == null || (_iframeCustomStyles$c5 = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c5.direction) === 'rtl' ? 'border-r-0' : 'border-l-0'} ${errors['number'] ? 'border-t-red-300' : ''} ${errors['cvc'] ? 'border-red-300' : 'border-gray-300'} ${cardHolderError ? 'border-b-red-300' : ''}`,
         cvv: getValues('cvc'),
         customStyle: {
           input: iframeCustomStyles == null ? void 0 : iframeCustomStyles.input,
-          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder
+          placeholder: iframeCustomStyles == null ? void 0 : iframeCustomStyles.placeholder,
+          direction: iframeCustomStyles == null || (_iframeCustomStyles$c6 = iframeCustomStyles.container) == null ? void 0 : _iframeCustomStyles$c6.direction
         },
-        isIframe: true
+        isIframe: true,
+        placeholder: iframeCustomStyles == null || (_iframeCustomStyles$p3 = iframeCustomStyles.placeholderText) == null ? void 0 : _iframeCustomStyles$p3.securityCode
       })]
     })]
   });
@@ -19287,7 +19315,8 @@ function components_CardHolder_CardHolder(props) {
     focusToPrevInput,
     onChange,
     onFocus,
-    customStyle
+    customStyle,
+    placeholder
   } = props;
   const {
     t
@@ -19331,7 +19360,7 @@ function components_CardHolder_CardHolder(props) {
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(InputViewTwo_InputViewTwo, {
     name: 'name',
-    placeholder: t('CARD_NAME_PLACEHOLDER'),
+    placeholder: placeholder || t('CARD_NAME_PLACEHOLDER'),
     onChange: handleChange,
     onFocus: onFocus,
     value: cardHolder,
@@ -20237,7 +20266,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   integrationType,
   publicKey
 }, ref) => {
-  var _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3;
+  var _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3, _customStyle$labelTex, _customStyle$placehol, _customStyle$errorTex, _customStyle$errorTex2, _customStyle$errorTex3, _customStyle$errorTex4;
   const {
     token,
     amount,
@@ -20705,7 +20734,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
         },
         children: [/*#__PURE__*/(0,jsx_runtime.jsx)("p", {
           style: Object.assign({}, customStyle == null ? void 0 : customStyle.label),
-          children: "Card Information"
+          children: (customStyle == null || (_customStyle$labelTex = customStyle.labelText) == null ? void 0 : _customStyle$labelTex.cardLabel) || 'Card Information'
         }), showCardModal && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
           id: 'cancel-button',
           className: "hover:!opacity-75",
@@ -20756,18 +20785,19 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             focusToPrevInput: handleFocusToPrevInput,
             customStyle: customStyle,
             setErrors: setErrors,
-            error: errors['name']
+            error: errors['name'],
+            placeholder: customStyle == null || (_customStyle$placehol = customStyle.placeholderText) == null ? void 0 : _customStyle$placehol.holderName
           }), (errors['number'] || errors['name'] || errors['cvc'] || errors['expiry']) && /*#__PURE__*/(0,jsx_runtime.jsxs)("ul", {
             style: customStyle == null ? void 0 : customStyle.error,
             className: "my-2 text-sm text-red-600 list-disc list-inside list-item:text-red-600",
             children: [errors['number'] && /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-              children: errors['number']
+              children: (customStyle == null || (_customStyle$errorTex = customStyle.errorText) == null ? void 0 : _customStyle$errorTex.cardNumber) || errors['number']
             }), errors['expiry'] && /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-              children: errors['expiry']
+              children: (customStyle == null || (_customStyle$errorTex2 = customStyle.errorText) == null ? void 0 : _customStyle$errorTex2.expiryDate) || errors['expiry']
             }), errors['cvc'] && /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-              children: errors['cvc']
+              children: (customStyle == null || (_customStyle$errorTex3 = customStyle.errorText) == null ? void 0 : _customStyle$errorTex3.securityCode) || errors['cvc']
             }), errors['name'] && /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-              children: errors['name']
+              children: (customStyle == null || (_customStyle$errorTex4 = customStyle.errorText) == null ? void 0 : _customStyle$errorTex4.holderName) || errors['name']
             })]
           })]
         })]
@@ -28197,8 +28227,11 @@ function getStyles(customStyle) {
   const containerPadding = Object.assign({}, (customStyle == null ? void 0 : customStyle.Container_Padding) && {
     padding: `${customStyle == null ? void 0 : customStyle.Container_Padding}px`
   });
+  const textDirection = Object.assign({}, (customStyle == null ? void 0 : customStyle.Direction) && {
+    direction: customStyle == null ? void 0 : customStyle.Direction
+  });
   return {
-    container: Object.assign({}, colorContainer, fontFamily, verticalSpacingBetweenComponents, containerPadding, widthOfContainer),
+    container: Object.assign({}, colorContainer, fontFamily, verticalSpacingBetweenComponents, containerPadding, widthOfContainer, textDirection),
     tabs: Object.assign({}, fontFamily, radiusBorder),
     label: Object.assign({}, fontFamily, fontWeightLabel, fontSizeLabel, textColorForLabel),
     input: Object.assign({}, fontFamily, fontWeightInputFields, fontSizeInputFields, colorBorderInputFields, radiusBorder, colorInputFields, textColorForInput, verticalPadding, {
@@ -28208,7 +28241,11 @@ function getStyles(customStyle) {
       disabled: Object.assign({}, colorDisabled)
     }),
     error: Object.assign({}, colorError),
-    placeholder: Object.assign({}, colorForTextPlaceholder)
+    placeholder: Object.assign({}, colorForTextPlaceholder),
+    labelText: Object.assign({}, customStyle == null ? void 0 : customStyle.Label_Text),
+    placeholderText: Object.assign({}, customStyle == null ? void 0 : customStyle.Placeholder_Text),
+    errorText: Object.assign({}, customStyle == null ? void 0 : customStyle.Error_Text),
+    hideCardIcons: customStyle == null ? void 0 : customStyle.HideCardIcons
   };
 }
 ;// CONCATENATED MODULE: ./src/components/Payments/index.tsx

package/package.json

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

package/styles.css

@@ -1576,6 +1576,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-r-0 {
+  border-right-width: 0px;
+}
+
 .border-r-\[2px\] {
   border-right-width: 2px;
 }