@hcaptcha/react-hcaptcha 1.6.1 → 1.8.0

package/README.md

@@ -139,7 +139,8 @@ return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} /
 |`reportapi`|String|No|`-`|See enterprise docs.|
 |`sentry`|String|No|`-`|See enterprise docs.|
 |`custom`|Boolean|No|`-`|See enterprise docs.|
-|`loadAsync`|Boolean|No|`true`|Set if the script should be loaded asynchronously|
+|`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.|
 
 #### Events
 

package/dist/esm/index.js

@@ -1,45 +1,54 @@
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
-import { generateQuery } from "./utils.js";
+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 resolveFn;
-var rejectFn;
-var mountPromise = new Promise(function (resolve, reject) {
-  resolveFn = resolve;
-  rejectFn = reject;
-}); // Generate hCaptcha API script
+var scripts = []; // 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
-
+  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;
+  });
 
-  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 = params.loadAsync !== undefined ? params.loadAsync : true;
-  delete params.loadAsync;
+  if (frame.document.getElementById(SCRIPT_ID) && script) {
+    // API was already requested
+    return script.promise;
+  }
 
-  script.onerror = function (event) {
-    return rejectFn('script-error');
-  };
+  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 : "";
-  document.head.appendChild(script);
-  return mountPromise;
+    var query = generateQuery(params);
+    script.src += query !== "" ? "&" + query : "";
+    element.appendChild(script);
+  });
+  scripts.push({
+    promise: promise,
+    scope: frame.window
+  });
+  return promise;
 };
 
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
@@ -48,7 +57,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   function HCaptcha(props) {
     var _this;
 
-    _this = _React$Component.call(this, props) || this; // API Methods
+    _this = _React$Component.call(this, props) || this;
+    var element = getMountElement(_this.props.scriptLocation);
+    var frame = getFrame(element);
+    /**
+     * 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 = frame.window.hcaptcha || undefined; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
@@ -63,7 +82,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _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';
+    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
@@ -96,6 +115,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -148,7 +168,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         reportapi = _this$props.reportapi,
         sentry = _this$props.sentry,
         custom = _this$props.custom,
-        loadAsync = _this$props.loadAsync;
+        loadAsync = _this$props.loadAsync,
+        scriptLocation = _this$props.scriptLocation;
     var mountParams = {
       apihost: apihost,
       assethost: assethost,
@@ -160,7 +181,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       reportapi: reportapi,
       sentry: sentry,
       custom: custom,
-      loadAsync: loadAsync
+      loadAsync: loadAsync,
+      scriptLocation: scriptLocation
     };
     mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
     this.apiScriptRequested = true;
@@ -179,7 +201,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }, this.props, {
       hl: this.props.hl || this.props.languageOverride,
       languageOverride: undefined
-    }); //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({
@@ -192,6 +215,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.resetCaptcha = function resetCaptcha() {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -203,6 +227,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.removeCaptcha = function removeCaptcha(callback) {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -222,7 +247,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     this.setState({
       isApiReady: true
     }, function () {
-      // render captcha and wait for captcha id
+      var element = getMountElement(_this3.props.scriptLocation);
+      var frame = getFrame(element);
+      _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
+
       _this3.renderCaptcha(function () {
         // trigger onLoad if it exists
         var onLoad = _this3.props.onLoad;
@@ -236,6 +264,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var _this$state = this.state,
         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
 
@@ -247,6 +276,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _proto.handleExpire = function handleExpire() {
     var onExpire = this.props.onExpire;
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -260,6 +290,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _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
@@ -306,6 +337,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
 
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -320,6 +352,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.setData = function setData(data) {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -333,10 +366,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
 
   _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);
   };
 

package/dist/esm/utils.js

@@ -11,4 +11,18 @@ function generateQuery(params) {
 }
 
 ;
-export { generateQuery };
+
+function getFrame(element) {
+  var doc = element && element.ownerDocument || document;
+  var win = doc.defaultView || doc.parentWindow;
+  return {
+    document: doc,
+    window: win
+  };
+}
+
+function getMountElement(element) {
+  return element || document.head;
+}
+
+export { generateQuery, getFrame, getMountElement };

package/dist/index.js

@@ -34,39 +34,47 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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 scripts = []; // Generate hCaptcha API script
 
 var mountCaptchaScript = function mountCaptchaScript() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  if (document.getElementById(SCRIPT_ID)) {
+  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 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 = "".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 rejectFn('script-error');
-  };
-
-  var query = (0, _utils.generateQuery)(params);
-  script.src += query !== "" ? "&".concat(query) : "";
-  document.head.appendChild(script);
-  return mountPromise;
+    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) {
@@ -78,7 +86,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, HCaptcha);
-    _this = _super.call(this, props); // API Methods
+    _this = _super.call(this, props);
+    var element = (0, _utils.getMountElement)(_this.props.scriptLocation);
+    var frame = (0, _utils.getFrame)(element);
+    /**
+     * 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 = frame.window.hcaptcha || undefined; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
@@ -93,7 +111,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleOpen = _this.handleOpen.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
-    var isApiReady = typeof hcaptcha !== 'undefined';
+    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
@@ -127,6 +145,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -182,7 +201,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
           reportapi = _this$props.reportapi,
           sentry = _this$props.sentry,
           custom = _this$props.custom,
-          loadAsync = _this$props.loadAsync;
+          loadAsync = _this$props.loadAsync,
+          scriptLocation = _this$props.scriptLocation;
       var mountParams = {
         apihost: apihost,
         assethost: assethost,
@@ -194,7 +214,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         reportapi: reportapi,
         sentry: sentry,
         custom: custom,
-        loadAsync: loadAsync
+        loadAsync: loadAsync,
+        scriptLocation: scriptLocation
       };
       mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
       this.apiScriptRequested = true;
@@ -214,7 +235,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       }, this.props, {
         hl: this.props.hl || this.props.languageOverride,
         languageOverride: undefined
-      }); //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({
@@ -228,6 +250,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "resetCaptcha",
     value: function resetCaptcha() {
       var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -240,6 +263,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
       var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -260,7 +284,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       this.setState({
         isApiReady: true
       }, function () {
-        // render captcha and wait for captcha id
+        var element = (0, _utils.getMountElement)(_this3.props.scriptLocation);
+        var frame = (0, _utils.getFrame)(element);
+        _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
+
         _this3.renderCaptcha(function () {
           // trigger onLoad if it exists
           var onLoad = _this3.props.onLoad;
@@ -275,6 +302,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var _this$state = this.state,
           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
 
@@ -287,6 +315,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function handleExpire() {
       var onExpire = this.props.onExpire;
       var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -301,6 +330,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: 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
@@ -349,6 +379,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     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;
@@ -364,6 +395,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "setData",
     value: function setData(data) {
       var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -378,11 +410,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getResponse",
     value: function getResponse() {
+      var hcaptcha = this._hcaptcha;
       return hcaptcha.getResponse(this.state.captchaId);
     }
   }, {
     key: "getRespKey",
     value: function getRespKey() {
+      var hcaptcha = this._hcaptcha;
       return hcaptcha.getRespKey(this.state.captchaId);
     }
   }, {

package/dist/utils.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateQuery = generateQuery;
+exports.getFrame = getFrame;
+exports.getMountElement = getMountElement;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -25,4 +27,17 @@ function generateQuery(params) {
   }).join("&");
 }
 
-;
+;
+
+function getFrame(element) {
+  var doc = element && element.ownerDocument || document;
+  var win = doc.defaultView || doc.parentWindow;
+  return {
+    document: doc,
+    window: win
+  };
+}
+
+function getMountElement(element) {
+  return element || document.head;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -11,7 +11,7 @@
   ],
   "description": "A React library for hCaptcha",
   "scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve -c ./demo/webpack.config.mjs",
     "test": "jest",
     "watch": "babel src -d dist --copy-files --watch",
     "transpile": "babel src -d dist --copy-files",

package/src/index.js

@@ -1,44 +1,50 @@
 import * as React from 'react';
-import { generateQuery } from "./utils.js";
+import { generateQuery, getFrame, getMountElement } from "./utils.js";
 
 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;
-});
+const scripts = [];
 
 // Generate hCaptcha API script
 const mountCaptchaScript = (params={}) => {
-  if (document.getElementById(SCRIPT_ID)) {
+  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 mountPromise;
+    return script.promise;
   }
 
-  // Create global onload callback
-  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
+  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 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}`;
 
-  const script = 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.async = params.loadAsync !== undefined? params.loadAsync : true;
-  delete params.loadAsync;
+    script.onerror = (event) => reject('script-error');
 
-  script.onerror = (event) => rejectFn('script-error');
+    const query = generateQuery(params);
+    script.src += query !== ""? `&${query}` : "";
 
-  const query = generateQuery(params);
-  script.src += query !== ""? `&${query}` : "";
+    element.appendChild(script);
+  });
 
-  document.head.appendChild(script);
-  return mountPromise;
+  scripts.push({ promise, scope: frame.window });
+
+  return promise;
 };
 
 
@@ -46,6 +52,17 @@ class HCaptcha extends React.Component {
     constructor (props) {
       super(props);
 
+      const element = getMountElement(this.props.scriptLocation);
+      const frame = getFrame(element);
+
+      /**
+       * 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 = frame.window.hcaptcha || undefined;
+
       // API Methods
       this.renderCaptcha = this.renderCaptcha.bind(this);
       this.resetCaptcha  = this.resetCaptcha.bind(this);
@@ -62,7 +79,8 @@ class HCaptcha extends React.Component {
       this.handleClose = this.handleClose.bind(this);
       this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
 
-      const isApiReady = typeof hcaptcha !== 'undefined';
+
+      const isApiReady = typeof this._hcaptcha !== 'undefined';
 
       this.ref = React.createRef();
       this.apiScriptRequested = false;
@@ -94,6 +112,7 @@ class HCaptcha extends React.Component {
 
     componentWillUnmount() {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -143,7 +162,8 @@ class HCaptcha extends React.Component {
         reportapi,
         sentry,
         custom,
-        loadAsync
+        loadAsync,
+        scriptLocation
       } = this.props;
       const mountParams = {
         apihost,
@@ -156,7 +176,8 @@ class HCaptcha extends React.Component {
         reportapi,
         sentry,
         custom,
-        loadAsync
+        loadAsync,
+        scriptLocation
       };
 
       mountCaptchaScript(mountParams)
@@ -181,6 +202,7 @@ class HCaptcha extends React.Component {
         languageOverride: undefined
       });
 
+      const hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
       const captchaId = hcaptcha.render(this.ref.current, renderParams);
 
@@ -191,6 +213,7 @@ class HCaptcha extends React.Component {
 
     resetCaptcha() {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -201,6 +224,7 @@ class HCaptcha extends React.Component {
 
     removeCaptcha(callback) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -214,6 +238,10 @@ class HCaptcha extends React.Component {
 
     handleOnLoad () {
       this.setState({ isApiReady: true }, () => {
+        const element = getMountElement(this.props.scriptLocation);
+        const frame = getFrame(element);
+
+        this._hcaptcha = frame.window.hcaptcha;
 
         // render captcha and wait for captcha id
         this.renderCaptcha(() => {
@@ -227,6 +255,7 @@ class HCaptcha extends React.Component {
     handleSubmit (event) {
       const { onVerify } = this.props;
       const { isRemoved, captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (typeof hcaptcha === 'undefined' || isRemoved) return
 
@@ -238,6 +267,7 @@ class HCaptcha extends React.Component {
     handleExpire () {
       const { onExpire } = this.props;
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -251,6 +281,7 @@ class HCaptcha extends React.Component {
     handleError (event) {
       const { onError } = this.props;
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (this.isReady()) {
         // If hCaptcha runs into error, reset captcha - hCaptcha
@@ -292,6 +323,7 @@ class HCaptcha extends React.Component {
 
     execute (opts = null) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -306,6 +338,7 @@ class HCaptcha extends React.Component {
 
     setData (data) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -319,10 +352,12 @@ class HCaptcha extends React.Component {
     }
 
     getResponse() {
+      const hcaptcha = this._hcaptcha;
       return hcaptcha.getResponse(this.state.captchaId);
     }
 
     getRespKey() {
+      const hcaptcha = this._hcaptcha;
       return hcaptcha.getRespKey(this.state.captchaId)
     }
 

package/src/utils.js

@@ -6,4 +6,18 @@ function generateQuery(params) {
         }).join("&");
 };
 
-export { generateQuery };
+function getFrame(element) {
+    const doc = (element && element.ownerDocument) || document;
+    const win = doc.defaultView || doc.parentWindow;
+    return { document: doc, window: win };
+}
+
+function getMountElement(element) {
+    return element || document.head;
+}
+
+export {
+    generateQuery,
+    getFrame,
+    getMountElement
+};

package/types/index.d.ts

@@ -29,6 +29,7 @@ interface HCaptchaProps {
   id?: string;
   reCaptchaCompat?: boolean;
   loadAsync?: boolean;
+  scriptLocation?: HTMLElement | null;
 }
 
 interface ExecuteResponse {