@hcaptcha/react-hcaptcha 1.8.1 → 1.9.0

package/README.md

@@ -138,6 +138,7 @@ return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} /
 |`imghost`|String|No|`-`|See enterprise docs.|
 |`reportapi`|String|No|`-`|See enterprise docs.|
 |`sentry`|String|No|`-`|See enterprise docs.|
+| `cleanup`         | Boolean     | No       | `true`          | Remove script tag after setup.|
 |`custom`|Boolean|No|`-`|See enterprise docs.|
 |`loadAsync`|Boolean|No|`true`|Set if the script should be loaded asynchronously.|
 |`scriptLocation`|Element|No|`document.head`| Location of where to append the script tag. Make sure to add it to an area that will persist to prevent loading multiple times in the same document view. Note: If `null` is provided, the `document.head` will be used.|

package/dist/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breadcrumbMessages = exports.scopeTag = void 0;
+var scopeTag = {
+  key: 'source',
+  value: '@hCaptcha/react'
+};
+exports.scopeTag = scopeTag;
+var breadcrumbMessages = {
+  mounted: 'hCaptcha component mounted',
+  expired: 'hCaptcha expired',
+  unmounted: 'hCaptcha component unmounted',
+  reset: 'hCaptcha reset',
+  removed: 'hCaptcha removed'
+};
+exports.breadcrumbMessages = breadcrumbMessages;

package/dist/esm/constants.js

@@ -0,0 +1,11 @@
+export var scopeTag = {
+  key: 'source',
+  value: '@hCaptcha/react'
+};
+export var breadcrumbMessages = {
+  mounted: 'hCaptcha component mounted',
+  expired: 'hCaptcha expired',
+  unmounted: 'hCaptcha component unmounted',
+  reset: 'hCaptcha reset',
+  removed: 'hCaptcha removed'
+};

package/dist/esm/index.js

@@ -1,77 +1,30 @@
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from './utils.js';
-var SCRIPT_ID = 'hcaptcha-api-script-id';
-var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
-
-var scripts = []; // Generate hCaptcha API script
-
-var mountCaptchaScript = function mountCaptchaScript(params) {
-  if (params === void 0) {
-    params = {};
-  }
-
-  var element = getMountElement(params.scriptLocation);
-  delete params.scriptLocation;
-  var frame = getFrame(element);
-  var script = scripts.find(function (_ref) {
-    var scope = _ref.scope;
-    return scope === frame.window;
-  });
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  var promise = new Promise(function (resolve, reject) {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-    var domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-    var script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = domain + "/1/api.js?render=explicit&onload=" + HCAPTCHA_LOAD_FN_NAME;
-    script.async = params.loadAsync !== undefined ? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = function (event) {
-      return reject('script-error');
-    };
-
-    var query = generateQuery(params);
-    script.src += query !== "" ? "&" + query : "";
-    element.appendChild(script);
-  });
-  scripts.push({
-    promise: promise,
-    scope: frame.window
-  });
-  return promise;
-};
-
+import { hCaptchaLoader, initSentry } from '@hcaptcha/loader';
+import { getFrame, getMountElement } from './utils.js';
+import { breadcrumbMessages, scopeTag } from "./constants";
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(HCaptcha, _React$Component);
-
   function HCaptcha(props) {
     var _this;
-
     _this = _React$Component.call(this, props) || this;
+
     /**
      * Internal reference to track hCaptcha API
      *
      * Required as window is relative to initialization in application
      * not where the script and iFrames have been loaded.
      */
+    _this._hcaptcha = undefined;
 
-    _this._hcaptcha = undefined; // API Methods
-
+    // API Methods
     _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind(_assertThisInitialized(_this));
-    _this.isReady = _this.isReady.bind(_assertThisInitialized(_this)); // Event Handlers
+    _this.isReady = _this.isReady.bind(_assertThisInitialized(_this));
 
+    // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind(_assertThisInitialized(_this));
     _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_this));
@@ -82,6 +35,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind(_assertThisInitialized(_this));
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
+    _this.sentryHub = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -90,23 +44,25 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   var _proto = HCaptcha.prototype;
-
   _proto.componentDidMount = function componentDidMount() {
     var _this2 = this;
-
     // Once captcha is mounted intialize hCaptcha - hCaptcha
     var element = getMountElement(this.props.scriptLocation);
     var frame = getFrame(element);
     this._hcaptcha = frame.window.hcaptcha || undefined;
     var isApiReady = typeof this._hcaptcha !== 'undefined';
+    this.sentryHub = initSentry(this.props.sentry, scopeTag);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.mounted
+    });
+
     /*
      * Check if hCaptcha has already been loaded,
      * If Yes, render the captcha
      * If No, create script tag and wait to render the captcha
      */
-
     if (isApiReady) {
       this.setState({
         isApiReady: true
@@ -115,85 +71,84 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       });
       return;
     }
-
     this.loadCaptcha();
   };
-
   _proto.componentWillUnmount = function componentWillUnmount() {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
-    } // Reset any stored variables / timers when unmounting
-
+    }
 
+    // Reset any stored variables / timers when unmounting
     hcaptcha.reset(captchaId);
     hcaptcha.remove(captchaId);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.unmounted
+    });
   };
-
   _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     // Prevent component re-rendering when these internal state variables are updated
     if (this.state.isApiReady !== nextState.isApiReady || this.state.isRemoved !== nextState.isRemoved) {
       return false;
     }
-
     return true;
   };
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _this3 = this;
-
     // Prop Keys that could change
-    var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
-
+    var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint'];
+    // See if any props changed during component update
     var match = keys.every(function (key) {
       return prevProps[key] === _this3.props[key];
-    }); // If they have changed, remove current captcha and render a new one
+    });
 
+    // If they have changed, remove current captcha and render a new one
     if (!match) {
       this.removeCaptcha(function () {
         _this3.renderCaptcha();
       });
     }
   };
-
   _proto.loadCaptcha = function loadCaptcha() {
     if (this.apiScriptRequested) {
       return;
     }
-
     var _this$props = this.props,
-        apihost = _this$props.apihost,
-        assethost = _this$props.assethost,
-        endpoint = _this$props.endpoint,
-        host = _this$props.host,
-        imghost = _this$props.imghost,
-        hl = _this$props.languageOverride,
-        reCaptchaCompat = _this$props.reCaptchaCompat,
-        reportapi = _this$props.reportapi,
-        sentry = _this$props.sentry,
-        custom = _this$props.custom,
-        loadAsync = _this$props.loadAsync,
-        scriptLocation = _this$props.scriptLocation;
+      apihost = _this$props.apihost,
+      assethost = _this$props.assethost,
+      endpoint = _this$props.endpoint,
+      host = _this$props.host,
+      imghost = _this$props.imghost,
+      hl = _this$props.languageOverride,
+      reCaptchaCompat = _this$props.reCaptchaCompat,
+      reportapi = _this$props.reportapi,
+      sentry = _this$props.sentry,
+      custom = _this$props.custom,
+      loadAsync = _this$props.loadAsync,
+      scriptLocation = _this$props.scriptLocation,
+      _this$props$cleanup = _this$props.cleanup,
+      cleanup = _this$props$cleanup === void 0 ? true : _this$props$cleanup;
     var mountParams = {
+      render: 'explicit',
       apihost: apihost,
       assethost: assethost,
       endpoint: endpoint,
       hl: hl,
       host: host,
       imghost: imghost,
-      recaptchacompat: reCaptchaCompat === false ? "off" : null,
+      recaptchacompat: reCaptchaCompat === false ? 'off' : null,
       reportapi: reportapi,
       sentry: sentry,
       custom: custom,
       loadAsync: loadAsync,
-      scriptLocation: scriptLocation
+      scriptLocation: scriptLocation,
+      cleanup: cleanup
     };
-    mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+    hCaptchaLoader(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
     this.apiScriptRequested = true;
   };
-
   _proto.renderCaptcha = function renderCaptcha(onReady) {
     var isApiReady = this.state.isApiReady;
     if (!isApiReady) return;
@@ -208,8 +163,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       hl: this.props.hl || this.props.languageOverride,
       languageOverride: undefined
     });
-    var hcaptcha = this._hcaptcha; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-
+    var hcaptcha = this._hcaptcha;
+    //Render hCaptcha widget and provide necessary callbacks - hCaptcha
     var captchaId = hcaptcha.render(this.ref.current, renderParams);
     this.setState({
       isRemoved: false,
@@ -218,169 +173,154 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       onReady && onReady();
     });
   };
-
   _proto.resetCaptcha = function resetCaptcha() {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
-    } // Reset captcha state, removes stored token and unticks checkbox
-
-
+    }
+    // Reset captcha state, removes stored token and unticks checkbox
     hcaptcha.reset(captchaId);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.reset
+    });
   };
-
   _proto.removeCaptcha = function removeCaptcha(callback) {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     this.setState({
       isRemoved: true
     }, function () {
       hcaptcha.remove(captchaId);
       callback && callback();
     });
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.removed
+    });
   };
-
   _proto.handleOnLoad = function handleOnLoad() {
     var _this4 = this;
-
     this.setState({
       isApiReady: true
     }, function () {
-      var element = getMountElement(_this4.props.scriptLocation);
-      var frame = getFrame(element);
-      _this4._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
-
-      _this4.renderCaptcha(function () {
-        // trigger onLoad if it exists
-        var onLoad = _this4.props.onLoad;
-        if (onLoad) onLoad();
-      });
+      try {
+        var element = getMountElement(_this4.props.scriptLocation);
+        var frame = getFrame(element);
+        _this4._hcaptcha = frame.window.hcaptcha;
+
+        // render captcha and wait for captcha id
+        _this4.renderCaptcha(function () {
+          // trigger onLoad if it exists
+          var onLoad = _this4.props.onLoad;
+          if (onLoad) onLoad();
+        });
+      } catch (error) {
+        _this4.sentryHub.captureException(error);
+      }
     });
   };
-
   _proto.handleSubmit = function handleSubmit(event) {
     var onVerify = this.props.onVerify;
     var _this$state = this.state,
-        isRemoved = _this$state.isRemoved,
-        captchaId = _this$state.captchaId;
+      isRemoved = _this$state.isRemoved,
+      captchaId = _this$state.captchaId;
     var hcaptcha = this._hcaptcha;
     if (typeof hcaptcha === 'undefined' || isRemoved) return;
     var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
-
     var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
-
     if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
   };
-
   _proto.handleExpire = function handleExpire() {
     var onExpire = this.props.onExpire;
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
     if (onExpire) onExpire();
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.expired
+    });
   };
-
   _proto.handleError = function handleError(event) {
     var onError = this.props.onError;
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (this.isReady()) {
       // If hCaptcha runs into error, reset captcha - hCaptcha
       hcaptcha.reset(captchaId);
     }
-
     if (onError) onError(event);
   };
-
   _proto.isReady = function isReady() {
     var _this$state2 = this.state,
-        isApiReady = _this$state2.isApiReady,
-        isRemoved = _this$state2.isRemoved;
+      isApiReady = _this$state2.isApiReady,
+      isRemoved = _this$state2.isRemoved;
     return isApiReady && !isRemoved;
   };
-
   _proto.handleOpen = function handleOpen() {
     if (!this.isReady() || !this.props.onOpen) {
       return;
     }
-
     this.props.onOpen();
   };
-
   _proto.handleClose = function handleClose() {
     if (!this.isReady() || !this.props.onClose) {
       return;
     }
-
     this.props.onClose();
   };
-
   _proto.handleChallengeExpired = function handleChallengeExpired() {
     if (!this.isReady() || !this.props.onChalExpired) {
       return;
     }
-
     this.props.onChalExpired();
   };
-
   _proto.execute = function execute(opts) {
     if (opts === void 0) {
       opts = null;
     }
-
-    var captchaId = this.state.captchaId;
-    var hcaptcha = this._hcaptcha;
-
-    if (!this.isReady()) {
-      return;
-    }
-
-    if (opts && typeof opts !== "object") {
-      opts = null;
+    try {
+      var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
+      if (!this.isReady()) {
+        return;
+      }
+      if (opts && typeof opts !== "object") {
+        opts = null;
+      }
+      return hcaptcha.execute(captchaId, opts);
+    } catch (error) {
+      this.sentryHub.captureException(error);
     }
-
-    return hcaptcha.execute(captchaId, opts);
   };
-
   _proto.setData = function setData(data) {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     if (data && typeof data !== "object") {
       data = null;
     }
-
     hcaptcha.setData(captchaId, data);
   };
-
   _proto.getResponse = function getResponse() {
     var hcaptcha = this._hcaptcha;
     return hcaptcha.getResponse(this.state.captchaId);
   };
-
   _proto.getRespKey = function getRespKey() {
     var hcaptcha = this._hcaptcha;
     return hcaptcha.getRespKey(this.state.captchaId);
   };
-
   _proto.render = function render() {
     var elementId = this.state.elementId;
     return /*#__PURE__*/React.createElement("div", {
@@ -388,8 +328,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       id: elementId
     });
   };
-
   return HCaptcha;
 }(React.Component);
-
 export default HCaptcha;

package/dist/esm/utils.js

@@ -1,17 +1,3 @@
-function generateQuery(params) {
-  return Object.entries(params).filter(function (_ref) {
-    var key = _ref[0],
-        value = _ref[1];
-    return value || value === false;
-  }).map(function (_ref2) {
-    var key = _ref2[0],
-        value = _ref2[1];
-    return encodeURIComponent(key) + "=" + encodeURIComponent(value);
-  }).join("&");
-}
-
-;
-
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
   var win = doc.defaultView || doc.parentWindow || window;
@@ -20,9 +6,7 @@ function getFrame(element) {
     window: win
   };
 }
-
 function getMountElement(element) {
   return element || document.head;
 }
-
-export { generateQuery, getFrame, getMountElement };
+export { getFrame, getMountElement };

package/dist/index.js

@@ -1,106 +1,47 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var React = _interopRequireWildcard(require("react"));
-
+var _loader = require("@hcaptcha/loader");
 var _utils = require("./utils.js");
-
+var _constants = require("./constants");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var SCRIPT_ID = 'hcaptcha-api-script-id';
-var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
-
-var scripts = []; // Generate hCaptcha API script
-
-var mountCaptchaScript = function mountCaptchaScript() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var element = (0, _utils.getMountElement)(params.scriptLocation);
-  delete params.scriptLocation;
-  var frame = (0, _utils.getFrame)(element);
-  var script = scripts.find(function (_ref) {
-    var scope = _ref.scope;
-    return scope === frame.window;
-  });
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  var promise = new Promise(function (resolve, reject) {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-    var domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-    var script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = "".concat(domain, "/1/api.js?render=explicit&onload=").concat(HCAPTCHA_LOAD_FN_NAME);
-    script.async = params.loadAsync !== undefined ? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = function (event) {
-      return reject('script-error');
-    };
-
-    var query = (0, _utils.generateQuery)(params);
-    script.src += query !== "" ? "&".concat(query) : "";
-    element.appendChild(script);
-  });
-  scripts.push({
-    promise: promise,
-    scope: frame.window
-  });
-  return promise;
-};
-
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(HCaptcha, _React$Component);
-
   var _super = _createSuper(HCaptcha);
-
   function HCaptcha(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, HCaptcha);
     _this = _super.call(this, props);
+
     /**
      * Internal reference to track hCaptcha API
      *
      * Required as window is relative to initialization in application
      * not where the script and iFrames have been loaded.
      */
+    _this._hcaptcha = undefined;
 
-    _this._hcaptcha = undefined; // API Methods
-
+    // API Methods
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this)); // Event Handlers
+    _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this));
 
+    // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
@@ -111,6 +52,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
+    _this.sentryHub = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -119,23 +61,26 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       // Once captcha is mounted intialize hCaptcha - hCaptcha
       var element = (0, _utils.getMountElement)(this.props.scriptLocation);
       var frame = (0, _utils.getFrame)(element);
       this._hcaptcha = frame.window.hcaptcha || undefined;
       var isApiReady = typeof this._hcaptcha !== 'undefined';
+      this.sentryHub = (0, _loader.initSentry)(this.props.sentry, _constants.scopeTag);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.mounted
+      });
+
       /*
        * Check if hCaptcha has already been loaded,
        * If Yes, render the captcha
        * If No, create script tag and wait to render the captcha
        */
-
       if (isApiReady) {
         this.setState({
           isApiReady: true
@@ -144,7 +89,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         });
         return;
       }
-
       this.loadCaptcha();
     }
   }, {
@@ -152,14 +96,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
-      } // Reset any stored variables / timers when unmounting
-
+      }
 
+      // Reset any stored variables / timers when unmounting
       hcaptcha.reset(captchaId);
       hcaptcha.remove(captchaId);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.unmounted
+      });
     }
   }, {
     key: "shouldComponentUpdate",
@@ -168,21 +115,20 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (this.state.isApiReady !== nextState.isApiReady || this.state.isRemoved !== nextState.isRemoved) {
         return false;
       }
-
       return true;
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this3 = this;
-
       // Prop Keys that could change
-      var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
-
+      var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint'];
+      // See if any props changed during component update
       var match = keys.every(function (key) {
         return prevProps[key] === _this3.props[key];
-      }); // If they have changed, remove current captcha and render a new one
+      });
 
+      // If they have changed, remove current captcha and render a new one
       if (!match) {
         this.removeCaptcha(function () {
           _this3.renderCaptcha();
@@ -195,35 +141,38 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (this.apiScriptRequested) {
         return;
       }
-
       var _this$props = this.props,
-          apihost = _this$props.apihost,
-          assethost = _this$props.assethost,
-          endpoint = _this$props.endpoint,
-          host = _this$props.host,
-          imghost = _this$props.imghost,
-          hl = _this$props.languageOverride,
-          reCaptchaCompat = _this$props.reCaptchaCompat,
-          reportapi = _this$props.reportapi,
-          sentry = _this$props.sentry,
-          custom = _this$props.custom,
-          loadAsync = _this$props.loadAsync,
-          scriptLocation = _this$props.scriptLocation;
+        apihost = _this$props.apihost,
+        assethost = _this$props.assethost,
+        endpoint = _this$props.endpoint,
+        host = _this$props.host,
+        imghost = _this$props.imghost,
+        hl = _this$props.languageOverride,
+        reCaptchaCompat = _this$props.reCaptchaCompat,
+        reportapi = _this$props.reportapi,
+        sentry = _this$props.sentry,
+        custom = _this$props.custom,
+        loadAsync = _this$props.loadAsync,
+        scriptLocation = _this$props.scriptLocation,
+        _this$props$cleanup = _this$props.cleanup,
+        cleanup = _this$props$cleanup === void 0 ? true : _this$props$cleanup;
       var mountParams = {
+        render: 'explicit',
         apihost: apihost,
         assethost: assethost,
         endpoint: endpoint,
         hl: hl,
         host: host,
         imghost: imghost,
-        recaptchacompat: reCaptchaCompat === false ? "off" : null,
+        recaptchacompat: reCaptchaCompat === false ? 'off' : null,
         reportapi: reportapi,
         sentry: sentry,
         custom: custom,
         loadAsync: loadAsync,
-        scriptLocation: scriptLocation
+        scriptLocation: scriptLocation,
+        cleanup: cleanup
       };
-      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+      (0, _loader.hCaptchaLoader)(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
       this.apiScriptRequested = true;
     }
   }, {
@@ -242,8 +191,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         hl: this.props.hl || this.props.languageOverride,
         languageOverride: undefined
       });
-      var hcaptcha = this._hcaptcha; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-
+      var hcaptcha = this._hcaptcha;
+      //Render hCaptcha widget and provide necessary callbacks - hCaptcha
       var captchaId = hcaptcha.render(this.ref.current, renderParams);
       this.setState({
         isRemoved: false,
@@ -257,48 +206,56 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function resetCaptcha() {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
-      } // Reset captcha state, removes stored token and unticks checkbox
-
-
+      }
+      // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId);
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.reset
+      });
     }
   }, {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       this.setState({
         isRemoved: true
       }, function () {
         hcaptcha.remove(captchaId);
         callback && callback();
       });
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.removed
+      });
     }
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
       var _this4 = this;
-
       this.setState({
         isApiReady: true
       }, function () {
-        var element = (0, _utils.getMountElement)(_this4.props.scriptLocation);
-        var frame = (0, _utils.getFrame)(element);
-        _this4._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
-
-        _this4.renderCaptcha(function () {
-          // trigger onLoad if it exists
-          var onLoad = _this4.props.onLoad;
-          if (onLoad) onLoad();
-        });
+        try {
+          var element = (0, _utils.getMountElement)(_this4.props.scriptLocation);
+          var frame = (0, _utils.getFrame)(element);
+          _this4._hcaptcha = frame.window.hcaptcha;
+
+          // render captcha and wait for captcha id
+          _this4.renderCaptcha(function () {
+            // trigger onLoad if it exists
+            var onLoad = _this4.props.onLoad;
+            if (onLoad) onLoad();
+          });
+        } catch (error) {
+          _this4.sentryHub.captureException(error);
+        }
       });
     }
   }, {
@@ -306,14 +263,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function handleSubmit(event) {
       var onVerify = this.props.onVerify;
       var _this$state = this.state,
-          isRemoved = _this$state.isRemoved,
-          captchaId = _this$state.captchaId;
+        isRemoved = _this$state.isRemoved,
+        captchaId = _this$state.captchaId;
       var hcaptcha = this._hcaptcha;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
       var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
-
       var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
-
       if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
     }
   }, {
@@ -322,14 +277,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onExpire = this.props.onExpire;
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
+      this.sentryHub.addBreadcrumb({
+        category: _constants.scopeTag.value,
+        message: _constants.breadcrumbMessages.expired
+      });
     }
   }, {
     key: "handleError",
@@ -337,20 +294,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onError = this.props.onError;
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (this.isReady()) {
         // If hCaptcha runs into error, reset captcha - hCaptcha
         hcaptcha.reset(captchaId);
       }
-
       if (onError) onError(event);
     }
   }, {
     key: "isReady",
     value: function isReady() {
       var _this$state2 = this.state,
-          isApiReady = _this$state2.isApiReady,
-          isRemoved = _this$state2.isRemoved;
+        isApiReady = _this$state2.isApiReady,
+        isRemoved = _this$state2.isRemoved;
       return isApiReady && !isRemoved;
     }
   }, {
@@ -359,7 +314,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onOpen) {
         return;
       }
-
       this.props.onOpen();
     }
   }, {
@@ -368,7 +322,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onClose) {
         return;
       }
-
       this.props.onClose();
     }
   }, {
@@ -377,40 +330,37 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady() || !this.props.onChalExpired) {
         return;
       }
-
       this.props.onChalExpired();
     }
   }, {
     key: "execute",
     value: function execute() {
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var captchaId = this.state.captchaId;
-      var hcaptcha = this._hcaptcha;
-
-      if (!this.isReady()) {
-        return;
+      try {
+        var captchaId = this.state.captchaId;
+        var hcaptcha = this._hcaptcha;
+        if (!this.isReady()) {
+          return;
+        }
+        if (opts && (0, _typeof2["default"])(opts) !== "object") {
+          opts = null;
+        }
+        return hcaptcha.execute(captchaId, opts);
+      } catch (error) {
+        this.sentryHub.captureException(error);
       }
-
-      if (opts && (0, _typeof2["default"])(opts) !== "object") {
-        opts = null;
-      }
-
-      return hcaptcha.execute(captchaId, opts);
     }
   }, {
     key: "setData",
     value: function setData(data) {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
-
       if (!this.isReady()) {
         return;
       }
-
       if (data && (0, _typeof2["default"])(data) !== "object") {
         data = null;
       }
-
       hcaptcha.setData(captchaId, data);
     }
   }, {
@@ -437,7 +387,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }]);
   return HCaptcha;
 }(React.Component);
-
 var _default = HCaptcha;
 exports["default"] = _default;
 module.exports = exports.default;

package/dist/utils.js

@@ -1,34 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateQuery = generateQuery;
 exports.getFrame = getFrame;
 exports.getMountElement = getMountElement;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-function generateQuery(params) {
-  return Object.entries(params).filter(function (_ref) {
-    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
-    return value || value === false;
-  }).map(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
-
-    return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(value));
-  }).join("&");
-}
-
-;
-
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
   var win = doc.defaultView || doc.parentWindow || window;
@@ -37,7 +13,6 @@ function getFrame(element) {
     window: win
   };
 }
-
 function getMountElement(element) {
   return element || document.head;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -58,6 +58,7 @@
     "webpack-dev-server": "^4.13.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.17.9",
+    "@hcaptcha/loader": "^1.0.8"
   }
 }

package/src/constants.js

@@ -0,0 +1,13 @@
+export const scopeTag = {
+    key: 'source',
+    value: '@hCaptcha/react'
+}
+
+export const breadcrumbMessages = {
+    mounted: 'hCaptcha component mounted',
+    expired: 'hCaptcha expired',
+    unmounted: 'hCaptcha component unmounted',
+    reset: 'hCaptcha reset',
+    removed: 'hCaptcha removed'
+
+}

package/src/index.js

@@ -1,51 +1,8 @@
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from './utils.js';
+import { hCaptchaLoader, initSentry } from '@hcaptcha/loader';
 
-const SCRIPT_ID = 'hcaptcha-api-script-id';
-const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
-
-// Prevent loading API script multiple times
-const scripts = [];
-
-// Generate hCaptcha API script
-const mountCaptchaScript = (params = {}) => {
-  const element = getMountElement(params.scriptLocation);
-  delete params.scriptLocation;
-
-  const frame = getFrame(element);
-  const script = scripts.find(({ scope }) => scope === frame.window);
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  const promise = new Promise((resolve, reject) => {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-
-    const domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-
-    const script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
-
-    script.async = params.loadAsync !== undefined? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = (event) => reject('script-error');
-
-    const query = generateQuery(params);
-    script.src += query !== ""? `&${query}` : "";
-
-    element.appendChild(script);
-  });
-
-  scripts.push({ promise, scope: frame.window });
-
-  return promise;
-};
+import { getFrame, getMountElement } from './utils.js';
+import { breadcrumbMessages, scopeTag } from "./constants";
 
 
 class HCaptcha extends React.Component {
@@ -78,6 +35,7 @@ class HCaptcha extends React.Component {
 
       this.ref = React.createRef();
       this.apiScriptRequested = false;
+      this.sentryHub = null;
 
       this.state = {
         isApiReady: false,
@@ -94,6 +52,13 @@ class HCaptcha extends React.Component {
 
       const isApiReady = typeof this._hcaptcha !== 'undefined';
 
+      this.sentryHub = initSentry(this.props.sentry, scopeTag);
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.mounted,
+      });
+
       /*
        * Check if hCaptcha has already been loaded,
        * If Yes, render the captcha
@@ -126,6 +91,11 @@ class HCaptcha extends React.Component {
       // Reset any stored variables / timers when unmounting
       hcaptcha.reset(captchaId);
       hcaptcha.remove(captchaId);
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.unmounted,
+      });
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -168,26 +138,30 @@ class HCaptcha extends React.Component {
         sentry,
         custom,
         loadAsync,
-        scriptLocation
+        scriptLocation,
+        cleanup = true,
       } = this.props;
       const mountParams = {
+        render: 'explicit',
         apihost,
         assethost,
         endpoint,
         hl,
         host,
         imghost,
-        recaptchacompat: reCaptchaCompat === false? "off" : null,
+        recaptchacompat: reCaptchaCompat === false? 'off' : null,
         reportapi,
         sentry,
         custom,
         loadAsync,
         scriptLocation,
+        cleanup
       };
 
-      mountCaptchaScript(mountParams)
-        .then(this.handleOnLoad)
-        .catch(this.handleError);
+      hCaptchaLoader(mountParams)
+          .then(this.handleOnLoad, this.handleError)
+          .catch(this.handleError);
+
       this.apiScriptRequested = true;
     }
 
@@ -225,6 +199,11 @@ class HCaptcha extends React.Component {
       }
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId)
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.reset,
+      });
     }
 
     removeCaptcha(callback) {
@@ -239,21 +218,33 @@ class HCaptcha extends React.Component {
         hcaptcha.remove(captchaId);
         callback && callback()
       });
+
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.removed,
+      });
     }
 
-    handleOnLoad () {
+  handleOnLoad () {
       this.setState({ isApiReady: true }, () => {
-        const element = getMountElement(this.props.scriptLocation);
-        const frame = getFrame(element);
+        try {
+          const element = getMountElement(this.props.scriptLocation);
+          const frame = getFrame(element);
+
+          this._hcaptcha = frame.window.hcaptcha;
 
-        this._hcaptcha = frame.window.hcaptcha;
 
-        // render captcha and wait for captcha id
-        this.renderCaptcha(() => {
+          // render captcha and wait for captcha id
+          this.renderCaptcha(() => {
             // trigger onLoad if it exists
+
             const { onLoad } = this.props;
             if (onLoad) onLoad();
-        });
+          });
+        } catch (error) {
+          this.sentryHub.captureException(error);
+        }
       });
     }
 
@@ -281,6 +272,11 @@ class HCaptcha extends React.Component {
       hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.expired,
+      });
     }
 
     handleError (event) {
@@ -327,18 +323,23 @@ class HCaptcha extends React.Component {
     }
 
     execute (opts = null) {
-      const { captchaId } = this.state;
-      const hcaptcha = this._hcaptcha;
+      try {
+        const { captchaId } = this.state;
+        const hcaptcha = this._hcaptcha;
 
-      if (!this.isReady()) {
-        return;
-      }
 
-      if (opts && typeof opts !== "object") {
-        opts = null;
-      }
+        if (!this.isReady()) {
+            return;
+        }
 
-      return hcaptcha.execute(captchaId, opts);
+        if (opts && typeof opts !== "object") {
+            opts = null;
+        }
+
+        return hcaptcha.execute(captchaId, opts);
+      } catch (error) {
+          this.sentryHub.captureException(error);
+      }
     }
 
     setData (data) {

package/src/utils.js

@@ -1,11 +1,3 @@
-function generateQuery(params) {
-  return Object.entries(params)
-    .filter(([key, value]) => value || value === false)
-    .map(([key, value]) => {
-      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-    }).join("&");
-};
-
 function getFrame(element) {
   const doc = (element && element.ownerDocument) || document;
   const win = doc.defaultView || doc.parentWindow || window;
@@ -18,7 +10,6 @@ function getMountElement(element) {
 }
 
 export {
-  generateQuery,
   getFrame,
   getMountElement
-};
+};

package/types/index.d.ts

@@ -30,6 +30,8 @@ interface HCaptchaProps {
   reCaptchaCompat?: boolean;
   loadAsync?: boolean;
   scriptLocation?: HTMLElement | null;
+  sentry?: boolean;
+  cleanup?: boolean;
 }
 
 interface ExecuteResponse {