shift-payment-form 1.0.0 → 1.0.1

package/dist/index.cjs.js

@@ -194,7 +194,7 @@ function PaymentForm(_ref) {
     _ref$inputpadding = _ref.inputpadding,
     inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
     baseUrl = _ref.baseUrl,
-    userId = _ref.userId,
+    subscriptionId = _ref.subscriptionId,
     successPage = _ref.successPage,
     errorPage = _ref.errorPage,
     description = _ref.description;
@@ -208,115 +208,148 @@ function PaymentForm(_ref) {
     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];
+    isReady = _useState4[0],
+    setIsReady = _useState4[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) {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var response, _yield$response$json, publicKeys, isProd, script, _t2;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
             case 0:
-              _context.p = 0;
-              _context.n = 1;
-              return fetch(baseUrl + userId);
+              _context2.p = 0;
+              _context2.n = 1;
+              return fetch(baseUrl + "/api/Subscription/public/" + subscriptionId);
             case 1:
-              response = _context.v;
+              response = _context2.v;
               if (!response.ok) errorPage("Failed to fetch public key");
-              _context.n = 2;
+              _context2.n = 2;
               return response.json();
             case 2:
-              _yield$response$json = _context.v;
+              _yield$response$json = _context2.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.onload = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+                var _token, paymentData, _t;
+                return _regenerator().w(function (_context) {
+                  while (1) switch (_context.p = _context.n) {
+                    case 0:
+                      if (window.Shift4) {
+                        _context.n = 1;
+                        break;
+                      }
+                      return _context.a(2);
+                    case 1:
+                      shift4Ref.current = window.Shift4(publicKeys);
+                      componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
+                      _context.p = 2;
+                      _context.n = 3;
+                      return shift4Ref.current.createToken(componentsRef.current);
+                    case 3:
+                      _token = _context.v;
+                      if (!(_token !== null && _token !== void 0 && _token.id)) {
+                        errorPage("Card tokenization failed. Please check your details and try again.");
+                      }
+                      paymentData = {
+                        currency: currency,
+                        amount: amount,
+                        cardId: _token === null || _token === void 0 ? void 0 : _token.id,
+                        description: description
+                      };
+                      _context.n = 4;
+                      return fetch(baseUrl + "/api/Payment/" + subscriptionId, {
+                        method: "POST",
+                        headers: {
+                          "Content-Type": "application/json",
+                          "Accept": "*/*"
+                        },
+                        body: JSON.stringify(paymentData)
+                      });
+                    case 4:
+                      _context.n = 6;
+                      break;
+                    case 5:
+                      _context.p = 5;
+                      _t = _context.v;
+                      console.error("Payment init request failed:", _t);
+                    case 6:
+                      setIsReady(true);
+                    case 7:
+                      return _context.a(2);
+                  }
+                }, _callee, null, [[2, 5]]);
+              }));
               script.onerror = function () {
                 setError("Payment provider script failed to load.");
               };
               document.body.appendChild(script);
-              _context.n = 4;
+              _context2.n = 4;
               break;
             case 3:
-              _context.p = 3;
-              _t = _context.v;
-              console.error(_t);
+              _context2.p = 3;
+              _t2 = _context2.v;
+              console.error(_t2);
               setError("Payment initialization failed. Please try again.");
             case 4:
-              return _context.a(2);
+              return _context2.a(2);
           }
-        }, _callee, null, [[0, 3]]);
+        }, _callee2, 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) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
+      var request, threeDSecureToken, apiBase, response, result, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
             e.preventDefault();
             if (!isSubmitting) {
-              _context2.n = 1;
+              _context3.n = 1;
               break;
             }
-            return _context2.a(2);
+            return _context3.a(2);
           case 1:
             if (formRef.current) {
-              _context2.n = 2;
+              _context3.n = 2;
               break;
             }
-            return _context2.a(2);
+            return _context3.a(2);
           case 2:
             if (!(!shift4Ref.current || !componentsRef.current)) {
-              _context2.n = 3;
+              _context3.n = 3;
               break;
             }
             errorPage("Payment form is not ready yet. Please try again.");
-            return _context2.a(2);
+            return _context3.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.");
-            }
+            _context3.p = 4;
             request = {
               amount: amount,
               currency: currency,
               card: token.id,
               description: description
             };
-            _context2.n = 6;
+            _context3.n = 5;
             return shift4Ref.current.verifyThreeDSecure(request);
-          case 6:
-            threeDSecureToken = _context2.v;
+          case 5:
+            threeDSecureToken = _context3.v;
             if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
               errorPage("3D Secure verification failed. Please try again.");
             }
-            apiBase = baseUrl + "charge/" + userId;
-            _context2.n = 7;
+            apiBase = baseUrl + "/api/Payment/charge/" + userId;
+            _context3.n = 6;
             return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
@@ -329,38 +362,37 @@ function PaymentForm(_ref) {
                 description: description
               })
             });
-          case 7:
-            response = _context2.v;
-            _context2.n = 8;
+          case 6:
+            response = _context3.v;
+            _context3.n = 7;
             return response.json();
-          case 8:
-            result = _context2.v;
+          case 7:
+            result = _context3.v;
             if (response.ok) {
-              _context2.n = 9;
+              _context3.n = 8;
               break;
             }
             if (typeof errorPage === "function") errorPage(result);
-            return _context2.a(2);
-          case 9:
+            return _context3.a(2);
+          case 8:
             if (typeof successPage === "function") successPage(result.message);
-            _context2.n = 11;
+            _context3.n = 10;
             break;
+          case 9:
+            _context3.p = 9;
+            _t3 = _context3.v;
+            if (typeof errorPage === "function") errorPage(_t3.message);
           case 10:
-            _context2.p = 10;
-            _t2 = _context2.v;
-            if (typeof errorPage === "function") errorPage(_t2.message);
-          case 11:
-            _context2.p = 11;
+            _context3.p = 10;
             setIsSubmitting(false);
-            setIsStart(!isStart);
-            return _context2.f(11);
-          case 12:
-            return _context2.a(2);
+            return _context3.f(10);
+          case 11:
+            return _context3.a(2);
         }
-      }, _callee2, null, [[4, 10, 11, 12]]);
+      }, _callee3, null, [[4, 9, 10, 11]]);
     }));
     return function handleSubmit(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement("div", {

package/dist/index.esm.js

@@ -192,7 +192,7 @@ function PaymentForm(_ref) {
     _ref$inputpadding = _ref.inputpadding,
     inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding,
     baseUrl = _ref.baseUrl,
-    userId = _ref.userId,
+    subscriptionId = _ref.subscriptionId,
     successPage = _ref.successPage,
     errorPage = _ref.errorPage,
     description = _ref.description;
@@ -206,115 +206,148 @@ function PaymentForm(_ref) {
     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];
+    isReady = _useState4[0],
+    setIsReady = _useState4[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) {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var response, _yield$response$json, publicKeys, isProd, script, _t2;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
             case 0:
-              _context.p = 0;
-              _context.n = 1;
-              return fetch(baseUrl + userId);
+              _context2.p = 0;
+              _context2.n = 1;
+              return fetch(baseUrl + "/api/Subscription/public/" + subscriptionId);
             case 1:
-              response = _context.v;
+              response = _context2.v;
               if (!response.ok) errorPage("Failed to fetch public key");
-              _context.n = 2;
+              _context2.n = 2;
               return response.json();
             case 2:
-              _yield$response$json = _context.v;
+              _yield$response$json = _context2.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.onload = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+                var _token, paymentData, _t;
+                return _regenerator().w(function (_context) {
+                  while (1) switch (_context.p = _context.n) {
+                    case 0:
+                      if (window.Shift4) {
+                        _context.n = 1;
+                        break;
+                      }
+                      return _context.a(2);
+                    case 1:
+                      shift4Ref.current = window.Shift4(publicKeys);
+                      componentsRef.current = shift4Ref.current.createComponentGroup().automount("#payment-form");
+                      _context.p = 2;
+                      _context.n = 3;
+                      return shift4Ref.current.createToken(componentsRef.current);
+                    case 3:
+                      _token = _context.v;
+                      if (!(_token !== null && _token !== void 0 && _token.id)) {
+                        errorPage("Card tokenization failed. Please check your details and try again.");
+                      }
+                      paymentData = {
+                        currency: currency,
+                        amount: amount,
+                        cardId: _token === null || _token === void 0 ? void 0 : _token.id,
+                        description: description
+                      };
+                      _context.n = 4;
+                      return fetch(baseUrl + "/api/Payment/" + subscriptionId, {
+                        method: "POST",
+                        headers: {
+                          "Content-Type": "application/json",
+                          "Accept": "*/*"
+                        },
+                        body: JSON.stringify(paymentData)
+                      });
+                    case 4:
+                      _context.n = 6;
+                      break;
+                    case 5:
+                      _context.p = 5;
+                      _t = _context.v;
+                      console.error("Payment init request failed:", _t);
+                    case 6:
+                      setIsReady(true);
+                    case 7:
+                      return _context.a(2);
+                  }
+                }, _callee, null, [[2, 5]]);
+              }));
               script.onerror = function () {
                 setError("Payment provider script failed to load.");
               };
               document.body.appendChild(script);
-              _context.n = 4;
+              _context2.n = 4;
               break;
             case 3:
-              _context.p = 3;
-              _t = _context.v;
-              console.error(_t);
+              _context2.p = 3;
+              _t2 = _context2.v;
+              console.error(_t2);
               setError("Payment initialization failed. Please try again.");
             case 4:
-              return _context.a(2);
+              return _context2.a(2);
           }
-        }, _callee, null, [[0, 3]]);
+        }, _callee2, 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) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
+      var request, threeDSecureToken, apiBase, response, result, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
             e.preventDefault();
             if (!isSubmitting) {
-              _context2.n = 1;
+              _context3.n = 1;
               break;
             }
-            return _context2.a(2);
+            return _context3.a(2);
           case 1:
             if (formRef.current) {
-              _context2.n = 2;
+              _context3.n = 2;
               break;
             }
-            return _context2.a(2);
+            return _context3.a(2);
           case 2:
             if (!(!shift4Ref.current || !componentsRef.current)) {
-              _context2.n = 3;
+              _context3.n = 3;
               break;
             }
             errorPage("Payment form is not ready yet. Please try again.");
-            return _context2.a(2);
+            return _context3.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.");
-            }
+            _context3.p = 4;
             request = {
               amount: amount,
               currency: currency,
               card: token.id,
               description: description
             };
-            _context2.n = 6;
+            _context3.n = 5;
             return shift4Ref.current.verifyThreeDSecure(request);
-          case 6:
-            threeDSecureToken = _context2.v;
+          case 5:
+            threeDSecureToken = _context3.v;
             if (!(threeDSecureToken !== null && threeDSecureToken !== void 0 && threeDSecureToken.id)) {
               errorPage("3D Secure verification failed. Please try again.");
             }
-            apiBase = baseUrl + "charge/" + userId;
-            _context2.n = 7;
+            apiBase = baseUrl + "/api/Payment/charge/" + userId;
+            _context3.n = 6;
             return fetch("".concat(apiBase), {
               method: "POST",
               headers: {
@@ -327,38 +360,37 @@ function PaymentForm(_ref) {
                 description: description
               })
             });
-          case 7:
-            response = _context2.v;
-            _context2.n = 8;
+          case 6:
+            response = _context3.v;
+            _context3.n = 7;
             return response.json();
-          case 8:
-            result = _context2.v;
+          case 7:
+            result = _context3.v;
             if (response.ok) {
-              _context2.n = 9;
+              _context3.n = 8;
               break;
             }
             if (typeof errorPage === "function") errorPage(result);
-            return _context2.a(2);
-          case 9:
+            return _context3.a(2);
+          case 8:
             if (typeof successPage === "function") successPage(result.message);
-            _context2.n = 11;
+            _context3.n = 10;
             break;
+          case 9:
+            _context3.p = 9;
+            _t3 = _context3.v;
+            if (typeof errorPage === "function") errorPage(_t3.message);
           case 10:
-            _context2.p = 10;
-            _t2 = _context2.v;
-            if (typeof errorPage === "function") errorPage(_t2.message);
-          case 11:
-            _context2.p = 11;
+            _context3.p = 10;
             setIsSubmitting(false);
-            setIsStart(!isStart);
-            return _context2.f(11);
-          case 12:
-            return _context2.a(2);
+            return _context3.f(10);
+          case 11:
+            return _context3.a(2);
         }
-      }, _callee2, null, [[4, 10, 11, 12]]);
+      }, _callee3, null, [[4, 9, 10, 11]]);
     }));
     return function handleSubmit(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shift-payment-form",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React component library for integrating Shift4 payments with Logix applications.",
   "author": "Yusif Atababayev",
   "license": "ISC",