logix-payment-shift4 1.1.0 → 1.1.2

package/dist/index.cjs.js

@@ -193,7 +193,11 @@ function PaymentForm(_ref) {
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
     _ref$inputpadding = _ref.inputpadding,
     inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
-    apiUrl = _ref.apiUrl;
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage,
+    description = _ref.description;
   var formRef = React.useRef();
   var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = React.useRef(null);
@@ -227,7 +231,7 @@ function PaymentForm(_ref) {
             case 0:
               _context.p = 0;
               _context.n = 1;
-              return fetch(apiUrl);
+              return fetch(baseUrl + userId);
             case 1:
               response = _context.v;
               if (response.ok) {
@@ -283,7 +287,7 @@ function PaymentForm(_ref) {
   }, []);
   var handleSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
-      var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t2;
+      var token, request, threeDSecureToken, apiBase, response, result, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -324,7 +328,8 @@ function PaymentForm(_ref) {
             request = {
               amount: amount,
               currency: currency,
-              card: token.id
+              card: token.id,
+              description: description
             };
             _context2.n = 7;
             return shift4Ref.current.verifyThreeDSecure(request);
@@ -336,9 +341,9 @@ function PaymentForm(_ref) {
             }
             throw new Error("3D Secure verification failed. Please try again.");
           case 8:
-            apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
+            apiBase = baseUrl + "charge/" + userId;
             _context2.n = 9;
-            return fetch("".concat(apiBase, "/charge"), {
+            return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
                 "Content-Type": "application/json"
@@ -346,7 +351,8 @@ function PaymentForm(_ref) {
               body: JSON.stringify({
                 tokenId: threeDSecureToken.id,
                 amount: request.amount,
-                currency: request.currency
+                currency: request.currency,
+                description: description
               })
             });
           case 9:
@@ -359,15 +365,16 @@ function PaymentForm(_ref) {
               _context2.n = 11;
               break;
             }
-            throw new Error((result === null || result === void 0 ? void 0 : result.error) || "Payment failed. Please try again.");
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(result.message));
+            return _context2.a(2);
           case 11:
-            setSuccess("Payment approved. Charge ID: ".concat((result === null || result === void 0 || (_result$charge = result.charge) === null || _result$charge === void 0 ? void 0 : _result$charge.id) || "unknown"));
+            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
             _context2.n = 13;
             break;
           case 12:
             _context2.p = 12;
             _t2 = _context2.v;
-            setError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Payment failed. Please try again.");
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
           case 13:
             _context2.p = 13;
             setIsSubmitting(false);

package/dist/index.esm.js

@@ -191,7 +191,11 @@ function PaymentForm(_ref) {
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
     _ref$inputpadding = _ref.inputpadding,
     inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
-    apiUrl = _ref.apiUrl;
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage,
+    description = _ref.description;
   var formRef = useRef();
   var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = useRef(null);
@@ -225,7 +229,7 @@ function PaymentForm(_ref) {
             case 0:
               _context.p = 0;
               _context.n = 1;
-              return fetch(apiUrl);
+              return fetch(baseUrl + userId);
             case 1:
               response = _context.v;
               if (response.ok) {
@@ -281,7 +285,7 @@ function PaymentForm(_ref) {
   }, []);
   var handleSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
-      var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t2;
+      var token, request, threeDSecureToken, apiBase, response, result, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -322,7 +326,8 @@ function PaymentForm(_ref) {
             request = {
               amount: amount,
               currency: currency,
-              card: token.id
+              card: token.id,
+              description: description
             };
             _context2.n = 7;
             return shift4Ref.current.verifyThreeDSecure(request);
@@ -334,9 +339,9 @@ function PaymentForm(_ref) {
             }
             throw new Error("3D Secure verification failed. Please try again.");
           case 8:
-            apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
+            apiBase = baseUrl + "charge/" + userId;
             _context2.n = 9;
-            return fetch("".concat(apiBase, "/charge"), {
+            return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
                 "Content-Type": "application/json"
@@ -344,7 +349,8 @@ function PaymentForm(_ref) {
               body: JSON.stringify({
                 tokenId: threeDSecureToken.id,
                 amount: request.amount,
-                currency: request.currency
+                currency: request.currency,
+                description: description
               })
             });
           case 9:
@@ -357,15 +363,16 @@ function PaymentForm(_ref) {
               _context2.n = 11;
               break;
             }
-            throw new Error((result === null || result === void 0 ? void 0 : result.error) || "Payment failed. Please try again.");
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(result.message));
+            return _context2.a(2);
           case 11:
-            setSuccess("Payment approved. Charge ID: ".concat((result === null || result === void 0 || (_result$charge = result.charge) === null || _result$charge === void 0 ? void 0 : _result$charge.id) || "unknown"));
+            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
             _context2.n = 13;
             break;
           case 12:
             _context2.p = 12;
             _t2 = _context2.v;
-            setError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Payment failed. Please try again.");
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
           case 13:
             _context2.p = 13;
             setIsSubmitting(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",inputpadding=12,apiUrl}) {
+export default function PaymentForm({ amount, currency, color, formwidth = 400, formborderRadius = 20, formbackgroundColor = "#fff", inputpadding = 12, baseUrl, userId, successPage, errorPage,description }) {
   const formRef = useRef();
   const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   const shift4Ref = useRef(null);
@@ -9,54 +9,54 @@ 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);
+  console.log(error);
+  console.log(success);
 
 
- useEffect(() => {
-  if (initializedRef.current) return;
-  initializedRef.current = true;
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
 
-  const initPayment = async () => {
-    try {
-      // 🔹 1. Public key-ni backend-dən çəkirik
-      const response = await fetch(apiUrl);
-      if (!response.ok) throw new Error("Failed to fetch public key");
+    const initPayment = async () => {
+      try {
+        // 🔹 1. Public key-ni backend-dən çəkirik
+        const response = await fetch(baseUrl + userId);
+        if (!response.ok) throw new Error("Failed to fetch public key");
 
-      const { publicKeys} = await response.json();
-      if (!publicKeys) throw new Error("Public key is empty");
+        const { publicKeys } = await response.json();
+        if (!publicKeys) throw new Error("Public key is empty");
 
-      // 🔹 2. Shift4 script-i yükləyirik
-      const script = document.createElement("script");
-      script.src = "https://js.dev.shift4.com/shift4.js";
-      script.async = true;
+        // 🔹 2. Shift4 script-i yükləyirik
+        const script = document.createElement("script");
+        script.src = "https://js.dev.shift4.com/shift4.js";
+        script.async = true;
 
-      script.onload = () => {
-        if (!window.Shift4) return;
+        script.onload = () => {
+          if (!window.Shift4) return;
 
-        // 🔹 3. Dinamik key ilə init
-        shift4Ref.current = window.Shift4(publicKeys);
+          // 🔹 3. Dinamik key ilə init
+          shift4Ref.current = window.Shift4(publicKeys);
 
-        componentsRef.current = shift4Ref.current
-          .createComponentGroup()
-          .automount("#payment-form");
+          componentsRef.current = shift4Ref.current
+            .createComponentGroup()
+            .automount("#payment-form");
 
-        setIsReady(true);
-      };
+          setIsReady(true);
+        };
 
-      script.onerror = () => {
-        setError("Payment provider script failed to load.");
-      };
+        script.onerror = () => {
+          setError("Payment provider script failed to load.");
+        };
 
-      document.body.appendChild(script);
-    } catch (err) {
-      console.error(err);
-      setError("Payment initialization failed. Please try again.");
-    }
-  };
+        document.body.appendChild(script);
+      } catch (err) {
+        console.error(err);
+        setError("Payment initialization failed. Please try again.");
+      }
+    };
 
-  initPayment();
-}, []);
+    initPayment();
+  }, []);
 
 
   const handleSubmit = async (e) => {
@@ -84,6 +84,7 @@ console.log(success);
         amount: amount,
         currency: currency,
         card: token.id,
+        description
       };
 
       const threeDSecureToken = await shift4Ref.current.verifyThreeDSecure(request);
@@ -91,8 +92,8 @@ console.log(success);
         throw new Error("3D Secure verification failed. Please try again.");
       }
 
-      const apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
-      const response = await fetch(`${apiBase}/charge`, {
+      const apiBase = baseUrl + "charge/" + userId;
+      const response = await fetch(`${apiBase}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -101,24 +102,26 @@ console.log(success);
           tokenId: threeDSecureToken.id,
           amount: request.amount,
           currency: request.currency,
+          description
         }),
       });
-
       const result = await response.json();
       if (!response.ok) {
-        throw new Error(result?.error || "Payment failed. Please try again.");
+        window.location.href = `${errorPage}?message=${encodeURIComponent(result.message)}`;
+        return;
       }
 
-      setSuccess(`Payment approved. Charge ID: ${result?.charge?.id || "unknown"}`);
+      window.location.href = `${successPage}?message=${encodeURIComponent(result.message)}`;
+
     } catch (err) {
-      setError(err?.message || "Payment failed. Please try again.");
+      window.location.href = `${errorPage}?message=${encodeURIComponent(err.message)}`;
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-     <div
+    <div
       style={{
         display: "flex",
         justifyContent: "center",
@@ -137,11 +140,11 @@ console.log(success);
           padding: "20px",
           backgroundColor: formbackgroundColor,
           borderRadius: formborderRadius,
-          width: formwidth, 
+          width: formwidth,
           boxSizing: "border-box"
         }}
       >
-      
+
 
         {/* Card Number */}
         <div style={{ display: "grid", gap: "8px" }}>
@@ -161,7 +164,7 @@ console.log(success);
         {/* Expiration + CVC */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "5px" }}>
           <div>
-            <label style={{ fontWeight: "500", color: "#555",marginBottom:2 }}>Expiration</label>
+            <label style={{ fontWeight: "500", color: "#555", marginBottom: 2 }}>Expiration</label>
             <div
               data-shift4="expiry"
               className="form-control"
@@ -174,7 +177,7 @@ console.log(success);
             />
           </div>
           <div>
-            <label style={{ fontWeight: "500", color: "#555",marginBottom:2 }}>CVC</label>
+            <label style={{ fontWeight: "500", color: "#555", marginBottom: 2 }}>CVC</label>
             <div
               data-shift4="cvc"
               className="form-control"
@@ -195,7 +198,7 @@ console.log(success);
           style={{
             marginTop: "16px",
             width: "100%",
-            padding: inputpadding+2,
+            padding: inputpadding + 2,
             backgroundColor: color,
             color: "white",
             border: "none",