logix-payment-shift4 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -183,19 +183,28 @@ function _unsupportedIterableToArray(r, a) {
 
 function PaymentForm(_ref) {
   var amount = _ref.amount,
-    currency = _ref.currency;
+    currency = _ref.currency,
+    currencyIcon = _ref.currencyIcon,
+    color = _ref.color,
+    _ref$formwidth = _ref.formwidth,
+    formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
+    _ref$formborderRadius = _ref.formborderRadius,
+    formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
+    _ref$formbackgroundCo = _ref.formbackgroundColor,
+    formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
+    companyLogo = _ref.companyLogo;
   var formRef = React.useRef();
   var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = React.useRef(null);
   var componentsRef = React.useRef(null);
   var _useState = React.useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setError = _useState2[1];
   var _useState3 = React.useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    success = _useState4[0],
-    setSuccess = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2);
+    _useState4[0];
+    var setSuccess = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isSubmitting = _useState6[0],
@@ -325,63 +334,75 @@ function PaymentForm(_ref) {
     style: {
       display: "flex",
       justifyContent: "center",
-      alignItems: "center",
-      minHeight: "100vh",
-      backgroundColor: "#f0f2f5",
-      // yumşaq fon
-      padding: "20px"
+      width: "100%",
+      padding: "20px",
+      boxSizing: "border-box"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("form", {
+    ref: formRef,
+    id: "payment-form",
+    onSubmit: handleSubmit,
+    method: "post",
     style: {
-      width: "100%",
-      maxWidth: "420px",
-      // mobil üçün də uyğun
-      padding: "30px",
-      backgroundColor: "#ffffff",
-      borderRadius: "12px",
-      boxShadow: "0 6px 20px rgba(0,0,0,0.1)"
+      display: "grid",
+      gap: "12px",
+      padding: "24px",
+      backgroundColor: formbackgroundColor,
+      borderRadius: formborderRadius,
+      width: formwidth,
+      // səhifənin 1/4-ü
+      boxSizing: "border-box"
     }
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       textAlign: "center",
-      marginBottom: "20px",
-      color: "#333",
-      fontWeight: "600"
+      marginBottom: 20
     }
-  }, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
-    id: "payment-error",
-    className: "alert alert-danger",
+  }, /*#__PURE__*/React.createElement("img", {
+    src: companyLogo,
+    alt: "Logo",
     style: {
-      marginBottom: "15px",
-      padding: "10px",
-      backgroundColor: "#ffe5e5",
-      color: "#a00",
-      borderRadius: "6px",
-      display: error ? "block" : "none"
-    },
-    role: "alert",
-    "aria-live": "polite"
-  }, error), /*#__PURE__*/React.createElement("div", {
-    id: "payment-success",
-    className: "alert alert-success",
+      height: "40px",
+      width: "auto",
+      marginBottom: 10
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "15px",
-      padding: "10px",
-      backgroundColor: "#e7f6eb",
-      color: "#1c7c3a",
-      borderRadius: "6px",
-      display: success ? "block" : "none"
-    },
-    role: "status",
-    "aria-live": "polite"
-  }, success), /*#__PURE__*/React.createElement("form", {
-    ref: formRef,
-    id: "payment-form",
-    className: "grid gap-5",
-    onSubmit: handleSubmit,
-    method: "post"
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      marginTop: 10
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "grid gap-2"
+    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"
+    }
   }, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
@@ -392,15 +413,16 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "grid gap-2",
     style: {
-      gridTemplateColumns: "1fr 1fr",
       display: "grid",
-      gap: "10px"
+      gridTemplateColumns: "1fr 1fr",
+      gap: "10px",
+      marginTop: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
@@ -412,8 +434,9 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
@@ -425,25 +448,26 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   }))), /*#__PURE__*/React.createElement("button", {
     type: "submit",
     disabled: !isReady || isSubmitting,
     style: {
+      marginTop: "16px",
       width: "100%",
       padding: "14px",
-      backgroundColor: "#4f46e5",
+      backgroundColor: color,
       color: "white",
       border: "none",
-      borderRadius: "8px",
+      borderRadius: "12px",
       fontWeight: "600",
-      cursor: "pointer",
-      opacity: !isReady || isSubmitting ? 0.7 : 1,
-      marginTop: "10px"
+      cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
+      opacity: !isReady || isSubmitting ? 0.7 : 1
     }
-  }, isSubmitting ? "Processing..." : "Buy now"))));
+  }, isSubmitting ? "Processing..." : "Buy now")));
 }
 
 exports.PaymentForm = PaymentForm;

package/dist/index.esm.js

@@ -181,19 +181,28 @@ function _unsupportedIterableToArray(r, a) {
 
 function PaymentForm(_ref) {
   var amount = _ref.amount,
-    currency = _ref.currency;
+    currency = _ref.currency,
+    currencyIcon = _ref.currencyIcon,
+    color = _ref.color,
+    _ref$formwidth = _ref.formwidth,
+    formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
+    _ref$formborderRadius = _ref.formborderRadius,
+    formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
+    _ref$formbackgroundCo = _ref.formbackgroundColor,
+    formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
+    companyLogo = _ref.companyLogo;
   var formRef = useRef();
   var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = useRef(null);
   var componentsRef = useRef(null);
   var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setError = _useState2[1];
   var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    success = _useState4[0],
-    setSuccess = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2);
+    _useState4[0];
+    var setSuccess = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isSubmitting = _useState6[0],
@@ -323,63 +332,75 @@ function PaymentForm(_ref) {
     style: {
       display: "flex",
       justifyContent: "center",
-      alignItems: "center",
-      minHeight: "100vh",
-      backgroundColor: "#f0f2f5",
-      // yumşaq fon
-      padding: "20px"
+      width: "100%",
+      padding: "20px",
+      boxSizing: "border-box"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("form", {
+    ref: formRef,
+    id: "payment-form",
+    onSubmit: handleSubmit,
+    method: "post",
     style: {
-      width: "100%",
-      maxWidth: "420px",
-      // mobil üçün də uyğun
-      padding: "30px",
-      backgroundColor: "#ffffff",
-      borderRadius: "12px",
-      boxShadow: "0 6px 20px rgba(0,0,0,0.1)"
+      display: "grid",
+      gap: "12px",
+      padding: "24px",
+      backgroundColor: formbackgroundColor,
+      borderRadius: formborderRadius,
+      width: formwidth,
+      // səhifənin 1/4-ü
+      boxSizing: "border-box"
     }
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       textAlign: "center",
-      marginBottom: "20px",
-      color: "#333",
-      fontWeight: "600"
+      marginBottom: 20
     }
-  }, "Secure Payment"), /*#__PURE__*/React.createElement("div", {
-    id: "payment-error",
-    className: "alert alert-danger",
+  }, /*#__PURE__*/React.createElement("img", {
+    src: companyLogo,
+    alt: "Logo",
     style: {
-      marginBottom: "15px",
-      padding: "10px",
-      backgroundColor: "#ffe5e5",
-      color: "#a00",
-      borderRadius: "6px",
-      display: error ? "block" : "none"
-    },
-    role: "alert",
-    "aria-live": "polite"
-  }, error), /*#__PURE__*/React.createElement("div", {
-    id: "payment-success",
-    className: "alert alert-success",
+      height: "40px",
+      width: "auto",
+      marginBottom: 10
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "15px",
-      padding: "10px",
-      backgroundColor: "#e7f6eb",
-      color: "#1c7c3a",
-      borderRadius: "6px",
-      display: success ? "block" : "none"
-    },
-    role: "status",
-    "aria-live": "polite"
-  }, success), /*#__PURE__*/React.createElement("form", {
-    ref: formRef,
-    id: "payment-form",
-    className: "grid gap-5",
-    onSubmit: handleSubmit,
-    method: "post"
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      marginTop: 10
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "grid gap-2"
+    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"
+    }
   }, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
@@ -390,15 +411,16 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "grid gap-2",
     style: {
-      gridTemplateColumns: "1fr 1fr",
       display: "grid",
-      gap: "10px"
+      gridTemplateColumns: "1fr 1fr",
+      gap: "10px",
+      marginTop: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
@@ -410,8 +432,9 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
@@ -423,25 +446,26 @@ function PaymentForm(_ref) {
     className: "form-control",
     style: {
       padding: "12px",
-      borderRadius: "6px",
-      border: "1px solid #ccc"
+      borderRadius: "10px",
+      border: "1px solid #ccc",
+      boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
     }
   }))), /*#__PURE__*/React.createElement("button", {
     type: "submit",
     disabled: !isReady || isSubmitting,
     style: {
+      marginTop: "16px",
       width: "100%",
       padding: "14px",
-      backgroundColor: "#4f46e5",
+      backgroundColor: color,
       color: "white",
       border: "none",
-      borderRadius: "8px",
+      borderRadius: "12px",
       fontWeight: "600",
-      cursor: "pointer",
-      opacity: !isReady || isSubmitting ? 0.7 : 1,
-      marginTop: "10px"
+      cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
+      opacity: !isReady || isSubmitting ? 0.7 : 1
     }
-  }, isSubmitting ? "Processing..." : "Buy now"))));
+  }, isSubmitting ? "Processing..." : "Buy now")));
 }
 
 export { PaymentForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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}) {
+export default function PaymentForm({amount,currency,currencyIcon,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",companyLogo}) {
   const formRef = useRef();
   const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   const shift4Ref = useRef(null);
@@ -90,105 +90,117 @@ export default function PaymentForm({amount,currency}) {
   };
 
   return (
-    <div
+     <div
       style={{
         display: "flex",
         justifyContent: "center",
-        alignItems: "center",
-        minHeight: "100vh",
-        backgroundColor: "#f0f2f5", // yumşaq fon
+        width: "100%",
         padding: "20px",
+        boxSizing: "border-box"
       }}
     >
-      <div
+      <form
+        ref={formRef}
+        id="payment-form"
+        onSubmit={handleSubmit}
+        method="post"
         style={{
-          width: "100%",
-          maxWidth: "420px", // mobil üçün də uyğun
-          padding: "30px",
-          backgroundColor: "#ffffff",
-          borderRadius: "12px",
-          boxShadow: "0 6px 20px rgba(0,0,0,0.1)",
+          display: "grid",
+          gap: "12px",
+          padding: "24px",
+          backgroundColor: formbackgroundColor,
+          borderRadius: formborderRadius,
+          width: formwidth, // səhifənin 1/4-ü
+          boxSizing: "border-box"
         }}
       >
-        <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333", fontWeight: "600" }}>
-          Secure Payment
-        </h2>
-
-        <div
-          id="payment-error"
-          className="alert alert-danger"
-          style={{
-            marginBottom: "15px",
-            padding: "10px",
-            backgroundColor: "#ffe5e5",
-            color: "#a00",
-            borderRadius: "6px",
-            display: error ? "block" : "none",
-          }}
-          role="alert"
-          aria-live="polite"
-        >
-          {error}
+        {/* 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>
 
-        <div
-          id="payment-success"
-          className="alert alert-success"
-          style={{
-            marginBottom: "15px",
-            padding: "10px",
-            backgroundColor: "#e7f6eb",
-            color: "#1c7c3a",
-            borderRadius: "6px",
-            display: success ? "block" : "none",
-          }}
-          role="status"
-          aria-live="polite"
-        >
-          {success}
+        {/* Card Number */}
+        <div style={{ display: "grid", gap: "8px" }}>
+          <label style={{ fontWeight: "500", color: "#555" }}>Card number</label>
+          <div
+            data-shift4="number"
+            className="form-control"
+            style={{
+              padding: "12px",
+              borderRadius: "10px",
+              border: "1px solid #ccc",
+              boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
+            }}
+          />
         </div>
 
-        <form ref={formRef} id="payment-form" className="grid gap-5" onSubmit={handleSubmit} method="post">
-          {/* Card Number */}
-          <div className="grid gap-2">
-            <label style={{ fontWeight: "500", color: "#555" }}>Card number</label>
-            <div data-shift4="number" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
+        {/* Expiration + CVC */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "12px" }}>
+          <div>
+            <label style={{ fontWeight: "500", color: "#555" }}>Expiration</label>
+            <div
+              data-shift4="expiry"
+              className="form-control"
+              style={{
+                padding: "12px",
+                borderRadius: "10px",
+                border: "1px solid #ccc",
+                boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
+              }}
+            />
           </div>
-
-          {/* Expiration + CVC */}
-          <div className="grid gap-2" style={{ gridTemplateColumns: "1fr 1fr", display: "grid", gap: "10px" }}>
-            <div>
-              <label style={{ fontWeight: "500", color: "#555" }}>Expiration</label>
-              <div data-shift4="expiry" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
-            </div>
-
-            <div>
-              <label style={{ fontWeight: "500", color: "#555" }}>CVC</label>
-              <div data-shift4="cvc" className="form-control" style={{ padding: "12px", borderRadius: "6px", border: "1px solid #ccc" }}></div>
-            </div>
+          <div>
+            <label style={{ fontWeight: "500", color: "#555" }}>CVC</label>
+            <div
+              data-shift4="cvc"
+              className="form-control"
+              style={{
+                padding: "12px",
+                borderRadius: "10px",
+                border: "1px solid #ccc",
+                boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
+              }}
+            />
           </div>
+        </div>
 
-          {/* Submit Button */}
-          <button
-            type="submit"
-            disabled={!isReady || isSubmitting}
-            style={{
-              width: "100%",
-              padding: "14px",
-              backgroundColor: "#4f46e5",
-              color: "white",
-              border: "none",
-              borderRadius: "8px",
-              fontWeight: "600",
-              cursor: "pointer",
-              opacity: !isReady || isSubmitting ? 0.7 : 1,
-              marginTop: "10px",
-            }}
-          >
-            {isSubmitting ? "Processing..." : "Buy now"}
-          </button>
-        </form>
-      </div>
+        {/* Submit Button */}
+        <button
+          type="submit"
+          disabled={!isReady || isSubmitting}
+          style={{
+            marginTop: "16px",
+            width: "100%",
+            padding: "14px",
+            backgroundColor: color,
+            color: "white",
+            border: "none",
+            borderRadius: "12px",
+            fontWeight: "600",
+            cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
+            opacity: !isReady || isSubmitting ? 0.7 : 1
+          }}
+        >
+          {isSubmitting ? "Processing..." : "Buy now"}
+        </button>
+      </form>
     </div>
+
   );
 }