@hcaptcha/react-hcaptcha 1.4.0 → 1.4.3

package/dist/esm/index.js

@@ -0,0 +1,351 @@
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import * as React from 'react';
+import { generateQuery } from "./utils.js";
+var SCRIPT_ID = 'hcaptcha-api-script-id';
+var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
+
+var resolveFn;
+var rejectFn;
+var mountPromise = new Promise(function (resolve, reject) {
+  resolveFn = resolve;
+  rejectFn = reject;
+}); // Generate hCaptcha API script
+
+var mountCaptchaScript = function mountCaptchaScript(params) {
+  if (params === void 0) {
+    params = {};
+  }
+
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  } // Create global onload callback
+
+
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
+  var domain = params.apihost || "https://js.hcaptcha.com";
+  delete params.apihost;
+  var script = document.createElement("script");
+  script.id = SCRIPT_ID;
+  script.src = domain + "/1/api.js?render=explicit&onload=" + HCAPTCHA_LOAD_FN_NAME;
+  script.async = true;
+
+  script.onerror = function (event) {
+    return rejectFn('script-error');
+  };
+
+  var query = generateQuery(params);
+  script.src += query !== "" ? "&" + query : "";
+  document.head.appendChild(script);
+  return mountPromise;
+};
+
+var HCaptcha = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(HCaptcha, _React$Component);
+
+  function HCaptcha(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this; // 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.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
+    _this.handleOnLoad = _this.handleOnLoad.bind(_assertThisInitialized(_this));
+    _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_this));
+    _this.handleExpire = _this.handleExpire.bind(_assertThisInitialized(_this));
+    _this.handleError = _this.handleError.bind(_assertThisInitialized(_this));
+    _this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
+    _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_this));
+    _this.handleChallengeExpired = _this.handleChallengeExpired.bind(_assertThisInitialized(_this));
+    var isApiReady = typeof hcaptcha !== 'undefined';
+    _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
+    _this.state = {
+      isApiReady: isApiReady,
+      isRemoved: false,
+      elementId: props.id,
+      captchaId: ''
+    };
+    return _this;
+  }
+
+  var _proto = HCaptcha.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    // Once captcha is mounted intialize hCaptcha - hCaptcha
+    var isApiReady = this.state.isApiReady;
+    /*
+     * 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.renderCaptcha();
+      return;
+    }
+
+    this.loadCaptcha();
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var captchaId = this.state.captchaId;
+
+    if (!this.isReady()) {
+      return;
+    } // Reset any stored variables / timers when unmounting
+
+
+    hcaptcha.reset(captchaId);
+    hcaptcha.remove(captchaId);
+  };
+
+  _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 _this2 = this;
+
+    // Prop Keys that could change
+    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] === _this2.props[key];
+    }); // If they have changed, remove current captcha and render a new one
+
+    if (!match) {
+      this.removeCaptcha(function () {
+        _this2.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;
+    var mountParams = {
+      apihost: apihost,
+      assethost: assethost,
+      endpoint: endpoint,
+      hl: hl,
+      host: host,
+      imghost: imghost,
+      recaptchacompat: reCaptchaCompat === false ? "off" : null,
+      reportapi: reportapi,
+      sentry: sentry,
+      custom: custom
+    };
+    mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+    this.apiScriptRequested = true;
+  };
+
+  _proto.renderCaptcha = function renderCaptcha(onReady) {
+    var isApiReady = this.state.isApiReady;
+    if (!isApiReady) return;
+    var renderParams = Object.assign({
+      "open-callback": this.handleOpen,
+      "close-callback": this.handleClose,
+      "error-callback": this.handleError,
+      "chalexpired-callback": this.handleChallengeExpired,
+      "expired-callback": this.handleExpire,
+      "callback": this.handleSubmit
+    }, this.props, {
+      hl: this.props.hl || this.props.languageOverride,
+      languageOverride: undefined
+    }); //Render hCaptcha widget and provide necessary callbacks - hCaptcha
+
+    var captchaId = hcaptcha.render(this.ref.current, renderParams);
+    this.setState({
+      isRemoved: false,
+      captchaId: captchaId
+    }, function () {
+      onReady && onReady();
+    });
+  };
+
+  _proto.resetCaptcha = function resetCaptcha() {
+    var captchaId = this.state.captchaId;
+
+    if (!this.isReady()) {
+      return;
+    } // Reset captcha state, removes stored token and unticks checkbox
+
+
+    hcaptcha.reset(captchaId);
+  };
+
+  _proto.removeCaptcha = function removeCaptcha(callback) {
+    var captchaId = this.state.captchaId;
+
+    if (!this.isReady()) {
+      return;
+    }
+
+    this.setState({
+      isRemoved: true
+    }, function () {
+      hcaptcha.remove(captchaId);
+      callback && callback();
+    });
+  };
+
+  _proto.handleOnLoad = function handleOnLoad() {
+    var _this3 = this;
+
+    this.setState({
+      isApiReady: true
+    }, function () {
+      // render captcha and wait for captcha id
+      _this3.renderCaptcha(function () {
+        // trigger onLoad if it exists
+        var onLoad = _this3.props.onLoad;
+        if (onLoad) onLoad();
+      });
+    });
+  };
+
+  _proto.handleSubmit = function handleSubmit(event) {
+    var onVerify = this.props.onVerify;
+    var _this$state = this.state,
+        isRemoved = _this$state.isRemoved,
+        captchaId = _this$state.captchaId;
+    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
+
+    onVerify(token, ekey); //Dispatch event to verify user response
+  };
+
+  _proto.handleExpire = function handleExpire() {
+    var onExpire = this.props.onExpire;
+    var captchaId = this.state.captchaId;
+
+    if (!this.isReady()) {
+      return;
+    }
+
+    hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
+
+    if (onExpire) onExpire();
+  };
+
+  _proto.handleError = function handleError(event) {
+    var onError = this.props.onError;
+    var captchaId = this.state.captchaId;
+
+    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;
+    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;
+
+    if (!this.isReady()) {
+      return;
+    }
+
+    if (opts && typeof opts !== "object") {
+      opts = null;
+    }
+
+    return hcaptcha.execute(captchaId, opts);
+  };
+
+  _proto.setData = function setData(data) {
+    var captchaId = this.state.captchaId;
+
+    if (!this.isReady()) {
+      return;
+    }
+
+    if (data && typeof data !== "object") {
+      data = null;
+    }
+
+    hcaptcha.setData(captchaId, data);
+  };
+
+  _proto.getResponse = function getResponse() {
+    return hcaptcha.getResponse(this.state.captchaId);
+  };
+
+  _proto.getRespKey = function getRespKey() {
+    return hcaptcha.getRespKey(this.state.captchaId);
+  };
+
+  _proto.render = function render() {
+    var elementId = this.state.elementId;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: this.ref,
+      id: elementId
+    });
+  };
+
+  return HCaptcha;
+}(React.Component);
+
+export default HCaptcha;

package/dist/esm/utils.js

@@ -0,0 +1,14 @@
+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("&");
+}
+
+;
+export { generateQuery };

package/dist/index.js

@@ -31,30 +31,41 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-// Create script to init hCaptcha
-var onLoadListeners = [];
-var apiScriptRequested = false; // Generate hCaptcha API Script
+var SCRIPT_ID = 'hcaptcha-api-script-id';
+var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
+
+var resolveFn;
+var rejectFn;
+var mountPromise = new Promise(function (resolve, reject) {
+  resolveFn = resolve;
+  rejectFn = reject;
+}); // Generate hCaptcha API script
 
 var mountCaptchaScript = function mountCaptchaScript() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  apiScriptRequested = true; // Create global onload callback
-
-  window.hcaptchaOnLoad = function () {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(function (listener) {
-      listener();
-      return false;
-    });
-  };
 
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  } // Create global onload callback
+
+
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
   var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
   var script = document.createElement("script");
-  script.src = "".concat(domain, "/1/api.js?render=explicit&onload=hcaptchaOnLoad");
+  script.id = SCRIPT_ID;
+  script.src = "".concat(domain, "/1/api.js?render=explicit&onload=").concat(HCAPTCHA_LOAD_FN_NAME);
   script.async = true;
+
+  script.onerror = function (event) {
+    return rejectFn('script-error');
+  };
+
   var query = (0, _utils.generateQuery)(params);
   script.src += query !== "" ? "&".concat(query) : "";
   document.head.appendChild(script);
+  return mountPromise;
 };
 
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
@@ -73,6 +84,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _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));
     _this.handleExpire = _this.handleExpire.bind((0, _assertThisInitialized2["default"])(_this));
@@ -82,6 +94,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
     var isApiReady = typeof hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
     _this.state = {
       isApiReady: isApiReady,
       isRemoved: false,
@@ -94,44 +107,20 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      //Once captcha is mounted intialize hCaptcha - hCaptcha
-      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;
+      // Once captcha is mounted intialize hCaptcha - hCaptcha
       var isApiReady = this.state.isApiReady;
+      /*
+       * 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) {
-        //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        if (apiScriptRequested) {
-          return;
-        } // Only create the script tag once, use a global variable to track
-
-
-        mountCaptchaScript({
-          apihost: apihost,
-          assethost: assethost,
-          endpoint: endpoint,
-          hl: hl,
-          host: host,
-          imghost: imghost,
-          recaptchacompat: reCaptchaCompat === false ? "off" : null,
-          reportapi: reportapi,
-          sentry: sentry,
-          custom: custom
-        }); // Add onload callback to global onload listeners
-
-        onLoadListeners.push(this.handleOnLoad);
-      } else {
+      if (isApiReady) {
         this.renderCaptcha();
+        return;
       }
+
+      this.loadCaptcha();
     }
   }, {
     key: "componentWillUnmount",
@@ -174,6 +163,39 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "loadCaptcha",
+    value: 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;
+      var mountParams = {
+        apihost: apihost,
+        assethost: assethost,
+        endpoint: endpoint,
+        hl: hl,
+        host: host,
+        imghost: imghost,
+        recaptchacompat: reCaptchaCompat === false ? "off" : null,
+        reportapi: reportapi,
+        sentry: sentry,
+        custom: custom
+      };
+      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+      this.apiScriptRequested = true;
+    }
   }, {
     key: "renderCaptcha",
     value: function renderCaptcha(onReady) {
@@ -277,12 +299,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onError = this.props.onError;
       var captchaId = this.state.captchaId;
 
-      if (!this.isReady()) {
-        return;
+      if (this.isReady()) {
+        // If hCaptcha runs into error, reset captcha - hCaptcha
+        hcaptcha.reset(captchaId);
       }
 
-      hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
-
       if (onError) onError(event);
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -18,7 +18,7 @@
     "prebuild": "rimraf dist",
     "build": "npm run transpile && npm run build:esm",
     "build:esm": "cross-env BABEL_ENV=esm babel src -d dist/esm --copy-files",
-    "prepublishOnly": "npm run transpile"
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",

package/src/index.js

@@ -1,34 +1,42 @@
 import * as React from 'react';
 import { generateQuery } from "./utils.js";
 
- // Create script to init hCaptcha
-let onLoadListeners = [];
-let apiScriptRequested = false;
-
-// Generate hCaptcha API Script
+const SCRIPT_ID = 'hcaptcha-api-script-id';
+const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
+
+// Prevent loading API script multiple times
+let resolveFn;
+let rejectFn;
+const mountPromise = new Promise((resolve, reject) => {
+  resolveFn = resolve;
+  rejectFn = reject;
+});
+
+// Generate hCaptcha API script
 const mountCaptchaScript = (params={}) => {
-  apiScriptRequested = true;
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  }
+
   // Create global onload callback
-  window.hcaptchaOnLoad = () => {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(listener => {
-      listener();
-      return false;
-    });
-  };
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
 
   const domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
 
   const script = document.createElement("script");
-  script.src = `${domain}/1/api.js?render=explicit&onload=hcaptchaOnLoad`;
+  script.id = SCRIPT_ID;
+  script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
   script.async = true;
+  script.onerror = (event) => rejectFn('script-error');
 
   const query = generateQuery(params);
   script.src += query !== ""? `&${query}` : "";
 
   document.head.appendChild(script);
-}
+  return mountPromise;
+};
 
 
 class HCaptcha extends React.Component {
@@ -42,6 +50,7 @@ class HCaptcha extends React.Component {
       this.isReady = this.isReady.bind(this);
 
       // Event Handlers
+      this.loadCaptcha = this.loadCaptcha.bind(this);
       this.handleOnLoad = this.handleOnLoad.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleExpire = this.handleExpire.bind(this);
@@ -53,6 +62,7 @@ class HCaptcha extends React.Component {
       const isApiReady = typeof hcaptcha !== 'undefined';
 
       this.ref = React.createRef();
+      this.apiScriptRequested = false;
 
       this.state = {
         isApiReady,
@@ -62,46 +72,33 @@ class HCaptcha extends React.Component {
       }
     }
 
-    componentDidMount () { //Once captcha is mounted intialize hCaptcha - hCaptcha
-      const { apihost, assethost, endpoint, host, imghost, languageOverride:hl, reCaptchaCompat, reportapi, sentry, custom } = this.props;
+    componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
       const { isApiReady } = this.state;
 
-      if (!isApiReady) {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        if (apiScriptRequested) {
-          return;
-        }
-
-        // Only create the script tag once, use a global variable to track
-        mountCaptchaScript({
-          apihost,
-          assethost,
-          endpoint,
-          hl,
-          host,
-          imghost,
-          recaptchacompat: reCaptchaCompat === false? "off" : null,
-          reportapi,
-          sentry,
-          custom
-        });
-
-        // Add onload callback to global onload listeners
-        onLoadListeners.push(this.handleOnLoad);
-      } else {
+      /*
+       * 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.renderCaptcha();
+
+        return;
       }
+
+      this.loadCaptcha();
     }
 
     componentWillUnmount() {
-        const { captchaId } = this.state;
+      const { captchaId } = this.state;
 
-        if (!this.isReady()) {
-          return;
-        }
+      if (!this.isReady()) {
+        return;
+      }
 
-        // Reset any stored variables / timers when unmounting
-        hcaptcha.reset(captchaId);
-        hcaptcha.remove(captchaId);
+      // Reset any stored variables / timers when unmounting
+      hcaptcha.reset(captchaId);
+      hcaptcha.remove(captchaId);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -127,6 +124,42 @@ class HCaptcha extends React.Component {
       }
     }
 
+    loadCaptcha() {
+      if (this.apiScriptRequested) {
+        return;
+      }
+
+      const {
+        apihost,
+        assethost,
+        endpoint,
+        host,
+        imghost,
+        languageOverride: hl,
+        reCaptchaCompat,
+        reportapi,
+        sentry,
+        custom
+      } = this.props;
+      const mountParams = {
+        apihost,
+        assethost,
+        endpoint,
+        hl,
+        host,
+        imghost,
+        recaptchacompat: reCaptchaCompat === false? "off" : null,
+        reportapi,
+        sentry,
+        custom
+      };
+
+      mountCaptchaScript(mountParams)
+        .then(this.handleOnLoad)
+        .catch(this.handleError);
+      this.apiScriptRequested = true;
+    }
+
     renderCaptcha(onReady) {
       const { isApiReady } = this.state;
       if (!isApiReady) return;
@@ -214,11 +247,11 @@ class HCaptcha extends React.Component {
       const { onError } = this.props;
       const { captchaId } = this.state;
 
-      if (!this.isReady()) {
-        return;
+      if (this.isReady()) {
+        // If hCaptcha runs into error, reset captcha - hCaptcha
+        hcaptcha.reset(captchaId);
       }
 
-      hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
       if (onError) onError(event);
     }