shift-payment-form 1.0.0

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

@@ -0,0 +1,461 @@
+'use strict';
+
+var React = require('react');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function PaymentForm(_ref) {
+  var amount = _ref.amount,
+    currency = _ref.currency,
+    color = _ref.color,
+    _ref$formwidth = _ref.formwidth,
+    formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
+    _ref$formborderRadius = _ref.formborderRadius,
+    formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
+    _ref$formbackgroundCo = _ref.formbackgroundColor,
+    formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
+    _ref$inputpadding = _ref.inputpadding,
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage,
+    description = _ref.description;
+  var formRef = React.useRef();
+  var initializedRef = React.useRef(false);
+  var shift4Ref = React.useRef(null);
+  var componentsRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isStart = _useState4[0],
+    setIsStart = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isReady = _useState6[0],
+    setIsReady = _useState6[1];
+  React.useEffect(function () {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    var initPayment = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var response, _yield$response$json, publicKeys, isProd, 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) errorPage("Failed to fetch public key");
+              _context.n = 2;
+              return response.json();
+            case 2:
+              _yield$response$json = _context.v;
+              publicKeys = _yield$response$json.publicKeys;
+              isProd = _yield$response$json.isProd;
+              if (!publicKeys) errorPage("Public key is empty");
+              script = document.createElement("script");
+              script.src = isProd ? "https://js.shift4.com/shift4.js" : "https://js.dev.shift4.com/shift4.js";
+              script.async = true;
+              script.onload = function () {
+                if (!window.Shift4) return;
+                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 = 4;
+              break;
+            case 3:
+              _context.p = 3;
+              _t = _context.v;
+              console.error(_t);
+              setError("Payment initialization failed. Please try again.");
+            case 4:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 3]]);
+      }));
+      return function initPayment() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initPayment();
+  }, [isStart]);
+  var handleSubmit = /*#__PURE__*/function () {
+    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) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            if (formRef.current) {
+              _context2.n = 2;
+              break;
+            }
+            return _context2.a(2);
+          case 2:
+            if (!(!shift4Ref.current || !componentsRef.current)) {
+              _context2.n = 3;
+              break;
+            }
+            errorPage("Payment form is not ready yet. Please try again.");
+            return _context2.a(2);
+          case 3:
+            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)) {
+              errorPage("Card tokenization failed. Please check your details and try again.");
+            }
+            request = {
+              amount: amount,
+              currency: currency,
+              card: token.id,
+              description: description
+            };
+            _context2.n = 6;
+            return shift4Ref.current.verifyThreeDSecure(request);
+          case 6:
+            threeDSecureToken = _context2.v;
+            if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
+              errorPage("3D Secure verification failed. Please try again.");
+            }
+            apiBase = baseUrl + "charge/" + userId;
+            _context2.n = 7;
+            return fetch("".concat(apiBase), {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              body: JSON.stringify({
+                tokenId: threeDSecureToken.id,
+                amount: request.amount,
+                currency: request.currency,
+                description: description
+              })
+            });
+          case 7:
+            response = _context2.v;
+            _context2.n = 8;
+            return response.json();
+          case 8:
+            result = _context2.v;
+            if (response.ok) {
+              _context2.n = 9;
+              break;
+            }
+            if (typeof errorPage === "function") errorPage(result);
+            return _context2.a(2);
+          case 9:
+            if (typeof successPage === "function") successPage(result.message);
+            _context2.n = 11;
+            break;
+          case 10:
+            _context2.p = 10;
+            _t2 = _context2.v;
+            if (typeof errorPage === "function") errorPage(_t2.message);
+          case 11:
+            _context2.p = 11;
+            setIsSubmitting(false);
+            setIsStart(!isStart);
+            return _context2.f(11);
+          case 12:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[4, 10, 11, 12]]);
+    }));
+    return function handleSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      width: "100%",
+      boxSizing: "border-box"
+    }
+  }, /*#__PURE__*/React.createElement("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"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555"
+    }
+  }, "Card number"), /*#__PURE__*/React.createElement("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)"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "10px",
+      marginTop: "5px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555",
+      marginBottom: 2
+    }
+  }, "Expiration"), /*#__PURE__*/React.createElement("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)"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555",
+      marginBottom: 2
+    }
+  }, "CVC"), /*#__PURE__*/React.createElement("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)"
+    }
+  }))), /*#__PURE__*/React.createElement("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")));
+}
+
+exports.PaymentForm = PaymentForm;

package/dist/index.esm.js

@@ -0,0 +1,459 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function PaymentForm(_ref) {
+  var amount = _ref.amount,
+    currency = _ref.currency,
+    color = _ref.color,
+    _ref$formwidth = _ref.formwidth,
+    formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
+    _ref$formborderRadius = _ref.formborderRadius,
+    formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
+    _ref$formbackgroundCo = _ref.formbackgroundColor,
+    formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
+    _ref$inputpadding = _ref.inputpadding,
+    inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
+    baseUrl = _ref.baseUrl,
+    userId = _ref.userId,
+    successPage = _ref.successPage,
+    errorPage = _ref.errorPage,
+    description = _ref.description;
+  var formRef = useRef();
+  var initializedRef = useRef(false);
+  var shift4Ref = useRef(null);
+  var componentsRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitting = _useState2[0],
+    setIsSubmitting = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isStart = _useState4[0],
+    setIsStart = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isReady = _useState6[0],
+    setIsReady = _useState6[1];
+  useEffect(function () {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    var initPayment = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var response, _yield$response$json, publicKeys, isProd, 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) errorPage("Failed to fetch public key");
+              _context.n = 2;
+              return response.json();
+            case 2:
+              _yield$response$json = _context.v;
+              publicKeys = _yield$response$json.publicKeys;
+              isProd = _yield$response$json.isProd;
+              if (!publicKeys) errorPage("Public key is empty");
+              script = document.createElement("script");
+              script.src = isProd ? "https://js.shift4.com/shift4.js" : "https://js.dev.shift4.com/shift4.js";
+              script.async = true;
+              script.onload = function () {
+                if (!window.Shift4) return;
+                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 = 4;
+              break;
+            case 3:
+              _context.p = 3;
+              _t = _context.v;
+              console.error(_t);
+              setError("Payment initialization failed. Please try again.");
+            case 4:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 3]]);
+      }));
+      return function initPayment() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initPayment();
+  }, [isStart]);
+  var handleSubmit = /*#__PURE__*/function () {
+    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) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            if (formRef.current) {
+              _context2.n = 2;
+              break;
+            }
+            return _context2.a(2);
+          case 2:
+            if (!(!shift4Ref.current || !componentsRef.current)) {
+              _context2.n = 3;
+              break;
+            }
+            errorPage("Payment form is not ready yet. Please try again.");
+            return _context2.a(2);
+          case 3:
+            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)) {
+              errorPage("Card tokenization failed. Please check your details and try again.");
+            }
+            request = {
+              amount: amount,
+              currency: currency,
+              card: token.id,
+              description: description
+            };
+            _context2.n = 6;
+            return shift4Ref.current.verifyThreeDSecure(request);
+          case 6:
+            threeDSecureToken = _context2.v;
+            if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
+              errorPage("3D Secure verification failed. Please try again.");
+            }
+            apiBase = baseUrl + "charge/" + userId;
+            _context2.n = 7;
+            return fetch("".concat(apiBase), {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              body: JSON.stringify({
+                tokenId: threeDSecureToken.id,
+                amount: request.amount,
+                currency: request.currency,
+                description: description
+              })
+            });
+          case 7:
+            response = _context2.v;
+            _context2.n = 8;
+            return response.json();
+          case 8:
+            result = _context2.v;
+            if (response.ok) {
+              _context2.n = 9;
+              break;
+            }
+            if (typeof errorPage === "function") errorPage(result);
+            return _context2.a(2);
+          case 9:
+            if (typeof successPage === "function") successPage(result.message);
+            _context2.n = 11;
+            break;
+          case 10:
+            _context2.p = 10;
+            _t2 = _context2.v;
+            if (typeof errorPage === "function") errorPage(_t2.message);
+          case 11:
+            _context2.p = 11;
+            setIsSubmitting(false);
+            setIsStart(!isStart);
+            return _context2.f(11);
+          case 12:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[4, 10, 11, 12]]);
+    }));
+    return function handleSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      width: "100%",
+      boxSizing: "border-box"
+    }
+  }, /*#__PURE__*/React.createElement("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"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555"
+    }
+  }, "Card number"), /*#__PURE__*/React.createElement("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)"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "10px",
+      marginTop: "5px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555",
+      marginBottom: 2
+    }
+  }, "Expiration"), /*#__PURE__*/React.createElement("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)"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: "500",
+      color: "#555",
+      marginBottom: 2
+    }
+  }, "CVC"), /*#__PURE__*/React.createElement("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)"
+    }
+  }))), /*#__PURE__*/React.createElement("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")));
+}
+
+export { PaymentForm };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "shift-payment-form",
+  "version": "1.0.0",
+  "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": [
+    "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",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.55.1"
+  }
+
+}