logix-payment-shift4 1.1.2 → 1.1.4

package/README.md

@@ -0,0 +1,41 @@
+# 💳 PaymentForm (Shift4 React Payment Component)
+
+PaymentForm is a **React component** built to accept **secure card payments** using **Shift4**.  
+It is **SPA-friendly** and handles payment results via **callback functions** instead of forced redirects.
+
+---
+
+## ✨ Features
+
+- 🔐 Secure card tokenization (Shift4)
+- 🛡️ 3D Secure support
+- ⚡ Callback-based success & error handling
+- 🎨 Fully customizable UI
+- 📦 Library-ready component
+- 🚀 Works with React Router / Next.js
+
+---
+
+## 📦 Installation
+
+```bash
+npm i logix-payment-shift4
+
+import PaymentForm from "logix-payment-shift4";
+
+<PaymentForm
+  amount={1000}
+  currency="USD"
+  color="#0d6efd"
+  baseUrl="https://api.example.com/payment/"
+  userId="user-123"
+  description="Premium subscription"
+
+  successPage={(message) => {
+    console.log("Payment successful:", message);
+  }}
+
+  errorPage={(error) => {
+    console.error("Payment failed:", error);
+  }}
+/>

package/dist/index.cjs.js

@@ -199,27 +199,17 @@ function PaymentForm(_ref) {
     errorPage = _ref.errorPage,
     description = _ref.description;
   var formRef = React.useRef();
-  var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
+  var initializedRef = React.useRef(false);
   var shift4Ref = React.useRef(null);
   var componentsRef = React.useRef(null);
-  var _useState = React.useState(""),
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
-  var _useState3 = React.useState(""),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    success = _useState4[0],
-    setSuccess = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isSubmitting = _useState6[0],
-    setIsSubmitting = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isReady = _useState8[0],
-    setIsReady = _useState8[1];
-  console.log(error);
-  console.log(success);
+    isReady = _useState4[0],
+    setIsReady = _useState4[1];
   React.useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
@@ -234,31 +224,18 @@ function PaymentForm(_ref) {
               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;
+              if (!response.ok) errorPage("Failed to fetch public key");
+              _context.n = 2;
               return response.json();
-            case 3:
+            case 2:
               _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
+              if (!publicKeys) errorPage("Public key is empty");
               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);
@@ -267,17 +244,17 @@ function PaymentForm(_ref) {
                 setError("Payment provider script failed to load.");
               };
               document.body.appendChild(script);
-              _context.n = 6;
+              _context.n = 4;
               break;
-            case 5:
-              _context.p = 5;
+            case 3:
+              _context.p = 3;
               _t = _context.v;
               console.error(_t);
               setError("Payment initialization failed. Please try again.");
-            case 6:
+            case 4:
               return _context.a(2);
           }
-        }, _callee, null, [[0, 5]]);
+        }, _callee, null, [[0, 3]]);
       }));
       return function initPayment() {
         return _ref2.apply(this, arguments);
@@ -308,41 +285,33 @@ function PaymentForm(_ref) {
               _context2.n = 3;
               break;
             }
-            setError("Payment form is not ready yet. Please try again.");
+            errorPage("Payment form is not ready yet. Please try again.");
             return _context2.a(2);
           case 3:
-            setError("");
-            setSuccess("");
             setIsSubmitting(true);
             _context2.p = 4;
             _context2.n = 5;
             return shift4Ref.current.createToken(componentsRef.current);
           case 5:
             token = _context2.v;
-            if (token !== null && token !== void 0 && token.id) {
-              _context2.n = 6;
-              break;
+            if (!(token !== null && token !== void 0 && token.id)) {
+              errorPage("Card tokenization failed. Please check your details and try again.");
             }
-            throw new Error("Card tokenization failed. Please check your details and try again.");
-          case 6:
             request = {
               amount: amount,
               currency: currency,
               card: token.id,
               description: description
             };
-            _context2.n = 7;
+            _context2.n = 6;
             return shift4Ref.current.verifyThreeDSecure(request);
-          case 7:
+          case 6:
             threeDSecureToken = _context2.v;
-            if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
-              _context2.n = 8;
-              break;
+            if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
+              errorPage("3D Secure verification failed. Please try again.");
             }
-            throw new Error("3D Secure verification failed. Please try again.");
-          case 8:
             apiBase = baseUrl + "charge/" + userId;
-            _context2.n = 9;
+            _context2.n = 7;
             return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
@@ -355,34 +324,34 @@ function PaymentForm(_ref) {
                 description: description
               })
             });
-          case 9:
+          case 7:
             response = _context2.v;
-            _context2.n = 10;
+            _context2.n = 8;
             return response.json();
-          case 10:
+          case 8:
             result = _context2.v;
             if (response.ok) {
-              _context2.n = 11;
+              _context2.n = 9;
               break;
             }
-            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(result.message));
+            if (typeof errorPage === "function") errorPage(result);
             return _context2.a(2);
-          case 11:
-            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
-            _context2.n = 13;
+          case 9:
+            if (typeof successPage === "function") successPage(result.message);
+            _context2.n = 11;
             break;
-          case 12:
-            _context2.p = 12;
+          case 10:
+            _context2.p = 10;
             _t2 = _context2.v;
-            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
-          case 13:
-            _context2.p = 13;
+            if (typeof errorPage === "function") errorPage(_t2.message);
+          case 11:
+            _context2.p = 11;
             setIsSubmitting(false);
-            return _context2.f(13);
-          case 14:
+            return _context2.f(11);
+          case 12:
             return _context2.a(2);
         }
-      }, _callee2, null, [[4, 12, 13, 14]]);
+      }, _callee2, null, [[4, 10, 11, 12]]);
     }));
     return function handleSubmit(_x) {
       return _ref3.apply(this, arguments);

package/dist/index.esm.js

@@ -197,27 +197,17 @@ function PaymentForm(_ref) {
     errorPage = _ref.errorPage,
     description = _ref.description;
   var formRef = useRef();
-  var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
+  var initializedRef = useRef(false);
   var shift4Ref = useRef(null);
   var componentsRef = useRef(null);
-  var _useState = useState(""),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
-  var _useState3 = useState(""),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    success = _useState4[0],
-    setSuccess = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isSubmitting = _useState6[0],
-    setIsSubmitting = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isReady = _useState8[0],
-    setIsReady = _useState8[1];
-  console.log(error);
-  console.log(success);
+    isReady = _useState4[0],
+    setIsReady = _useState4[1];
   useEffect(function () {
     if (initializedRef.current) return;
     initializedRef.current = true;
@@ -232,31 +222,18 @@ function PaymentForm(_ref) {
               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;
+              if (!response.ok) errorPage("Failed to fetch public key");
+              _context.n = 2;
               return response.json();
-            case 3:
+            case 2:
               _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
+              if (!publicKeys) errorPage("Public key is empty");
               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);
@@ -265,17 +242,17 @@ function PaymentForm(_ref) {
                 setError("Payment provider script failed to load.");
               };
               document.body.appendChild(script);
-              _context.n = 6;
+              _context.n = 4;
               break;
-            case 5:
-              _context.p = 5;
+            case 3:
+              _context.p = 3;
               _t = _context.v;
               console.error(_t);
               setError("Payment initialization failed. Please try again.");
-            case 6:
+            case 4:
               return _context.a(2);
           }
-        }, _callee, null, [[0, 5]]);
+        }, _callee, null, [[0, 3]]);
       }));
       return function initPayment() {
         return _ref2.apply(this, arguments);
@@ -306,41 +283,33 @@ function PaymentForm(_ref) {
               _context2.n = 3;
               break;
             }
-            setError("Payment form is not ready yet. Please try again.");
+            errorPage("Payment form is not ready yet. Please try again.");
             return _context2.a(2);
           case 3:
-            setError("");
-            setSuccess("");
             setIsSubmitting(true);
             _context2.p = 4;
             _context2.n = 5;
             return shift4Ref.current.createToken(componentsRef.current);
           case 5:
             token = _context2.v;
-            if (token !== null && token !== void 0 && token.id) {
-              _context2.n = 6;
-              break;
+            if (!(token !== null && token !== void 0 && token.id)) {
+              errorPage("Card tokenization failed. Please check your details and try again.");
             }
-            throw new Error("Card tokenization failed. Please check your details and try again.");
-          case 6:
             request = {
               amount: amount,
               currency: currency,
               card: token.id,
               description: description
             };
-            _context2.n = 7;
+            _context2.n = 6;
             return shift4Ref.current.verifyThreeDSecure(request);
-          case 7:
+          case 6:
             threeDSecureToken = _context2.v;
-            if (threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id) {
-              _context2.n = 8;
-              break;
+            if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
+              errorPage("3D Secure verification failed. Please try again.");
             }
-            throw new Error("3D Secure verification failed. Please try again.");
-          case 8:
             apiBase = baseUrl + "charge/" + userId;
-            _context2.n = 9;
+            _context2.n = 7;
             return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
@@ -353,34 +322,34 @@ function PaymentForm(_ref) {
                 description: description
               })
             });
-          case 9:
+          case 7:
             response = _context2.v;
-            _context2.n = 10;
+            _context2.n = 8;
             return response.json();
-          case 10:
+          case 8:
             result = _context2.v;
             if (response.ok) {
-              _context2.n = 11;
+              _context2.n = 9;
               break;
             }
-            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(result.message));
+            if (typeof errorPage === "function") errorPage(result);
             return _context2.a(2);
-          case 11:
-            window.location.href = "".concat(successPage, "?message=").concat(encodeURIComponent(result.message));
-            _context2.n = 13;
+          case 9:
+            if (typeof successPage === "function") successPage(result.message);
+            _context2.n = 11;
             break;
-          case 12:
-            _context2.p = 12;
+          case 10:
+            _context2.p = 10;
             _t2 = _context2.v;
-            window.location.href = "".concat(errorPage, "?message=").concat(encodeURIComponent(_t2.message));
-          case 13:
-            _context2.p = 13;
+            if (typeof errorPage === "function") errorPage(_t2.message);
+          case 11:
+            _context2.p = 11;
             setIsSubmitting(false);
-            return _context2.f(13);
-          case 14:
+            return _context2.f(11);
+          case 12:
             return _context2.a(2);
         }
-      }, _callee2, null, [[4, 12, 13, 14]]);
+      }, _callee2, null, [[4, 10, 11, 12]]);
     }));
     return function handleSubmit(_x) {
       return _ref3.apply(this, arguments);

package/package.json

@@ -1,20 +1,39 @@
 {
   "name": "logix-payment-shift4",
-  "version": "1.1.2",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "version": "1.1.4",
   "description": "A React component library for integrating Shift4 payments with Logix applications.",
+  "author": "Yusif Atababayev",
+  "license": "ISC",
+
   "type": "module",
+
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+
+  "files": [
+    "dist",
+    "README.md"
+  ],
+
   "scripts": {
     "build": "rollup -c"
   },
-  "keywords": [],
-  "author": "Yusif Atababayev",
-  "license": "ISC",
-  "dependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+
+  "keywords": [
+    "react",
+    "payment",
+    "shift4",
+    "checkout",
+    "3d-secure",
+    "react-component",
+    "payment-gateway"
+  ],
+
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   },
+
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
@@ -24,4 +43,5 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "rollup": "^4.55.1"
   }
-}
+
+}

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/rollup.config.js

@@ -1,29 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import babel from "@rollup/plugin-babel";
-
-export default {
-  input: "src/index.js",
-  output: [
-    {
-      file: "dist/index.cjs.js",
-      format: "cjs",
-      exports: "named"
-    },
-    {
-      file: "dist/index.esm.js",
-      format: "esm"
-    }
-  ],
-  external: ["react", "react-dom"],
-  plugins: [
-    resolve({
-  extensions: [".js", ".jsx", ".ts", ".tsx"]
-}),
-    commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      exclude: "node_modules/**"
-    })
-  ]
-};

package/src/PaymentForm.jsx

@@ -1,217 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-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);
-  const componentsRef = useRef(null);
-  const [error, setError] = useState("");
-  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(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");
-
-        // 🔹 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();
-  }, []);
-
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    if (isSubmitting) return;
-    if (!formRef.current) return;
-
-    if (!shift4Ref.current || !componentsRef.current) {
-      setError("Payment form is not ready yet. Please try again.");
-      return;
-    }
-
-    setError("");
-    setSuccess("");
-    setIsSubmitting(true);
-
-    try {
-      const token = await shift4Ref.current.createToken(componentsRef.current);
-      if (!token?.id) {
-        throw new Error("Card tokenization failed. Please check your details and try again.");
-      }
-
-      const request = {
-        amount: amount,
-        currency: currency,
-        card: token.id,
-        description
-      };
-
-      const threeDSecureToken = await shift4Ref.current.verifyThreeDSecure(request);
-      if (!threeDSecureToken?.id) {
-        throw new Error("3D Secure verification failed. Please try again.");
-      }
-
-      const apiBase = baseUrl + "charge/" + userId;
-      const response = await fetch(`${apiBase}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          tokenId: threeDSecureToken.id,
-          amount: request.amount,
-          currency: request.currency,
-          description
-        }),
-      });
-      const result = await response.json();
-      if (!response.ok) {
-        window.location.href = `${errorPage}?message=${encodeURIComponent(result.message)}`;
-        return;
-      }
-
-      window.location.href = `${successPage}?message=${encodeURIComponent(result.message)}`;
-
-    } catch (err) {
-      window.location.href = `${errorPage}?message=${encodeURIComponent(err.message)}`;
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        width: "100%",
-        boxSizing: "border-box"
-      }}
-    >
-      <form
-        ref={formRef}
-        id="payment-form"
-        onSubmit={handleSubmit}
-        method="post"
-        style={{
-          display: "grid",
-          gap: "12px",
-          padding: "20px",
-          backgroundColor: formbackgroundColor,
-          borderRadius: formborderRadius,
-          width: formwidth,
-          boxSizing: "border-box"
-        }}
-      >
-
-
-        {/* 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: inputpadding,
-              borderRadius: formborderRadius,
-              border: "1px solid #ccc",
-              boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
-            }}
-          />
-        </div>
-
-        {/* Expiration + CVC */}
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "5px" }}>
-          <div>
-            <label style={{ fontWeight: "500", color: "#555", marginBottom: 2 }}>Expiration</label>
-            <div
-              data-shift4="expiry"
-              className="form-control"
-              style={{
-                padding: inputpadding,
-                borderRadius: formborderRadius,
-                border: "1px solid #ccc",
-                boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
-              }}
-            />
-          </div>
-          <div>
-            <label style={{ fontWeight: "500", color: "#555", marginBottom: 2 }}>CVC</label>
-            <div
-              data-shift4="cvc"
-              className="form-control"
-              style={{
-                padding: inputpadding,
-                borderRadius: formborderRadius,
-                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={{
-            marginTop: "16px",
-            width: "100%",
-            padding: inputpadding + 2,
-            backgroundColor: color,
-            color: "white",
-            border: "none",
-            borderRadius: formborderRadius,
-            fontWeight: "600",
-            cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
-            opacity: !isReady || isSubmitting ? 0.7 : 1
-          }}
-        >
-          {isSubmitting ? "Processing..." : "Buy now"}
-        </button>
-      </form>
-    </div>
-
-  );
-}

package/src/index.js

@@ -1 +0,0 @@
-export { default as PaymentForm } from "./PaymentForm";