@depay/widgets 6.5.4 → 6.8.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.
@@ -210,6 +230,10 @@ Those values are supposed to be set by your backend not the widget nor the front
 
 Make sure you read the [Payment Tracking API](https://depay.fi/documentation/api#payments) for further details on how to integrate payment tracking.
 
+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](#error) with `{code: "TRACKING_FAILED"}`.
+
 #### connected
 
 `connected`

package/dist/esm/index.bundle.js

@@ -49451,7 +49451,8 @@ var ErrorProvider = (function (props) {
   } else {
     return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
       value: {
-        setError: setErrorFromChildren
+        setError: setErrorFromChildren,
+        errorCallback: props.errorCallback
       }
     }, /*#__PURE__*/react.createElement(ErrorBoundary, {
       setError: setErrorFromChildren
@@ -49496,7 +49497,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
 });
 
 var ImageStyle = (function (style) {
@@ -62371,7 +62372,7 @@ var NoPaymentMethodFoundDialog = (function () {
       className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/react.createElement("strong", {
       className: "FontSizeM"
-    }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+    }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
     footer: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/react.createElement("button", {
@@ -62486,7 +62487,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -69671,6 +69672,19 @@ var DonationOverviewSkeleton = (function (props) {
   });
 });
 
+var AlertIcon = (function (props) {
+  return /*#__PURE__*/react.createElement("svg", {
+    className: "AlertIcon Icon " + props.className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/react.createElement("path", {
+    d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+  }));
+});
+
 var Checkmark = (function (props) {
   return /*#__PURE__*/react.createElement("svg", {
     className: "Checkmark Icon " + props.className,
@@ -69748,7 +69762,8 @@ var Footer = (function () {
   var _useContext3 = react.useContext(TrackingContext),
       tracking = _useContext3.tracking,
       forward = _useContext3.forward,
-      forwardTo = _useContext3.forwardTo;
+      forwardTo = _useContext3.forwardTo,
+      trackingFailed = _useContext3.trackingFailed;
 
   var _useContext4 = react.useContext(PaymentContext),
       payment = _useContext4.payment,
@@ -69773,7 +69788,7 @@ var Footer = (function () {
     }
 
     if (forward) {
-      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
+      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/react.createElement("div", {
         className: "CardImage"
@@ -69789,21 +69804,37 @@ var Footer = (function () {
         className: "Opacity05"
       }, "Payment confirmation has been stored")))));
     } else {
-      return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
-        className: "Card transparent small disabled"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "CardImage"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "TextCenter"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "Loading Icon"
-      }))), /*#__PURE__*/react.createElement("div", {
-        className: "CardBody"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "CardBodyWrapper"
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "Opacity05"
-      }, "Storing payment confirmation")))));
+      if (trackingFailed) {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+          className: "Card transparent small"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/react.createElement(AlertIcon, {
+          className: "small"
+        }))), /*#__PURE__*/react.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
+      } else {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "Loading Icon"
+        }))), /*#__PURE__*/react.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/react.createElement("div", {
+          className: "Opacity05"
+        }, "Storing payment confirmation")))));
+      }
     }
   };
 
@@ -70130,30 +70161,34 @@ var DonationStack = (function (props) {
 });
 
 var TrackingProvider = (function (props) {
-  var _useContext = react.useContext(ConfigurationContext),
-      track = _useContext.track;
+  var _useContext = react.useContext(ErrorContext),
+      errorCallback = _useContext.errorCallback;
 
-  var _useState = react.useState(track && !!track.endpoint),
+  var _useContext2 = react.useContext(ConfigurationContext),
+      track = _useContext2.track;
+
+  var _useState = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0],
-      setTracking = _useState2[1];
+      tracking = _useState2[0];
+      _useState2[1];
 
   var _useState3 = react.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       forward = _useState4[0],
       setForward = _useState4[1];
 
-  var _useState5 = react.useState(),
+  var _useState5 = react.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      forwardTo = _useState6[0],
-      setForwardTo = _useState6[1];
+      trackingFailed = _useState6[0],
+      setTrackingFailed = _useState6[1];
 
-  var _useContext2 = react.useContext(ClosableContext),
-      setClosable = _useContext2.setClosable;
+  var _useState7 = react.useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      forwardTo = _useState8[0],
+      setForwardTo = _useState8[1];
 
-  react.useEffect(function () {
-    setTracking(track && !!track.endpoint);
-  }, [track]);
+  var _useContext3 = react.useContext(ClosableContext),
+      setClosable = _useContext3.setClosable;
 
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.fi/cable');
@@ -70199,44 +70234,62 @@ 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!');
+      setTrackingFailed(true);
+
+      if (typeof errorCallback == 'function') {
+        errorCallback({
+          code: 'TRACKING_FAILED'
+        });
+      }
     }
   };
 
-  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 initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
     openSocket(transaction);
-    startTracking(transaction, afterBlock);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
@@ -70244,7 +70297,8 @@ var TrackingProvider = (function (props) {
       tracking: tracking,
       initializeTracking: initializeTracking,
       forward: forward,
-      forwardTo: forwardTo
+      forwardTo: forwardTo,
+      trackingFailed: trackingFailed
     }
   }, props.children);
 });

package/dist/esm/index.js

@@ -1652,7 +1652,8 @@ var ErrorProvider = (function (props) {
   } else {
     return /*#__PURE__*/React.createElement(ErrorContext.Provider, {
       value: {
-        setError: setErrorFromChildren
+        setError: setErrorFromChildren,
+        errorCallback: props.errorCallback
       }
     }, /*#__PURE__*/React.createElement(ErrorBoundary, {
       setError: setErrorFromChildren
@@ -1697,7 +1698,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+  return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
 });
 
 var ImageStyle = (function (style) {
@@ -2218,7 +2219,7 @@ var NoPaymentMethodFoundDialog = (function () {
       className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/React.createElement("strong", {
       className: "FontSizeM"
-    }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+    }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
     footer: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
     }, /*#__PURE__*/React.createElement("button", {
@@ -2333,7 +2334,7 @@ var PaymentProvider = (function (props) {
                 }
               })).then(function (sentTransaction) {
                 if (tracking) {
-                  initializeTracking(sentTransaction, currentBlock);
+                  initializeTracking(sentTransaction, currentBlock, payment.route);
                 }
 
                 setTransaction(sentTransaction);
@@ -3048,6 +3049,19 @@ var DonationOverviewSkeleton = (function (props) {
   });
 });
 
+var AlertIcon = (function (props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "AlertIcon Icon " + props.className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+  }));
+});
+
 var Checkmark = (function (props) {
   return /*#__PURE__*/React.createElement("svg", {
     className: "Checkmark Icon " + props.className,
@@ -3125,7 +3139,8 @@ var Footer = (function () {
   var _useContext3 = useContext(TrackingContext),
       tracking = _useContext3.tracking,
       forward = _useContext3.forward,
-      forwardTo = _useContext3.forwardTo;
+      forwardTo = _useContext3.forwardTo,
+      trackingFailed = _useContext3.trackingFailed;
 
   var _useContext4 = useContext(PaymentContext),
       payment = _useContext4.payment,
@@ -3150,7 +3165,7 @@ var Footer = (function () {
     }
 
     if (forward) {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "Card transparent small disabled"
       }, /*#__PURE__*/React.createElement("div", {
         className: "CardImage"
@@ -3166,21 +3181,37 @@ var Footer = (function () {
         className: "Opacity05"
       }, "Payment confirmation has been stored")))));
     } else {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-        className: "Card transparent small disabled"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "CardImage"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "TextCenter"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "Loading Icon"
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "CardBody"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "CardBodyWrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "Opacity05"
-      }, "Storing payment confirmation")))));
+      if (trackingFailed) {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "Card transparent small"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/React.createElement(AlertIcon, {
+          className: "small"
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React.createElement("div", null, "Tracking payment failed!")))));
+      } else {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "Card transparent small disabled"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardImage"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "TextCenter"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "Loading Icon"
+        }))), /*#__PURE__*/React.createElement("div", {
+          className: "CardBody"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "CardBodyWrapper"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "Opacity05"
+        }, "Storing payment confirmation")))));
+      }
     }
   };
 
@@ -3507,30 +3538,34 @@ var DonationStack = (function (props) {
 });
 
 var TrackingProvider = (function (props) {
-  var _useContext = useContext(ConfigurationContext),
-      track = _useContext.track;
+  var _useContext = useContext(ErrorContext),
+      errorCallback = _useContext.errorCallback;
 
-  var _useState = useState(track && !!track.endpoint),
+  var _useContext2 = useContext(ConfigurationContext),
+      track = _useContext2.track;
+
+  var _useState = useState(track && !!(track.endpoint || typeof track.method == 'function')),
       _useState2 = _slicedToArray(_useState, 2),
-      tracking = _useState2[0],
-      setTracking = _useState2[1];
+      tracking = _useState2[0];
+      _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       forward = _useState4[0],
       setForward = _useState4[1];
 
-  var _useState5 = useState(),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      forwardTo = _useState6[0],
-      setForwardTo = _useState6[1];
+      trackingFailed = _useState6[0],
+      setTrackingFailed = _useState6[1];
 
-  var _useContext2 = useContext(ClosableContext),
-      setClosable = _useContext2.setClosable;
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      forwardTo = _useState8[0],
+      setForwardTo = _useState8[1];
 
-  useEffect(function () {
-    setTracking(track && !!track.endpoint);
-  }, [track]);
+  var _useContext3 = useContext(ClosableContext),
+      setClosable = _useContext3.setClosable;
 
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.fi/cable');
@@ -3576,44 +3611,62 @@ 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!');
+      setTrackingFailed(true);
+
+      if (typeof errorCallback == 'function') {
+        errorCallback({
+          code: 'TRACKING_FAILED'
+        });
+      }
     }
   };
 
-  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 initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
     openSocket(transaction);
-    startTracking(transaction, afterBlock);
+    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/React.createElement(TrackingContext.Provider, {
@@ -3621,7 +3674,8 @@ var TrackingProvider = (function (props) {
       tracking: tracking,
       initializeTracking: initializeTracking,
       forward: forward,
-      forwardTo: forwardTo
+      forwardTo: forwardTo,
+      trackingFailed: trackingFailed
     }
   }, props.children);
 });

package/dist/umd/index.bundle.js

@@ -49457,7 +49457,8 @@
     } else {
       return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
         value: {
-          setError: setErrorFromChildren
+          setError: setErrorFromChildren,
+          errorCallback: props.errorCallback
         }
       }, /*#__PURE__*/react.createElement(ErrorBoundary, {
         setError: setErrorFromChildren
@@ -49502,7 +49503,7 @@
   });
 
   var IconStyle = (function (style) {
-    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
   });
 
   var ImageStyle = (function (style) {
@@ -62377,7 +62378,7 @@
         className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/react.createElement("strong", {
         className: "FontSizeM"
-      }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+      }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
       footer: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/react.createElement("button", {
@@ -62492,7 +62493,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -69677,6 +69678,19 @@
     });
   });
 
+  var AlertIcon = (function (props) {
+    return /*#__PURE__*/react.createElement("svg", {
+      className: "AlertIcon Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 20 20"
+    }, /*#__PURE__*/react.createElement("path", {
+      d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+    }));
+  });
+
   var Checkmark = (function (props) {
     return /*#__PURE__*/react.createElement("svg", {
       className: "Checkmark Icon " + props.className,
@@ -69754,7 +69768,8 @@
     var _useContext3 = react.useContext(TrackingContext),
         tracking = _useContext3.tracking,
         forward = _useContext3.forward,
-        forwardTo = _useContext3.forwardTo;
+        forwardTo = _useContext3.forwardTo,
+        trackingFailed = _useContext3.trackingFailed;
 
     var _useContext4 = react.useContext(PaymentContext),
         payment = _useContext4.payment,
@@ -69779,7 +69794,7 @@
       }
 
       if (forward) {
-        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
           className: "Card transparent small disabled"
         }, /*#__PURE__*/react.createElement("div", {
           className: "CardImage"
@@ -69795,21 +69810,37 @@
           className: "Opacity05"
         }, "Payment confirmation has been stored")))));
       } else {
-        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
-          className: "Card transparent small disabled"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "CardImage"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "TextCenter"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "Loading Icon"
-        }))), /*#__PURE__*/react.createElement("div", {
-          className: "CardBody"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "CardBodyWrapper"
-        }, /*#__PURE__*/react.createElement("div", {
-          className: "Opacity05"
-        }, "Storing payment confirmation")))));
+        if (trackingFailed) {
+          return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+            className: "Card transparent small"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/react.createElement(AlertIcon, {
+            className: "small"
+          }))), /*#__PURE__*/react.createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
+        } else {
+          return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+            className: "Card transparent small disabled"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "Loading Icon"
+          }))), /*#__PURE__*/react.createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/react.createElement("div", {
+            className: "Opacity05"
+          }, "Storing payment confirmation")))));
+        }
       }
     };
 
@@ -70136,30 +70167,34 @@
   });
 
   var TrackingProvider = (function (props) {
-    var _useContext = react.useContext(ConfigurationContext),
-        track = _useContext.track;
+    var _useContext = react.useContext(ErrorContext),
+        errorCallback = _useContext.errorCallback;
 
-    var _useState = react.useState(track && !!track.endpoint),
+    var _useContext2 = react.useContext(ConfigurationContext),
+        track = _useContext2.track;
+
+    var _useState = react.useState(track && !!(track.endpoint || typeof track.method == 'function')),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0],
-        setTracking = _useState2[1];
+        tracking = _useState2[0];
+        _useState2[1];
 
     var _useState3 = react.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
         forward = _useState4[0],
         setForward = _useState4[1];
 
-    var _useState5 = react.useState(),
+    var _useState5 = react.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        forwardTo = _useState6[0],
-        setForwardTo = _useState6[1];
+        trackingFailed = _useState6[0],
+        setTrackingFailed = _useState6[1];
 
-    var _useContext2 = react.useContext(ClosableContext),
-        setClosable = _useContext2.setClosable;
+    var _useState7 = react.useState(),
+        _useState8 = _slicedToArray(_useState7, 2),
+        forwardTo = _useState8[0],
+        setForwardTo = _useState8[1];
 
-    react.useEffect(function () {
-      setTracking(track && !!track.endpoint);
-    }, [track]);
+    var _useContext3 = react.useContext(ClosableContext),
+        setClosable = _useContext3.setClosable;
 
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.fi/cable');
@@ -70205,44 +70240,62 @@
       };
     };
 
-    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!');
+        setTrackingFailed(true);
+
+        if (typeof errorCallback == 'function') {
+          errorCallback({
+            code: 'TRACKING_FAILED'
+          });
+        }
       }
     };
 
-    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 initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
       openSocket(transaction);
-      startTracking(transaction, afterBlock);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/react.createElement(TrackingContext.Provider, {
@@ -70250,7 +70303,8 @@
         tracking: tracking,
         initializeTracking: initializeTracking,
         forward: forward,
-        forwardTo: forwardTo
+        forwardTo: forwardTo,
+        trackingFailed: trackingFailed
       }
     }, props.children);
   });

package/dist/umd/index.js

@@ -1647,7 +1647,8 @@
     } else {
       return /*#__PURE__*/React__default["default"].createElement(ErrorContext.Provider, {
         value: {
-          setError: setErrorFromChildren
+          setError: setErrorFromChildren,
+          errorCallback: props.errorCallback
         }
       }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
         setError: setErrorFromChildren
@@ -1692,7 +1693,7 @@
   });
 
   var IconStyle = (function (style) {
-    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+    return "\n\n    .Icon {\n      fill : ".concat(style.colors.icons, ";\n      stroke : ").concat(style.colors.icons, ";\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
   });
 
   var ImageStyle = (function (style) {
@@ -2213,7 +2214,7 @@
         className: "Text PaddingTopS PaddingBottomM PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("strong", {
         className: "FontSizeM"
-      }, "We were not able to find any asset of value in your wallet. Please top up your account in order to proceed with this payment."))),
+      }, "We were not able to find any asset with enough value in your wallet. Please top up your account in order to proceed with this payment."))),
       footer: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2328,7 +2329,7 @@
                   }
                 })).then(function (sentTransaction) {
                   if (tracking) {
-                    initializeTracking(sentTransaction, currentBlock);
+                    initializeTracking(sentTransaction, currentBlock, payment.route);
                   }
 
                   setTransaction(sentTransaction);
@@ -3043,6 +3044,19 @@
     });
   });
 
+  var AlertIcon = (function (props) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", {
+      className: "AlertIcon Icon " + props.className,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 20 20"
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
+    }));
+  });
+
   var Checkmark = (function (props) {
     return /*#__PURE__*/React__default["default"].createElement("svg", {
       className: "Checkmark Icon " + props.className,
@@ -3120,7 +3134,8 @@
     var _useContext3 = React.useContext(TrackingContext),
         tracking = _useContext3.tracking,
         forward = _useContext3.forward,
-        forwardTo = _useContext3.forwardTo;
+        forwardTo = _useContext3.forwardTo,
+        trackingFailed = _useContext3.trackingFailed;
 
     var _useContext4 = React.useContext(PaymentContext),
         payment = _useContext4.payment,
@@ -3145,7 +3160,7 @@
       }
 
       if (forward) {
-        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
+        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", {
           className: "CardImage"
@@ -3161,21 +3176,37 @@
           className: "Opacity05"
         }, "Payment confirmation has been stored")))));
       } else {
-        return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
-          className: "Card transparent small disabled"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardImage"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "TextCenter"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "Loading Icon"
-        }))), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardBody"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "CardBodyWrapper"
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "Opacity05"
-        }, "Storing payment confirmation")))));
+        if (trackingFailed) {
+          return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Card transparent small"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardImage"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/React__default["default"].createElement(AlertIcon, {
+            className: "small"
+          }))), /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/React__default["default"].createElement("div", null, "Tracking payment failed!")))));
+        } else {
+          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", {
+            className: "CardImage"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "TextCenter"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Loading Icon"
+          }))), /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBody"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "CardBodyWrapper"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "Opacity05"
+          }, "Storing payment confirmation")))));
+        }
       }
     };
 
@@ -3502,30 +3533,34 @@
   });
 
   var TrackingProvider = (function (props) {
-    var _useContext = React.useContext(ConfigurationContext),
-        track = _useContext.track;
+    var _useContext = React.useContext(ErrorContext),
+        errorCallback = _useContext.errorCallback;
 
-    var _useState = React.useState(track && !!track.endpoint),
+    var _useContext2 = React.useContext(ConfigurationContext),
+        track = _useContext2.track;
+
+    var _useState = React.useState(track && !!(track.endpoint || typeof track.method == 'function')),
         _useState2 = _slicedToArray(_useState, 2),
-        tracking = _useState2[0],
-        setTracking = _useState2[1];
+        tracking = _useState2[0];
+        _useState2[1];
 
     var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
         forward = _useState4[0],
         setForward = _useState4[1];
 
-    var _useState5 = React.useState(),
+    var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        forwardTo = _useState6[0],
-        setForwardTo = _useState6[1];
+        trackingFailed = _useState6[0],
+        setTrackingFailed = _useState6[1];
 
-    var _useContext2 = React.useContext(ClosableContext),
-        setClosable = _useContext2.setClosable;
+    var _useState7 = React.useState(),
+        _useState8 = _slicedToArray(_useState7, 2),
+        forwardTo = _useState8[0],
+        setForwardTo = _useState8[1];
 
-    React.useEffect(function () {
-      setTracking(track && !!track.endpoint);
-    }, [track]);
+    var _useContext3 = React.useContext(ClosableContext),
+        setClosable = _useContext3.setClosable;
 
     var openSocket = function openSocket(transaction) {
       var socket = new WebSocket('wss://integrate.depay.fi/cable');
@@ -3571,44 +3606,62 @@
       };
     };
 
-    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!');
+        setTrackingFailed(true);
+
+        if (typeof errorCallback == 'function') {
+          errorCallback({
+            code: 'TRACKING_FAILED'
+          });
+        }
       }
     };
 
-    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 initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
       openSocket(transaction);
-      startTracking(transaction, afterBlock);
+      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(TrackingContext.Provider, {
@@ -3616,7 +3669,8 @@
         tracking: tracking,
         initializeTracking: initializeTracking,
         forward: forward,
-        forwardTo: forwardTo
+        forwardTo: forwardTo,
+        trackingFailed: trackingFailed
       }
     }, props.children);
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.5.4",
+  "version": "6.8.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",