logix-payment-shift4 1.0.4 → 1.0.6

package/dist/index.cjs.js

@@ -184,7 +184,6 @@ function _unsupportedIterableToArray(r, a) {
 function PaymentForm(_ref) {
   var amount = _ref.amount,
     currency = _ref.currency,
-    currencyIcon = _ref.currencyIcon,
     color = _ref.color,
     _ref$formwidth = _ref.formwidth,
     formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
@@ -192,7 +191,8 @@ function PaymentForm(_ref) {
     formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
     _ref$formbackgroundCo = _ref.formbackgroundColor,
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
-    companyLogo = _ref.companyLogo;
+    _ref$inputpadding = _ref.inputpadding,
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
   var formRef = React.useRef();
   var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = React.useRef(null);
@@ -335,7 +335,6 @@ function PaymentForm(_ref) {
       display: "flex",
       justifyContent: "center",
       width: "100%",
-      padding: "20px",
       boxSizing: "border-box"
     }
   }, /*#__PURE__*/React.createElement("form", {
@@ -346,59 +345,13 @@ function PaymentForm(_ref) {
     style: {
       display: "grid",
       gap: "12px",
-      padding: "24px",
+      padding: "20px",
       backgroundColor: formbackgroundColor,
       borderRadius: formborderRadius,
       width: formwidth,
-      // səhifənin 1/4-ü
       boxSizing: "border-box"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: "center",
-      marginBottom: 20
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: companyLogo,
-    alt: "Logo",
-    style: {
-      height: "40px",
-      width: "auto",
-      marginBottom: 10
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "12px",
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      height: "1px",
-      backgroundColor: "#e5e7eb"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "22px",
-      fontWeight: "700",
-      color: "#1f2937",
-      margin: "0 12px"
-    }
-  }, "Total Amount:"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "22px",
-      fontWeight: "700",
-      color: "#16a34a"
-    }
-  }, currencyIcon, " ", Math.round(amount * 100)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      height: "1px",
-      backgroundColor: "#e5e7eb"
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gap: "8px"
@@ -412,7 +365,7 @@ function PaymentForm(_ref) {
     "data-shift4": "number",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -433,7 +386,7 @@ function PaymentForm(_ref) {
     "data-shift4": "expiry",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -447,7 +400,7 @@ function PaymentForm(_ref) {
     "data-shift4": "cvc",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -458,7 +411,7 @@ function PaymentForm(_ref) {
     style: {
       marginTop: "16px",
       width: "100%",
-      padding: "14px",
+      padding: inputpadding,
       backgroundColor: color,
       color: "white",
       border: "none",

package/dist/index.esm.js

@@ -182,7 +182,6 @@ function _unsupportedIterableToArray(r, a) {
 function PaymentForm(_ref) {
   var amount = _ref.amount,
     currency = _ref.currency,
-    currencyIcon = _ref.currencyIcon,
     color = _ref.color,
     _ref$formwidth = _ref.formwidth,
     formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
@@ -190,7 +189,8 @@ function PaymentForm(_ref) {
     formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
     _ref$formbackgroundCo = _ref.formbackgroundColor,
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
-    companyLogo = _ref.companyLogo;
+    _ref$inputpadding = _ref.inputpadding,
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
   var formRef = useRef();
   var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = useRef(null);
@@ -333,7 +333,6 @@ function PaymentForm(_ref) {
       display: "flex",
       justifyContent: "center",
       width: "100%",
-      padding: "20px",
       boxSizing: "border-box"
     }
   }, /*#__PURE__*/React.createElement("form", {
@@ -344,59 +343,13 @@ function PaymentForm(_ref) {
     style: {
       display: "grid",
       gap: "12px",
-      padding: "24px",
+      padding: "20px",
       backgroundColor: formbackgroundColor,
       borderRadius: formborderRadius,
       width: formwidth,
-      // səhifənin 1/4-ü
       boxSizing: "border-box"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: "center",
-      marginBottom: 20
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    src: companyLogo,
-    alt: "Logo",
-    style: {
-      height: "40px",
-      width: "auto",
-      marginBottom: 10
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "12px",
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      height: "1px",
-      backgroundColor: "#e5e7eb"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "22px",
-      fontWeight: "700",
-      color: "#1f2937",
-      margin: "0 12px"
-    }
-  }, "Total Amount:"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "22px",
-      fontWeight: "700",
-      color: "#16a34a"
-    }
-  }, currencyIcon, " ", Math.round(amount * 100)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      height: "1px",
-      backgroundColor: "#e5e7eb"
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gap: "8px"
@@ -410,7 +363,7 @@ function PaymentForm(_ref) {
     "data-shift4": "number",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -431,7 +384,7 @@ function PaymentForm(_ref) {
     "data-shift4": "expiry",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -445,7 +398,7 @@ function PaymentForm(_ref) {
     "data-shift4": "cvc",
     className: "form-control",
     style: {
-      padding: "12px",
+      padding: inputpadding,
       borderRadius: "10px",
       border: "1px solid #ccc",
       boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -456,7 +409,7 @@ function PaymentForm(_ref) {
     style: {
       marginTop: "16px",
       width: "100%",
-      padding: "14px",
+      padding: inputpadding,
       backgroundColor: color,
       color: "white",
       border: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "description": "A React component library for integrating Shift4 payments with Logix applications.",

package/src/PaymentForm.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 
-export default function PaymentForm({amount,currency,currencyIcon,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",companyLogo}) {
+export default function PaymentForm({amount,currency,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",inputpadding=12}) {
   const formRef = useRef();
   const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   const shift4Ref = useRef(null);
@@ -95,7 +95,6 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
         display: "flex",
         justifyContent: "center",
         width: "100%",
-        padding: "20px",
         boxSizing: "border-box"
       }}
     >
@@ -107,33 +106,14 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
         style={{
           display: "grid",
           gap: "12px",
-          padding: "24px",
+          padding: "20px",
           backgroundColor: formbackgroundColor,
           borderRadius: formborderRadius,
-          width: formwidth, // səhifənin 1/4-ü
+          width: formwidth, 
           boxSizing: "border-box"
         }}
       >
-        {/* Logo + Total */}
-        <div style={{ textAlign: "center", marginBottom: 20 }}>
-          <img
-            src={companyLogo}
-            alt="Logo"
-            style={{ height: "40px", width: "auto", marginBottom: 10 }}
-          />
-
-          {/* Product Name + Price inline with line */}
-          <div style={{ display: "flex", alignItems: "center", gap: "12px", marginTop: 10 }}>
-            <div style={{ flex: 1, height: "1px", backgroundColor: "#e5e7eb" }} />
-            <div style={{ fontSize: "22px", fontWeight: "700", color: "#1f2937", margin: "0 12px" }}>
-              Total Amount:
-            </div>
-            <div style={{ fontSize: "22px", fontWeight: "700", color: "#16a34a" }}>
-              {currencyIcon} {Math.round(amount * 100)}
-            </div>
-            <div style={{ flex: 1, height: "1px", backgroundColor: "#e5e7eb" }} />
-          </div>
-        </div>
+      
 
         {/* Card Number */}
         <div style={{ display: "grid", gap: "8px" }}>
@@ -142,7 +122,7 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
             data-shift4="number"
             className="form-control"
             style={{
-              padding: "12px",
+              padding: inputpadding,
               borderRadius: "10px",
               border: "1px solid #ccc",
               boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -158,7 +138,7 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
               data-shift4="expiry"
               className="form-control"
               style={{
-                padding: "12px",
+                 padding: inputpadding,
                 borderRadius: "10px",
                 border: "1px solid #ccc",
                 boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -171,7 +151,7 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
               data-shift4="cvc"
               className="form-control"
               style={{
-                padding: "12px",
+                padding: inputpadding,
                 borderRadius: "10px",
                 border: "1px solid #ccc",
                 boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -187,7 +167,7 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
           style={{
             marginTop: "16px",
             width: "100%",
-            padding: "14px",
+            padding: inputpadding,
             backgroundColor: color,
             color: "white",
             border: "none",