@depay/widgets 6.6.0 → 6.9.0

package/README.md

@@ -199,10 +199,30 @@ BODY:
     "transaction": "0x4311a9820195c2a5af99c45c72c88848ed403a4020863c913feed81d15855ae4",
     "sender": "0x769794c94e9f113e357023dab73e81dbd6db201c",
     "nonce": 103,
-    "after_block": 13230369
+    "after_block": 13230369,
+    "to_token": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
   }
 ```
 
+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.
@@ -212,7 +232,25 @@ Make sure you read the [Payment Tracking API](https://depay.fi/documentation/api
 
 Payment tracking requests will be attempted up to 3 times by the widget and will display "Payment tracking failed!" to the user if the widget was not able to start payment tracking via the given endpoint after 3 attempts.
 
-A failed payment tracking will also call the [error callback](#https://github.com/depayfi/widgets#error) with `{code: "TRACKING_FAILED"}`.
+A failed payment tracking will also call the [error callback](#error) with `{code: "TRACKING_FAILED"}`.
+
+##### Additional Polling
+
+In order to ensure a 100% payment tracking coverage, you cant entirely rely on websockets initiated with `track`.
+
+Hence, if you require better payment tracking coverage, you will also need to implement polling.
+
+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 payment status every 5 seconds.
+
+You need to make sure to respond to this request with `404` in case the payment has not been finished yet (as reported from the tracking callback)
+or `200` if the payment has been finished (as reported from the tracking callback).
+
+In case you want to redirect the user to the next step in your system, the polling needs to respond with `{ forward_to: 'https://example.com/next_step_url' }`.
+
+It is not enough to rely on setting `forward_to` initially with the tracking request (if you also implement polling),
+as the entire reason polling exist is because websockets might fail to report the initially configured `forward_to` to your clients.
 
 #### 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;
 
@@ -62487,7 +62487,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -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) {
@@ -70238,13 +70252,13 @@ var TrackingProvider = (function (props) {
     };
   };
 
-  var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+  var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
     attempt = parseInt(attempt || 1, 10);
     console.log('RETRY TRACKING ATTEMPT ', attempt);
 
     if (attempt < 3) {
       setTimeout(function () {
-        startTracking(transaction, afterBlock, attempt + 1);
+        startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
       }, 3000);
     } else {
       console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
@@ -70258,38 +70272,101 @@ var TrackingProvider = (function (props) {
     }
   };
 
-  var startTracking = function startTracking(transaction, afterBlock, 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
-      })
+  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) {
+    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');
       } else {
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       }
     })["catch"](function (error) {
       console.log('TRACKING FAILED', error);
-      retryStartTracking(transaction, afterBlock, attempt);
+      retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
     });
   };
 
-  var initializeTracking = function initializeTracking(transaction, afterBlock) {
+  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);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
     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;
 
@@ -2334,7 +2334,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -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) {
@@ -3615,13 +3629,13 @@ var TrackingProvider = (function (props) {
     };
   };
 
-  var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+  var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
     attempt = parseInt(attempt || 1, 10);
     console.log('RETRY TRACKING ATTEMPT ', attempt);
 
     if (attempt < 3) {
       setTimeout(function () {
-        startTracking(transaction, afterBlock, attempt + 1);
+        startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
       }, 3000);
     } else {
       console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
@@ -3635,38 +3649,101 @@ var TrackingProvider = (function (props) {
     }
   };
 
-  var startTracking = function startTracking(transaction, afterBlock, 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
-      })
+  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) {
+    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');
       } else {
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       }
     })["catch"](function (error) {
       console.log('TRACKING FAILED', error);
-      retryStartTracking(transaction, afterBlock, attempt);
+      retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
     });
   };
 
-  var initializeTracking = function initializeTracking(transaction, afterBlock) {
+  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);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/React.createElement(TrackingContext.Provider, {
     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;
 
@@ -62493,7 +62493,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -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) {
@@ -70244,13 +70258,13 @@
       };
     };
 
-    var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+    var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
       console.log('RETRY TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
-          startTracking(transaction, afterBlock, attempt + 1);
+          startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
         }, 3000);
       } else {
         console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
@@ -70264,38 +70278,101 @@
       }
     };
 
-    var startTracking = function startTracking(transaction, afterBlock, 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
-        })
+    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) {
+      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');
         } else {
-          retryStartTracking(transaction, afterBlock, attempt);
+          retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
         console.log('TRACKING FAILED', error);
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       });
     };
 
-    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+    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);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
       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;
 
@@ -2329,7 +2329,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -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) {
@@ -3610,13 +3624,13 @@
       };
     };
 
-    var retryStartTracking = function retryStartTracking(transaction, afterBlock, attempt) {
+    var retryStartTracking = function retryStartTracking(transaction, afterBlock, paymentRoute, attempt) {
       attempt = parseInt(attempt || 1, 10);
       console.log('RETRY TRACKING ATTEMPT ', attempt);
 
       if (attempt < 3) {
         setTimeout(function () {
-          startTracking(transaction, afterBlock, attempt + 1);
+          startTracking(transaction, afterBlock, paymentRoute, attempt + 1);
         }, 3000);
       } else {
         console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
@@ -3630,38 +3644,101 @@
       }
     };
 
-    var startTracking = function startTracking(transaction, afterBlock, 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
-        })
+    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) {
+      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');
         } else {
-          retryStartTracking(transaction, afterBlock, attempt);
+          retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
         }
       })["catch"](function (error) {
         console.log('TRACKING FAILED', error);
-        retryStartTracking(transaction, afterBlock, attempt);
+        retryStartTracking(transaction, afterBlock, paymentRoute, attempt);
       });
     };
 
-    var initializeTracking = function initializeTracking(transaction, afterBlock) {
+    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);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
       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.6.0",
+  "version": "6.9.0",
   "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",