logix-payment-shift4 1.0.8 → 1.1.0

package/dist/index.cjs.js

@@ -192,19 +192,20 @@ 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,
+    apiUrl = _ref.apiUrl;
   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);
-    _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,59 +214,109 @@ 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;
-    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(apiUrl);
+            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 _result$charge, 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,18 +326,18 @@ 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;
+            _context2.n = 9;
             return fetch("".concat(apiBase, "/charge"), {
               method: "POST",
               headers: {
@@ -299,35 +350,35 @@ 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.");
           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;
+            _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;
+            setError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Payment failed. Please try again.");
           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,19 +190,20 @@ 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,
+    apiUrl = _ref.apiUrl;
   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);
-    _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,59 +212,109 @@ 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;
-    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(apiUrl);
+            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 _result$charge, 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.");
@@ -273,18 +324,18 @@ 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;
+            _context2.n = 9;
             return fetch("".concat(apiBase, "/charge"), {
               method: "POST",
               headers: {
@@ -297,35 +348,35 @@ 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.");
           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;
+            _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;
+            setError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Payment failed. Please try again.");
           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.8",
+  "version": "1.1.0",
   "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,apiUrl}) {
   const formRef = useRef();
   const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
   const shift4Ref = useRef(null);
@@ -9,27 +9,55 @@ 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;
+  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 { 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.");
+    }
+  };
+
+  initPayment();
+}, []);
 
-  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;
-
-      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.");
-    };
-
-    document.body.appendChild(script);
-  }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();