@depay/widgets 6.7.0 → 6.9.1

package/README.md

@@ -204,6 +204,25 @@ BODY:
   }
 ```
 
+Alternatively you can pass a method to track that performs the tracking request to your backend if you need to handle the request yourself (e.g. to add additional headers etc.):
+
+```javascript
+DePayWidgets.Payment({
+
+  track: {
+    method: (payment)=>{
+      return fetch('/track/payments', {
+        method: 'POST',
+        body: JSON.stringify(payment),
+        headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document.querySelector('[name=csrf-token]').content }
+      })
+    }
+  }
+})
+```
+
+In case you pass a tracking method it needs to return a promise.
+
 Your endpoint needs to make sure to forward this to the [payment tracking api](https://depay.fi/documentation/api#payments).
 
 Also make sure to add `token`, `amount` and `confirmations` when forwarding the request to the payments api.
@@ -215,6 +234,22 @@ Payment tracking requests will be attempted up to 3 times by the widget and will
 
 A failed payment tracking will also call the [error callback](#error) with `{code: "TRACKING_FAILED"}`.
 
+##### Additional Polling
+
+In order to ensure a 100% coverage that users are released and forwarded within your payment flow, you will need to implement polling in addition to tracking.
+
+The `track.poll` configuration either takes an `enpoint` or a `method` (similiar to track itself).
+
+It will use the endpoint or the method to request a release every 5 seconds.
+
+You need to make sure to respond to this request with a status `404` in case the user is not to be released just yet (payment and processing on your side are not complete yet)
+or `200` if the payment has been completed and the processing on your side is done and the user can be released and forwarded withing your payment flow.
+
+In case you want to redirect the user to the next step in your system the poll endpoint needs to respond with a body containing json like: `{ forward_to: 'https://example.com/next_step_url' }`.
+
+It is not enough to rely on setting `forward_to` initially with the tracking request, you will also need to respond with `forward_to` when implementing polling
+as the entire reason for polling is to cover cases where websockets fail and the initial `forward_to` can not be communicated to the client.
+
 #### connected
 
 `connected`

package/dist/esm/index.bundle.js

@@ -62415,7 +62415,7 @@ var PaymentProvider = (function (props) {
       wallet = _useContext7.wallet;
 
   var _useContext8 = react.useContext(TrackingContext),
-      forward = _useContext8.forward,
+      release = _useContext8.release,
       tracking = _useContext8.tracking,
       initializeTracking = _useContext8.initializeTracking;
 
@@ -62535,10 +62535,10 @@ var PaymentProvider = (function (props) {
   };
 
   react.useEffect(function () {
-    if (forward) {
+    if (release) {
       setPaymentState('confirmed');
     }
-  }, [forward]);
+  }, [release]);
   react.useEffect(function () {
     if (selectedRoute) {
       var fromToken = selectedRoute.fromToken;
@@ -69761,7 +69761,7 @@ var Footer = (function () {
 
   var _useContext3 = react.useContext(TrackingContext),
       tracking = _useContext3.tracking,
-      forward = _useContext3.forward,
+      release = _useContext3.release,
       forwardTo = _useContext3.forwardTo,
       trackingFailed = _useContext3.trackingFailed;
 
@@ -69787,7 +69787,7 @@ var Footer = (function () {
       return null;
     }
 
-    if (forward) {
+    if (release) {
       return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/react.createElement("div", {
@@ -69933,7 +69933,7 @@ var Footer = (function () {
       }, /*#__PURE__*/react.createElement(LoadingText, null, "Paying"));
     } else if (paymentState == 'confirmed') {
       if (tracking == true) {
-        if (forward) {
+        if (release) {
           if (forwardTo) {
             return /*#__PURE__*/react.createElement("a", {
               className: "ButtonPrimary",
@@ -70167,33 +70167,47 @@ var TrackingProvider = (function (props) {
   var _useContext2 = react.useContext(ConfigurationContext),
       track = _useContext2.track;
 
-  var _useState = react.useState(track && !!track.endpoint),
+  var _useState = react.useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0],
-      setTracking = _useState2[1];
+      transaction = _useState2[0],
+      setTransaction = _useState2[1];
 
-  var _useState3 = react.useState(false),
+  var _useState3 = react.useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      forward = _useState4[0],
-      setForward = _useState4[1];
+      afterBlock = _useState4[0],
+      setAfterBlock = _useState4[1];
 
-  var _useState5 = react.useState(false),
+  var _useState5 = react.useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      trackingFailed = _useState6[0],
-      setTrackingFailed = _useState6[1];
+      paymentRoute = _useState6[0],
+      setPaymentRoute = _useState6[1];
 
-  var _useState7 = react.useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      forwardTo = _useState8[0],
-      setForwardTo = _useState8[1];
+  var _useState7 = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+      _useState8 = _slicedToArray(_useState7, 1),
+      tracking = _useState8[0];
+
+  var _useState9 = react.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+      _useState10 = _slicedToArray(_useState9, 1),
+      polling = _useState10[0];
+
+  var _useState11 = react.useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      release = _useState12[0],
+      setRelease = _useState12[1];
+
+  var _useState13 = react.useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      trackingFailed = _useState14[0],
+      setTrackingFailed = _useState14[1];
+
+  var _useState15 = react.useState(),
+      _useState16 = _slicedToArray(_useState15, 2),
+      forwardTo = _useState16[0],
+      setForwardTo = _useState16[1];
 
   var _useContext3 = react.useContext(ClosableContext),
       setClosable = _useContext3.setClosable;
 
-  react.useEffect(function () {
-    setTracking(track && !!track.endpoint);
-  }, [track]);
-
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.fi/cable');
 
@@ -70219,10 +70233,10 @@ var TrackingProvider = (function (props) {
         return;
       }
 
-      if (item.message && item.message.forward) {
+      if (item.message && item.message.release) {
         setClosable(!item.message.forward_to);
         setForwardTo(item.message.forward_to);
-        setForward(item.message.forward);
+        setRelease(item.message.release);
         socket.close();
 
         if (!!item.message.forward_to) {
@@ -70258,17 +70272,27 @@ var TrackingProvider = (function (props) {
     }
   };
 
+  var callTracking = function callTracking(payment) {
+    if (track.endpoint) {
+      return fetch(track.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      });
+    } else if (track.method) {
+      return track.method(payment);
+    } else {
+      throw 'No tracking defined!';
+    }
+  };
+
   var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
-    fetch(track.endpoint, {
-      method: 'POST',
-      body: JSON.stringify({
-        blockchain: transaction.blockchain,
-        transaction: transaction.id.toLowerCase(),
-        sender: transaction.from.toLowerCase(),
-        nonce: transaction.nonce,
-        after_block: afterBlock,
-        to_token: paymentRoute.toToken.address
-      })
+    callTracking({
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
     }).then(function (response) {
       if (response.status == 200) {
         console.log('TRACKING INITIALIZED');
@@ -70281,7 +70305,59 @@ var TrackingProvider = (function (props) {
     });
   };
 
+  var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+    if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+      return;
+    }
+
+    var payment = {
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
+    };
+
+    var handleResponse = function handleResponse(response) {
+      if (response.status == 200) {
+        response.json().then(function (data) {
+          if (data && data.forward_to) {
+            setForwardTo(data.forward_to);
+          }
+        });
+        clearInterval(pollingInterval);
+        setRelease(true);
+      }
+    };
+
+    if (track.poll.endpoint) {
+      fetch(track.poll.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      }).then(handleResponse);
+    } else if (track.poll.method) {
+      track.poll.method(payment).then(handleResponse);
+    }
+  };
+
+  react.useEffect(function () {
+    if (!polling) {
+      return;
+    }
+
+    var pollingInterval = setInterval(function () {
+      return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+    }, 5000);
+    return function () {
+      clearInterval(pollingInterval);
+    };
+  }, [polling, transaction, afterBlock, paymentRoute]);
+
   var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+    setTransaction(transaction);
+    setAfterBlock(afterBlock);
+    setPaymentRoute(paymentRoute);
     openSocket(transaction);
     startTracking(transaction, afterBlock, paymentRoute);
   };
@@ -70290,7 +70366,7 @@ var TrackingProvider = (function (props) {
     value: {
       tracking: tracking,
       initializeTracking: initializeTracking,
-      forward: forward,
+      release: release,
       forwardTo: forwardTo,
       trackingFailed: trackingFailed
     }

package/dist/esm/index.js

@@ -2262,7 +2262,7 @@ var PaymentProvider = (function (props) {
       wallet = _useContext7.wallet;
 
   var _useContext8 = useContext(TrackingContext),
-      forward = _useContext8.forward,
+      release = _useContext8.release,
       tracking = _useContext8.tracking,
       initializeTracking = _useContext8.initializeTracking;
 
@@ -2382,10 +2382,10 @@ var PaymentProvider = (function (props) {
   };
 
   useEffect(function () {
-    if (forward) {
+    if (release) {
       setPaymentState('confirmed');
     }
-  }, [forward]);
+  }, [release]);
   useEffect(function () {
     if (selectedRoute) {
       var fromToken = selectedRoute.fromToken;
@@ -3138,7 +3138,7 @@ var Footer = (function () {
 
   var _useContext3 = useContext(TrackingContext),
       tracking = _useContext3.tracking,
-      forward = _useContext3.forward,
+      release = _useContext3.release,
       forwardTo = _useContext3.forwardTo,
       trackingFailed = _useContext3.trackingFailed;
 
@@ -3164,7 +3164,7 @@ var Footer = (function () {
       return null;
     }
 
-    if (forward) {
+    if (release) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/React.createElement("div", {
@@ -3310,7 +3310,7 @@ var Footer = (function () {
       }, /*#__PURE__*/React.createElement(LoadingText, null, "Paying"));
     } else if (paymentState == 'confirmed') {
       if (tracking == true) {
-        if (forward) {
+        if (release) {
           if (forwardTo) {
             return /*#__PURE__*/React.createElement("a", {
               className: "ButtonPrimary",
@@ -3544,33 +3544,47 @@ var TrackingProvider = (function (props) {
   var _useContext2 = useContext(ConfigurationContext),
       track = _useContext2.track;
 
-  var _useState = useState(track && !!track.endpoint),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0],
-      setTracking = _useState2[1];
+      transaction = _useState2[0],
+      setTransaction = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      forward = _useState4[0],
-      setForward = _useState4[1];
+      afterBlock = _useState4[0],
+      setAfterBlock = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      trackingFailed = _useState6[0],
-      setTrackingFailed = _useState6[1];
+      paymentRoute = _useState6[0],
+      setPaymentRoute = _useState6[1];
 
-  var _useState7 = useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      forwardTo = _useState8[0],
-      setForwardTo = _useState8[1];
+  var _useState7 = useState(track && !!(track.endpoint || typeof track.method == 'function')),
+      _useState8 = _slicedToArray(_useState7, 1),
+      tracking = _useState8[0];
+
+  var _useState9 = useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+      _useState10 = _slicedToArray(_useState9, 1),
+      polling = _useState10[0];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      release = _useState12[0],
+      setRelease = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      trackingFailed = _useState14[0],
+      setTrackingFailed = _useState14[1];
+
+  var _useState15 = useState(),
+      _useState16 = _slicedToArray(_useState15, 2),
+      forwardTo = _useState16[0],
+      setForwardTo = _useState16[1];
 
   var _useContext3 = useContext(ClosableContext),
       setClosable = _useContext3.setClosable;
 
-  useEffect(function () {
-    setTracking(track && !!track.endpoint);
-  }, [track]);
-
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.fi/cable');
 
@@ -3596,10 +3610,10 @@ var TrackingProvider = (function (props) {
         return;
       }
 
-      if (item.message && item.message.forward) {
+      if (item.message && item.message.release) {
         setClosable(!item.message.forward_to);
         setForwardTo(item.message.forward_to);
-        setForward(item.message.forward);
+        setRelease(item.message.release);
         socket.close();
 
         if (!!item.message.forward_to) {
@@ -3635,17 +3649,27 @@ var TrackingProvider = (function (props) {
     }
   };
 
+  var callTracking = function callTracking(payment) {
+    if (track.endpoint) {
+      return fetch(track.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      });
+    } else if (track.method) {
+      return track.method(payment);
+    } else {
+      throw 'No tracking defined!';
+    }
+  };
+
   var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
-    fetch(track.endpoint, {
-      method: 'POST',
-      body: JSON.stringify({
-        blockchain: transaction.blockchain,
-        transaction: transaction.id.toLowerCase(),
-        sender: transaction.from.toLowerCase(),
-        nonce: transaction.nonce,
-        after_block: afterBlock,
-        to_token: paymentRoute.toToken.address
-      })
+    callTracking({
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
     }).then(function (response) {
       if (response.status == 200) {
         console.log('TRACKING INITIALIZED');
@@ -3658,7 +3682,59 @@ var TrackingProvider = (function (props) {
     });
   };
 
+  var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+    if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+      return;
+    }
+
+    var payment = {
+      blockchain: transaction.blockchain,
+      transaction: transaction.id.toLowerCase(),
+      sender: transaction.from.toLowerCase(),
+      nonce: transaction.nonce,
+      after_block: afterBlock,
+      to_token: paymentRoute.toToken.address
+    };
+
+    var handleResponse = function handleResponse(response) {
+      if (response.status == 200) {
+        response.json().then(function (data) {
+          if (data && data.forward_to) {
+            setForwardTo(data.forward_to);
+          }
+        });
+        clearInterval(pollingInterval);
+        setRelease(true);
+      }
+    };
+
+    if (track.poll.endpoint) {
+      fetch(track.poll.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(payment)
+      }).then(handleResponse);
+    } else if (track.poll.method) {
+      track.poll.method(payment).then(handleResponse);
+    }
+  };
+
+  useEffect(function () {
+    if (!polling) {
+      return;
+    }
+
+    var pollingInterval = setInterval(function () {
+      return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+    }, 5000);
+    return function () {
+      clearInterval(pollingInterval);
+    };
+  }, [polling, transaction, afterBlock, paymentRoute]);
+
   var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+    setTransaction(transaction);
+    setAfterBlock(afterBlock);
+    setPaymentRoute(paymentRoute);
     openSocket(transaction);
     startTracking(transaction, afterBlock, paymentRoute);
   };
@@ -3667,7 +3743,7 @@ var TrackingProvider = (function (props) {
     value: {
       tracking: tracking,
       initializeTracking: initializeTracking,
-      forward: forward,
+      release: release,
       forwardTo: forwardTo,
       trackingFailed: trackingFailed
     }

package/dist/umd/index.bundle.js

@@ -62421,7 +62421,7 @@
         wallet = _useContext7.wallet;
 
     var _useContext8 = react.useContext(TrackingContext),
-        forward = _useContext8.forward,
+        release = _useContext8.release,
         tracking = _useContext8.tracking,
         initializeTracking = _useContext8.initializeTracking;
 
@@ -62541,10 +62541,10 @@
     };
 
     react.useEffect(function () {
-      if (forward) {
+      if (release) {
         setPaymentState('confirmed');
       }
-    }, [forward]);
+    }, [release]);
     react.useEffect(function () {
       if (selectedRoute) {
         var fromToken = selectedRoute.fromToken;
@@ -69767,7 +69767,7 @@
 
     var _useContext3 = react.useContext(TrackingContext),
         tracking = _useContext3.tracking,
-        forward = _useContext3.forward,
+        release = _useContext3.release,
         forwardTo = _useContext3.forwardTo,
         trackingFailed = _useContext3.trackingFailed;
 
@@ -69793,7 +69793,7 @@
         return null;
       }
 
-      if (forward) {
+      if (release) {
         return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
           className: "Card transparent small disabled"
         }, /*#__PURE__*/react.createElement("div", {
@@ -69939,7 +69939,7 @@
         }, /*#__PURE__*/react.createElement(LoadingText, null, "Paying"));
       } else if (paymentState == 'confirmed') {
         if (tracking == true) {
-          if (forward) {
+          if (release) {
             if (forwardTo) {
               return /*#__PURE__*/react.createElement("a", {
                 className: "ButtonPrimary",
@@ -70173,33 +70173,47 @@
     var _useContext2 = react.useContext(ConfigurationContext),
         track = _useContext2.track;
 
-    var _useState = react.useState(track && !!track.endpoint),
+    var _useState = react.useState(),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0],
-        setTracking = _useState2[1];
+        transaction = _useState2[0],
+        setTransaction = _useState2[1];
 
-    var _useState3 = react.useState(false),
+    var _useState3 = react.useState(),
         _useState4 = _slicedToArray(_useState3, 2),
-        forward = _useState4[0],
-        setForward = _useState4[1];
+        afterBlock = _useState4[0],
+        setAfterBlock = _useState4[1];
 
-    var _useState5 = react.useState(false),
+    var _useState5 = react.useState(),
         _useState6 = _slicedToArray(_useState5, 2),
-        trackingFailed = _useState6[0],
-        setTrackingFailed = _useState6[1];
+        paymentRoute = _useState6[0],
+        setPaymentRoute = _useState6[1];
 
-    var _useState7 = react.useState(),
-        _useState8 = _slicedToArray(_useState7, 2),
-        forwardTo = _useState8[0],
-        setForwardTo = _useState8[1];
+    var _useState7 = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+        _useState8 = _slicedToArray(_useState7, 1),
+        tracking = _useState8[0];
+
+    var _useState9 = react.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+        _useState10 = _slicedToArray(_useState9, 1),
+        polling = _useState10[0];
+
+    var _useState11 = react.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        release = _useState12[0],
+        setRelease = _useState12[1];
+
+    var _useState13 = react.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        trackingFailed = _useState14[0],
+        setTrackingFailed = _useState14[1];
+
+    var _useState15 = react.useState(),
+        _useState16 = _slicedToArray(_useState15, 2),
+        forwardTo = _useState16[0],
+        setForwardTo = _useState16[1];
 
     var _useContext3 = react.useContext(ClosableContext),
         setClosable = _useContext3.setClosable;
 
-    react.useEffect(function () {
-      setTracking(track && !!track.endpoint);
-    }, [track]);
-
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.fi/cable');
 
@@ -70225,10 +70239,10 @@
           return;
         }
 
-        if (item.message && item.message.forward) {
+        if (item.message && item.message.release) {
           setClosable(!item.message.forward_to);
           setForwardTo(item.message.forward_to);
-          setForward(item.message.forward);
+          setRelease(item.message.release);
           socket.close();
 
           if (!!item.message.forward_to) {
@@ -70264,17 +70278,27 @@
       }
     };
 
+    var callTracking = function callTracking(payment) {
+      if (track.endpoint) {
+        return fetch(track.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        });
+      } else if (track.method) {
+        return track.method(payment);
+      } else {
+        throw 'No tracking defined!';
+      }
+    };
+
     var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
-      fetch(track.endpoint, {
-        method: 'POST',
-        body: JSON.stringify({
-          blockchain: transaction.blockchain,
-          transaction: transaction.id.toLowerCase(),
-          sender: transaction.from.toLowerCase(),
-          nonce: transaction.nonce,
-          after_block: afterBlock,
-          to_token: paymentRoute.toToken.address
-        })
+      callTracking({
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
       }).then(function (response) {
         if (response.status == 200) {
           console.log('TRACKING INITIALIZED');
@@ -70287,7 +70311,59 @@
       });
     };
 
+    var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+      if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+        return;
+      }
+
+      var payment = {
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
+      };
+
+      var handleResponse = function handleResponse(response) {
+        if (response.status == 200) {
+          response.json().then(function (data) {
+            if (data && data.forward_to) {
+              setForwardTo(data.forward_to);
+            }
+          });
+          clearInterval(pollingInterval);
+          setRelease(true);
+        }
+      };
+
+      if (track.poll.endpoint) {
+        fetch(track.poll.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        }).then(handleResponse);
+      } else if (track.poll.method) {
+        track.poll.method(payment).then(handleResponse);
+      }
+    };
+
+    react.useEffect(function () {
+      if (!polling) {
+        return;
+      }
+
+      var pollingInterval = setInterval(function () {
+        return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+      }, 5000);
+      return function () {
+        clearInterval(pollingInterval);
+      };
+    }, [polling, transaction, afterBlock, paymentRoute]);
+
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+      setTransaction(transaction);
+      setAfterBlock(afterBlock);
+      setPaymentRoute(paymentRoute);
       openSocket(transaction);
       startTracking(transaction, afterBlock, paymentRoute);
     };
@@ -70296,7 +70372,7 @@
       value: {
         tracking: tracking,
         initializeTracking: initializeTracking,
-        forward: forward,
+        release: release,
         forwardTo: forwardTo,
         trackingFailed: trackingFailed
       }

package/dist/umd/index.js

@@ -2257,7 +2257,7 @@
         wallet = _useContext7.wallet;
 
     var _useContext8 = React.useContext(TrackingContext),
-        forward = _useContext8.forward,
+        release = _useContext8.release,
         tracking = _useContext8.tracking,
         initializeTracking = _useContext8.initializeTracking;
 
@@ -2377,10 +2377,10 @@
     };
 
     React.useEffect(function () {
-      if (forward) {
+      if (release) {
         setPaymentState('confirmed');
       }
-    }, [forward]);
+    }, [release]);
     React.useEffect(function () {
       if (selectedRoute) {
         var fromToken = selectedRoute.fromToken;
@@ -3133,7 +3133,7 @@
 
     var _useContext3 = React.useContext(TrackingContext),
         tracking = _useContext3.tracking,
-        forward = _useContext3.forward,
+        release = _useContext3.release,
         forwardTo = _useContext3.forwardTo,
         trackingFailed = _useContext3.trackingFailed;
 
@@ -3159,7 +3159,7 @@
         return null;
       }
 
-      if (forward) {
+      if (release) {
         return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "Card transparent small disabled"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3305,7 +3305,7 @@
         }, /*#__PURE__*/React__default["default"].createElement(LoadingText, null, "Paying"));
       } else if (paymentState == 'confirmed') {
         if (tracking == true) {
-          if (forward) {
+          if (release) {
             if (forwardTo) {
               return /*#__PURE__*/React__default["default"].createElement("a", {
                 className: "ButtonPrimary",
@@ -3539,33 +3539,47 @@
     var _useContext2 = React.useContext(ConfigurationContext),
         track = _useContext2.track;
 
-    var _useState = React.useState(track && !!track.endpoint),
+    var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0],
-        setTracking = _useState2[1];
+        transaction = _useState2[0],
+        setTransaction = _useState2[1];
 
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState(),
         _useState4 = _slicedToArray(_useState3, 2),
-        forward = _useState4[0],
-        setForward = _useState4[1];
+        afterBlock = _useState4[0],
+        setAfterBlock = _useState4[1];
 
-    var _useState5 = React.useState(false),
+    var _useState5 = React.useState(),
         _useState6 = _slicedToArray(_useState5, 2),
-        trackingFailed = _useState6[0],
-        setTrackingFailed = _useState6[1];
+        paymentRoute = _useState6[0],
+        setPaymentRoute = _useState6[1];
 
-    var _useState7 = React.useState(),
-        _useState8 = _slicedToArray(_useState7, 2),
-        forwardTo = _useState8[0],
-        setForwardTo = _useState8[1];
+    var _useState7 = React.useState(track && !!(track.endpoint || typeof track.method == 'function')),
+        _useState8 = _slicedToArray(_useState7, 1),
+        tracking = _useState8[0];
+
+    var _useState9 = React.useState(track && track.poll && !!(track.poll.endpoint || typeof track.poll.method == 'function')),
+        _useState10 = _slicedToArray(_useState9, 1),
+        polling = _useState10[0];
+
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        release = _useState12[0],
+        setRelease = _useState12[1];
+
+    var _useState13 = React.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        trackingFailed = _useState14[0],
+        setTrackingFailed = _useState14[1];
+
+    var _useState15 = React.useState(),
+        _useState16 = _slicedToArray(_useState15, 2),
+        forwardTo = _useState16[0],
+        setForwardTo = _useState16[1];
 
     var _useContext3 = React.useContext(ClosableContext),
         setClosable = _useContext3.setClosable;
 
-    React.useEffect(function () {
-      setTracking(track && !!track.endpoint);
-    }, [track]);
-
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.fi/cable');
 
@@ -3591,10 +3605,10 @@
           return;
         }
 
-        if (item.message && item.message.forward) {
+        if (item.message && item.message.release) {
           setClosable(!item.message.forward_to);
           setForwardTo(item.message.forward_to);
-          setForward(item.message.forward);
+          setRelease(item.message.release);
           socket.close();
 
           if (!!item.message.forward_to) {
@@ -3630,17 +3644,27 @@
       }
     };
 
+    var callTracking = function callTracking(payment) {
+      if (track.endpoint) {
+        return fetch(track.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        });
+      } else if (track.method) {
+        return track.method(payment);
+      } else {
+        throw 'No tracking defined!';
+      }
+    };
+
     var startTracking = function startTracking(transaction, afterBlock, paymentRoute, attempt) {
-      fetch(track.endpoint, {
-        method: 'POST',
-        body: JSON.stringify({
-          blockchain: transaction.blockchain,
-          transaction: transaction.id.toLowerCase(),
-          sender: transaction.from.toLowerCase(),
-          nonce: transaction.nonce,
-          after_block: afterBlock,
-          to_token: paymentRoute.toToken.address
-        })
+      callTracking({
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
       }).then(function (response) {
         if (response.status == 200) {
           console.log('TRACKING INITIALIZED');
@@ -3653,7 +3677,59 @@
       });
     };
 
+    var pollStatus = function pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval) {
+      if (!polling || transaction == undefined || afterBlock == undefined || paymentRoute == undefined) {
+        return;
+      }
+
+      var payment = {
+        blockchain: transaction.blockchain,
+        transaction: transaction.id.toLowerCase(),
+        sender: transaction.from.toLowerCase(),
+        nonce: transaction.nonce,
+        after_block: afterBlock,
+        to_token: paymentRoute.toToken.address
+      };
+
+      var handleResponse = function handleResponse(response) {
+        if (response.status == 200) {
+          response.json().then(function (data) {
+            if (data && data.forward_to) {
+              setForwardTo(data.forward_to);
+            }
+          });
+          clearInterval(pollingInterval);
+          setRelease(true);
+        }
+      };
+
+      if (track.poll.endpoint) {
+        fetch(track.poll.endpoint, {
+          method: 'POST',
+          body: JSON.stringify(payment)
+        }).then(handleResponse);
+      } else if (track.poll.method) {
+        track.poll.method(payment).then(handleResponse);
+      }
+    };
+
+    React.useEffect(function () {
+      if (!polling) {
+        return;
+      }
+
+      var pollingInterval = setInterval(function () {
+        return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
+      }, 5000);
+      return function () {
+        clearInterval(pollingInterval);
+      };
+    }, [polling, transaction, afterBlock, paymentRoute]);
+
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
+      setTransaction(transaction);
+      setAfterBlock(afterBlock);
+      setPaymentRoute(paymentRoute);
       openSocket(transaction);
       startTracking(transaction, afterBlock, paymentRoute);
     };
@@ -3662,7 +3738,7 @@
       value: {
         tracking: tracking,
         initializeTracking: initializeTracking,
-        forward: forward,
+        release: release,
         forwardTo: forwardTo,
         trackingFailed: trackingFailed
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.7.0",
+  "version": "6.9.1",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",