logix-payment-shift4 1.0.7 → 1.0.9

package/dist/index.cjs.js

@@ -198,13 +198,13 @@ function PaymentForm(_ref) {
   var shift4Ref = React.useRef(null);
   var componentsRef = React.useRef(null);
   var _useState = React.useState(""),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setError = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
   var _useState3 = React.useState(""),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setSuccess = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    success = _useState4[0],
+    setSuccess = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isSubmitting = _useState6[0],
@@ -213,6 +213,8 @@ function PaymentForm(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isReady = _useState8[0],
     setIsReady = _useState8[1];
+  console.log(error);
+  console.log(success);
   React.useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
@@ -375,12 +377,13 @@ function PaymentForm(_ref) {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "10px",
-      marginTop: "12px"
+      marginTop: "5px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
-      color: "#555"
+      color: "#555",
+      marginBottom: 2
     }
   }, "Expiration"), /*#__PURE__*/React.createElement("div", {
     "data-shift4": "expiry",
@@ -394,7 +397,8 @@ function PaymentForm(_ref) {
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
-      color: "#555"
+      color: "#555",
+      marginBottom: 2
     }
   }, "CVC"), /*#__PURE__*/React.createElement("div", {
     "data-shift4": "cvc",

package/dist/index.esm.js

@@ -196,13 +196,13 @@ function PaymentForm(_ref) {
   var shift4Ref = useRef(null);
   var componentsRef = useRef(null);
   var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setError = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
   var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setSuccess = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    success = _useState4[0],
+    setSuccess = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isSubmitting = _useState6[0],
@@ -211,6 +211,8 @@ function PaymentForm(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isReady = _useState8[0],
     setIsReady = _useState8[1];
+  console.log(error);
+  console.log(success);
   useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
@@ -373,12 +375,13 @@ function PaymentForm(_ref) {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "10px",
-      marginTop: "12px"
+      marginTop: "5px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
-      color: "#555"
+      color: "#555",
+      marginBottom: 2
     }
   }, "Expiration"), /*#__PURE__*/React.createElement("div", {
     "data-shift4": "expiry",
@@ -392,7 +395,8 @@ function PaymentForm(_ref) {
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     style: {
       fontWeight: "500",
-      color: "#555"
+      color: "#555",
+      marginBottom: 2
     }
   }, "CVC"), /*#__PURE__*/React.createElement("div", {
     "data-shift4": "cvc",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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

@@ -9,6 +9,9 @@ export default function PaymentForm({amount,currency,color,formwidth=400,formbor
   const [success, setSuccess] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isReady, setIsReady] = useState(false);
+console.log(error);
+console.log(success);
+
 
   useEffect(() => {
     if (initializedRef.current) return;
@@ -131,14 +134,14 @@ export default function PaymentForm({amount,currency,color,formwidth=400,formbor
         </div>
 
         {/* Expiration + CVC */}
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "12px" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "5px" }}>
           <div>
-            <label style={{ fontWeight: "500", color: "#555" }}>Expiration</label>
+            <label style={{ fontWeight: "500", color: "#555",marginBottom:2 }}>Expiration</label>
             <div
               data-shift4="expiry"
               className="form-control"
               style={{
-                 padding: inputpadding,
+                padding: inputpadding,
                 borderRadius: formborderRadius,
                 border: "1px solid #ccc",
                 boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
@@ -146,7 +149,7 @@ export default function PaymentForm({amount,currency,color,formwidth=400,formbor
             />
           </div>
           <div>
-            <label style={{ fontWeight: "500", color: "#555" }}>CVC</label>
+            <label style={{ fontWeight: "500", color: "#555",marginBottom:2 }}>CVC</label>
             <div
               data-shift4="cvc"
               className="form-control"