@hcaptcha/react-hcaptcha 1.7.0 → 1.8.1

package/dist/esm/index.js

@@ -1,49 +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 = {};
   }
 
-  var parent = params.scriptLocation || document.head;
+  var element = getMountElement(params.scriptLocation);
   delete params.scriptLocation;
-  var doc = parent.ownerDocument || document;
+  var frame = getFrame(element);
+  var script = scripts.find(function (_ref) {
+    var scope = _ref.scope;
+    return scope === frame.window;
+  });
 
-  if (doc.getElementById(SCRIPT_ID)) {
+  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 = doc.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;
+    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 : "";
-  parent.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) {
@@ -52,7 +57,15 @@ 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;
+    /**
+     * 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; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
@@ -67,11 +80,10 @@ 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';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
@@ -82,8 +94,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   var _proto = HCaptcha.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
     // Once captcha is mounted intialize hCaptcha - hCaptcha
-    var isApiReady = this.state.isApiReady;
+    var element = getMountElement(this.props.scriptLocation);
+    var frame = getFrame(element);
+    this._hcaptcha = frame.window.hcaptcha || undefined;
+    var isApiReady = typeof this._hcaptcha !== 'undefined';
     /*
      * Check if hCaptcha has already been loaded,
      * If Yes, render the captcha
@@ -91,7 +108,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
      */
 
     if (isApiReady) {
-      this.renderCaptcha();
+      this.setState({
+        isApiReady: true
+      }, function () {
+        _this2.renderCaptcha();
+      });
       return;
     }
 
@@ -100,6 +121,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -120,18 +142,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this2 = this;
+    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 match = keys.every(function (key) {
-      return prevProps[key] === _this2.props[key];
+      return prevProps[key] === _this3.props[key];
     }); // If they have changed, remove current captcha and render a new one
 
     if (!match) {
       this.removeCaptcha(function () {
-        _this2.renderCaptcha();
+        _this3.renderCaptcha();
       });
     }
   };
@@ -185,7 +207,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({
@@ -198,6 +221,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.resetCaptcha = function resetCaptcha() {
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -209,6 +233,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;
@@ -223,15 +248,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this3 = this;
+    var _this4 = this;
 
     this.setState({
       isApiReady: true
     }, function () {
-      // render captcha and wait for captcha id
-      _this3.renderCaptcha(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 = _this3.props.onLoad;
+        var onLoad = _this4.props.onLoad;
         if (onLoad) onLoad();
       });
     });
@@ -242,6 +270,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
 
@@ -253,6 +282,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;
@@ -266,6 +296,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
@@ -312,6 +343,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
 
     var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
 
     if (!this.isReady()) {
       return;
@@ -326,6 +358,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;
@@ -339,10 +372,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 || window;
+  return {
+    document: doc,
+    window: win
+  };
+}
+
+function getMountElement(element) {
+  return element || document.head;
+}
+
+export { generateQuery, getFrame, getMountElement };

package/dist/index.js

@@ -34,42 +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] : {};
-  var parent = params.scriptLocation || document.head;
+  var element = (0, _utils.getMountElement)(params.scriptLocation);
   delete params.scriptLocation;
-  var doc = parent.ownerDocument || document;
+  var frame = (0, _utils.getFrame)(element);
+  var script = scripts.find(function (_ref) {
+    var scope = _ref.scope;
+    return scope === frame.window;
+  });
 
-  if (doc.getElementById(SCRIPT_ID)) {
+  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 = doc.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) : "";
-  parent.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) {
@@ -81,7 +86,15 @@ 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);
+    /**
+     * 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; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
@@ -96,11 +109,10 @@ 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';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
@@ -111,8 +123,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       // Once captcha is mounted intialize hCaptcha - hCaptcha
-      var isApiReady = this.state.isApiReady;
+      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';
       /*
        * Check if hCaptcha has already been loaded,
        * If Yes, render the captcha
@@ -120,7 +137,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
        */
 
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState({
+          isApiReady: true
+        }, function () {
+          _this2.renderCaptcha();
+        });
         return;
       }
 
@@ -130,6 +151,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;
@@ -152,18 +174,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
+      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 match = keys.every(function (key) {
-        return prevProps[key] === _this2.props[key];
+        return prevProps[key] === _this3.props[key];
       }); // If they have changed, remove current captcha and render a new one
 
       if (!match) {
         this.removeCaptcha(function () {
-          _this2.renderCaptcha();
+          _this3.renderCaptcha();
         });
       }
     }
@@ -219,7 +241,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({
@@ -233,6 +256,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;
@@ -245,6 +269,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,15 +285,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
-      var _this3 = this;
+      var _this4 = this;
 
       this.setState({
         isApiReady: true
       }, function () {
-        // render captcha and wait for captcha id
-        _this3.renderCaptcha(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 = _this3.props.onLoad;
+          var onLoad = _this4.props.onLoad;
           if (onLoad) onLoad();
         });
       });
@@ -280,6 +308,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
 
@@ -292,6 +321,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;
@@ -306,6 +336,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
@@ -354,6 +385,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;
@@ -369,6 +401,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;
@@ -383,11 +416,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 || window;
+  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.7.0",
+  "version": "1.8.1",
   "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,49 +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={}) => {
-  const parent = params.scriptLocation || document.head;
+const mountCaptchaScript = (params = {}) => {
+  const element = getMountElement(params.scriptLocation);
   delete params.scriptLocation;
 
-  const doc = parent.ownerDocument || document;
+  const frame = getFrame(element);
+  const script = scripts.find(({ scope }) => scope === frame.window);
 
-  if (doc.getElementById(SCRIPT_ID)) {
+  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 = doc.createElement("script");
-  script.id = SCRIPT_ID;
-  script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
+    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.async = params.loadAsync !== undefined? params.loadAsync : true;
+    delete params.loadAsync;
 
-  script.onerror = (event) => rejectFn('script-error');
+    script.onerror = (event) => reject('script-error');
 
-  const query = generateQuery(params);
-  script.src += query !== ""? `&${query}` : "";
+    const query = generateQuery(params);
+    script.src += query !== ""? `&${query}` : "";
 
-  parent.appendChild(script);
-  return mountPromise;
+    element.appendChild(script);
+  });
+
+  scripts.push({ promise, scope: frame.window });
+
+  return promise;
 };
 
 
@@ -51,6 +52,14 @@ class HCaptcha extends React.Component {
     constructor (props) {
       super(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;
+
       // API Methods
       this.renderCaptcha = this.renderCaptcha.bind(this);
       this.resetCaptcha  = this.resetCaptcha.bind(this);
@@ -67,13 +76,11 @@ class HCaptcha extends React.Component {
       this.handleClose = this.handleClose.bind(this);
       this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
 
-      const isApiReady = typeof hcaptcha !== 'undefined';
-
       this.ref = React.createRef();
       this.apiScriptRequested = false;
 
       this.state = {
-        isApiReady,
+        isApiReady: false,
         isRemoved: false,
         elementId: props.id,
         captchaId: ''
@@ -81,7 +88,11 @@ class HCaptcha extends React.Component {
     }
 
     componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
-      const { isApiReady } = this.state;
+      const element = getMountElement(this.props.scriptLocation);
+      const frame = getFrame(element);
+      this._hcaptcha = frame.window.hcaptcha || undefined;
+
+      const isApiReady = typeof this._hcaptcha !== 'undefined';
 
       /*
        * Check if hCaptcha has already been loaded,
@@ -89,7 +100,14 @@ class HCaptcha extends React.Component {
        * If No, create script tag and wait to render the captcha
        */
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState(
+          {
+            isApiReady: true
+          },
+          () => {
+            this.renderCaptcha();
+          }
+        );
 
         return;
       }
@@ -99,6 +117,7 @@ class HCaptcha extends React.Component {
 
     componentWillUnmount() {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -163,7 +182,7 @@ class HCaptcha extends React.Component {
         sentry,
         custom,
         loadAsync,
-        scriptLocation
+        scriptLocation,
       };
 
       mountCaptchaScript(mountParams)
@@ -188,6 +207,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);
 
@@ -198,6 +218,7 @@ class HCaptcha extends React.Component {
 
     resetCaptcha() {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -208,6 +229,7 @@ class HCaptcha extends React.Component {
 
     removeCaptcha(callback) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -221,6 +243,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(() => {
@@ -234,6 +260,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
 
@@ -245,6 +272,7 @@ class HCaptcha extends React.Component {
     handleExpire () {
       const { onExpire } = this.props;
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -258,6 +286,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
@@ -299,6 +328,7 @@ class HCaptcha extends React.Component {
 
     execute (opts = null) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -313,6 +343,7 @@ class HCaptcha extends React.Component {
 
     setData (data) {
       const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
 
       if (!this.isReady()) {
         return;
@@ -326,10 +357,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

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