logix-payment-shift4 1.0.9 → 1.1.1

package/dist/index.cjs.js

@@ -192,7 +192,11 @@ function PaymentForm(_ref) {
     _ref$formbackgroundCo = _ref.formbackgroundColor,
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
     _ref$inputpadding = _ref.inputpadding,
-    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage;
   var formRef = React.useRef();
   var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = React.useRef(null);
@@ -218,56 +222,104 @@ function PaymentForm(_ref) {
   React.useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
-    var script = document.createElement("script");
-    script.src = "https://js.dev.shift4.com/shift4.js";
-    script.async = true;
-    script.onload = function () {
-      if (!window.Shift4) return;
-      shift4Ref.current = window.Shift4("pk_test_SeDEbtFlcz4LqVe1zxMYZxQO");
-      componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
-      setIsReady(true);
-    };
-    script.onerror = function () {
-      setError("Payment provider script failed to load. Please refresh and try again.");
-    };
-    document.body.appendChild(script);
+    var initPayment = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var response, _yield$response$json, publicKeys, script, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              _context.p = 0;
+              _context.n = 1;
+              return fetch(baseUrl + userId);
+            case 1:
+              response = _context.v;
+              if (response.ok) {
+                _context.n = 2;
+                break;
+              }
+              throw new Error("Failed to fetch public key");
+            case 2:
+              _context.n = 3;
+              return response.json();
+            case 3:
+              _yield$response$json = _context.v;
+              publicKeys = _yield$response$json.publicKeys;
+              if (publicKeys) {
+                _context.n = 4;
+                break;
+              }
+              throw new Error("Public key is empty");
+            case 4:
+              // 🔹 2. Shift4 script-i yükləyirik
+              script = document.createElement("script");
+              script.src = "https://js.dev.shift4.com/shift4.js";
+              script.async = true;
+              script.onload = function () {
+                if (!window.Shift4) return;
+
+                // 🔹 3. Dinamik key ilə init
+                shift4Ref.current = window.Shift4(publicKeys);
+                componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
+                setIsReady(true);
+              };
+              script.onerror = function () {
+                setError("Payment provider script failed to load.");
+              };
+              document.body.appendChild(script);
+              _context.n = 6;
+              break;
+            case 5:
+              _context.p = 5;
+              _t = _context.v;
+              console.error(_t);
+              setError("Payment initialization failed. Please try again.");
+            case 6:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 5]]);
+      }));
+      return function initPayment() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initPayment();
   }, []);
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
-      var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+      var token, request, threeDSecureToken, apiBase, response, result, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
             e.preventDefault();
             if (!isSubmitting) {
-              _context.n = 1;
+              _context2.n = 1;
               break;
             }
-            return _context.a(2);
+            return _context2.a(2);
           case 1:
             if (formRef.current) {
-              _context.n = 2;
+              _context2.n = 2;
               break;
             }
-            return _context.a(2);
+            return _context2.a(2);
           case 2:
             if (!(!shift4Ref.current || !componentsRef.current)) {
-              _context.n = 3;
+              _context2.n = 3;
               break;
             }
             setError("Payment form is not ready yet. Please try again.");
-            return _context.a(2);
+            return _context2.a(2);
           case 3:
             setError("");
             setSuccess("");
             setIsSubmitting(true);
-            _context.p = 4;
-            _context.n = 5;
+            _context2.p = 4;
+            _context2.n = 5;
             return shift4Ref.current.createToken(componentsRef.current);
           case 5:
-            token = _context.v;
+            token = _context2.v;
             if (token !== null && token !== void 0 && token.id) {
-              _context.n = 6;
+              _context2.n = 6;
               break;
             }
             throw new Error("Card tokenization failed. Please check your details and try again.");
@@ -277,19 +329,19 @@ function PaymentForm(_ref) {
               currency: currency,
               card: token.id
             };
-            _context.n = 7;
+            _context2.n = 7;
             return shift4Ref.current.verifyThreeDSecure(request);
           case 7:
-            threeDSecureToken = _context.v;
+            threeDSecureToken = _context2.v;
             if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
-              _context.n = 8;
+              _context2.n = 8;
               break;
             }
             throw new Error("3D Secure verification failed. Please try again.");
           case 8:
-            apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
-            _context.n = 9;
-            return fetch("".concat(apiBase, "/charge"), {
+            apiBase = baseUrl + "charge/" + userId;
+            _context2.n = 9;
+            return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
                 "Content-Type": "application/json"
@@ -301,35 +353,36 @@ function PaymentForm(_ref) {
               })
             });
           case 9:
-            response = _context.v;
-            _context.n = 10;
+            response = _context2.v;
+            _context2.n = 10;
             return response.json();
           case 10:
-            result = _context.v;
+            result = _context2.v;
             if (response.ok) {
-              _context.n = 11;
+              _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"));
-            _context.n = 13;
+            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
+            _context2.n = 13;
             break;
           case 12:
-            _context.p = 12;
-            _t = _context.v;
-            setError((_t === null || _t === void 0 ? void 0 : _t.message) || "Payment failed. Please try again.");
+            _context2.p = 12;
+            _t2 = _context2.v;
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
           case 13:
-            _context.p = 13;
+            _context2.p = 13;
             setIsSubmitting(false);
-            return _context.f(13);
+            return _context2.f(13);
           case 14:
-            return _context.a(2);
+            return _context2.a(2);
         }
-      }, _callee, null, [[4, 12, 13, 14]]);
+      }, _callee2, null, [[4, 12, 13, 14]]);
     }));
     return function handleSubmit(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement("div", {

package/dist/index.esm.js

@@ -190,7 +190,11 @@ function PaymentForm(_ref) {
     _ref$formbackgroundCo = _ref.formbackgroundColor,
     formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
     _ref$inputpadding = _ref.inputpadding,
-    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage;
   var formRef = useRef();
   var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   var shift4Ref = useRef(null);
@@ -216,56 +220,104 @@ function PaymentForm(_ref) {
   useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
-    var script = document.createElement("script");
-    script.src = "https://js.dev.shift4.com/shift4.js";
-    script.async = true;
-    script.onload = function () {
-      if (!window.Shift4) return;
-      shift4Ref.current = window.Shift4("pk_test_SeDEbtFlcz4LqVe1zxMYZxQO");
-      componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
-      setIsReady(true);
-    };
-    script.onerror = function () {
-      setError("Payment provider script failed to load. Please refresh and try again.");
-    };
-    document.body.appendChild(script);
+    var initPayment = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var response, _yield$response$json, publicKeys, script, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              _context.p = 0;
+              _context.n = 1;
+              return fetch(baseUrl + userId);
+            case 1:
+              response = _context.v;
+              if (response.ok) {
+                _context.n = 2;
+                break;
+              }
+              throw new Error("Failed to fetch public key");
+            case 2:
+              _context.n = 3;
+              return response.json();
+            case 3:
+              _yield$response$json = _context.v;
+              publicKeys = _yield$response$json.publicKeys;
+              if (publicKeys) {
+                _context.n = 4;
+                break;
+              }
+              throw new Error("Public key is empty");
+            case 4:
+              // 🔹 2. Shift4 script-i yükləyirik
+              script = document.createElement("script");
+              script.src = "https://js.dev.shift4.com/shift4.js";
+              script.async = true;
+              script.onload = function () {
+                if (!window.Shift4) return;
+
+                // 🔹 3. Dinamik key ilə init
+                shift4Ref.current = window.Shift4(publicKeys);
+                componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
+                setIsReady(true);
+              };
+              script.onerror = function () {
+                setError("Payment provider script failed to load.");
+              };
+              document.body.appendChild(script);
+              _context.n = 6;
+              break;
+            case 5:
+              _context.p = 5;
+              _t = _context.v;
+              console.error(_t);
+              setError("Payment initialization failed. Please try again.");
+            case 6:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 5]]);
+      }));
+      return function initPayment() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initPayment();
   }, []);
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
-      var _result$charge, token, request, threeDSecureToken, apiBase, response, result, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+      var token, request, threeDSecureToken, apiBase, response, result, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
             e.preventDefault();
             if (!isSubmitting) {
-              _context.n = 1;
+              _context2.n = 1;
               break;
             }
-            return _context.a(2);
+            return _context2.a(2);
           case 1:
             if (formRef.current) {
-              _context.n = 2;
+              _context2.n = 2;
               break;
             }
-            return _context.a(2);
+            return _context2.a(2);
           case 2:
             if (!(!shift4Ref.current || !componentsRef.current)) {
-              _context.n = 3;
+              _context2.n = 3;
               break;
             }
             setError("Payment form is not ready yet. Please try again.");
-            return _context.a(2);
+            return _context2.a(2);
           case 3:
             setError("");
             setSuccess("");
             setIsSubmitting(true);
-            _context.p = 4;
-            _context.n = 5;
+            _context2.p = 4;
+            _context2.n = 5;
             return shift4Ref.current.createToken(componentsRef.current);
           case 5:
-            token = _context.v;
+            token = _context2.v;
             if (token !== null && token !== void 0 && token.id) {
-              _context.n = 6;
+              _context2.n = 6;
               break;
             }
             throw new Error("Card tokenization failed. Please check your details and try again.");
@@ -275,19 +327,19 @@ function PaymentForm(_ref) {
               currency: currency,
               card: token.id
             };
-            _context.n = 7;
+            _context2.n = 7;
             return shift4Ref.current.verifyThreeDSecure(request);
           case 7:
-            threeDSecureToken = _context.v;
+            threeDSecureToken = _context2.v;
             if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
-              _context.n = 8;
+              _context2.n = 8;
               break;
             }
             throw new Error("3D Secure verification failed. Please try again.");
           case 8:
-            apiBase = process.env.REACT_APP_API_BASE || "http://localhost:4242";
-            _context.n = 9;
-            return fetch("".concat(apiBase, "/charge"), {
+            apiBase = baseUrl + "charge/" + userId;
+            _context2.n = 9;
+            return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
                 "Content-Type": "application/json"
@@ -299,35 +351,36 @@ function PaymentForm(_ref) {
               })
             });
           case 9:
-            response = _context.v;
-            _context.n = 10;
+            response = _context2.v;
+            _context2.n = 10;
             return response.json();
           case 10:
-            result = _context.v;
+            result = _context2.v;
             if (response.ok) {
-              _context.n = 11;
+              _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"));
-            _context.n = 13;
+            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
+            _context2.n = 13;
             break;
           case 12:
-            _context.p = 12;
-            _t = _context.v;
-            setError((_t === null || _t === void 0 ? void 0 : _t.message) || "Payment failed. Please try again.");
+            _context2.p = 12;
+            _t2 = _context2.v;
+            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
           case 13:
-            _context.p = 13;
+            _context2.p = 13;
             setIsSubmitting(false);
-            return _context.f(13);
+            return _context2.f(13);
           case 14:
-            return _context.a(2);
+            return _context2.a(2);
         }
-      }, _callee, null, [[4, 12, 13, 14]]);
+      }, _callee2, null, [[4, 12, 13, 14]]);
     }));
     return function handleSubmit(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "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}) {
+export default function PaymentForm({ amount, currency, color, formwidth = 400, formborderRadius = 20, formbackgroundColor = "#fff", inputpadding = 12, baseUrl, userId, successPage, errorPage }) {
   const formRef = useRef();
   const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   const shift4Ref = useRef(null);
@@ -9,31 +9,56 @@ 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;
 
-    const script = document.createElement("script");
-    script.src = "https://js.dev.shift4.com/shift4.js";
-    script.async = true;
-    script.onload = () => {
-      if (!window.Shift4) return;
+    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");
 
-      shift4Ref.current = window.Shift4("pk_test_SeDEbtFlcz4LqVe1zxMYZxQO");
-      componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
-      setIsReady(true);
-    };
-    script.onerror = () => {
-      setError("Payment provider script failed to load. Please refresh and try again.");
+        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;
+
+        script.onload = () => {
+          if (!window.Shift4) return;
+
+          // 🔹 3. Dinamik key ilə init
+          shift4Ref.current = window.Shift4(publicKeys);
+
+          componentsRef.current = shift4Ref.current
+            .createComponentGroup()
+            .automount("#payment-form");
+
+          setIsReady(true);
+        };
+
+        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);
+    initPayment();
   }, []);
 
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -66,8 +91,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",
@@ -78,22 +103,23 @@ console.log(success);
           currency: request.currency,
         }),
       });
-
       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",
@@ -112,11 +138,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" }}>
@@ -136,7 +162,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"
@@ -149,7 +175,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"
@@ -170,7 +196,7 @@ console.log(success);
           style={{
             marginTop: "16px",
             width: "100%",
-            padding: inputpadding+2,
+            padding: inputpadding + 2,
             backgroundColor: color,
             color: "white",
             border: "none",