@hcaptcha/react-hcaptcha 1.6.0 → 1.7.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

@@ -17,7 +17,11 @@ var mountCaptchaScript = function mountCaptchaScript(params) {
     params = {};
   }
 
-  if (document.getElementById(SCRIPT_ID)) {
+  var parent = params.scriptLocation || document.head;
+  delete params.scriptLocation;
+  var doc = parent.ownerDocument || document;
+
+  if (doc.getElementById(SCRIPT_ID)) {
     // API was already requested
     return mountPromise;
   } // Create global onload callback
@@ -26,7 +30,7 @@ var mountCaptchaScript = function mountCaptchaScript(params) {
   window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
   var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
-  var script = document.createElement("script");
+  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;
@@ -38,7 +42,7 @@ var mountCaptchaScript = function mountCaptchaScript(params) {
 
   var query = generateQuery(params);
   script.src += query !== "" ? "&" + query : "";
-  document.head.appendChild(script);
+  parent.appendChild(script);
   return mountPromise;
 };
 
@@ -148,7 +152,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 +165,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;
@@ -241,7 +247,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
     var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
 
-    onVerify(token, ekey); //Dispatch event to verify user response
+    if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
   };
 
   _proto.handleExpire = function handleExpire() {

package/dist/index.js

@@ -43,8 +43,11 @@ var mountPromise = new Promise(function (resolve, reject) {
 
 var mountCaptchaScript = function mountCaptchaScript() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var parent = params.scriptLocation || document.head;
+  delete params.scriptLocation;
+  var doc = parent.ownerDocument || document;
 
-  if (document.getElementById(SCRIPT_ID)) {
+  if (doc.getElementById(SCRIPT_ID)) {
     // API was already requested
     return mountPromise;
   } // Create global onload callback
@@ -53,7 +56,7 @@ var mountCaptchaScript = function mountCaptchaScript() {
   window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
   var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
-  var script = document.createElement("script");
+  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;
@@ -65,7 +68,7 @@ var mountCaptchaScript = function mountCaptchaScript() {
 
   var query = (0, _utils.generateQuery)(params);
   script.src += query !== "" ? "&".concat(query) : "";
-  document.head.appendChild(script);
+  parent.appendChild(script);
   return mountPromise;
 };
 
@@ -182,7 +185,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 +198,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;
@@ -280,7 +285,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
       var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
 
-      onVerify(token, ekey); //Dispatch event to verify user response
+      if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
     }
   }, {
     key: "handleExpire",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

package/src/index.js

@@ -14,7 +14,12 @@ const mountPromise = new Promise((resolve, reject) => {
 
 // Generate hCaptcha API script
 const mountCaptchaScript = (params={}) => {
-  if (document.getElementById(SCRIPT_ID)) {
+  const parent = params.scriptLocation || document.head;
+  delete params.scriptLocation;
+
+  const doc = parent.ownerDocument || document;
+
+  if (doc.getElementById(SCRIPT_ID)) {
     // API was already requested
     return mountPromise;
   }
@@ -25,7 +30,7 @@ const mountCaptchaScript = (params={}) => {
   const domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
 
-  const script = document.createElement("script");
+  const script = doc.createElement("script");
   script.id = SCRIPT_ID;
   script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
 
@@ -37,7 +42,7 @@ const mountCaptchaScript = (params={}) => {
   const query = generateQuery(params);
   script.src += query !== ""? `&${query}` : "";
 
-  document.head.appendChild(script);
+  parent.appendChild(script);
   return mountPromise;
 };
 
@@ -143,7 +148,8 @@ class HCaptcha extends React.Component {
         reportapi,
         sentry,
         custom,
-        loadAsync
+        loadAsync,
+        scriptLocation
       } = this.props;
       const mountParams = {
         apihost,
@@ -156,7 +162,8 @@ class HCaptcha extends React.Component {
         reportapi,
         sentry,
         custom,
-        loadAsync
+        loadAsync,
+        scriptLocation
       };
 
       mountCaptchaScript(mountParams)
@@ -232,7 +239,7 @@ class HCaptcha extends React.Component {
 
       const token = hcaptcha.getResponse(captchaId) //Get response token from hCaptcha widget
       const ekey  = hcaptcha.getRespKey(captchaId)  //Get current challenge session id from hCaptcha widget
-      onVerify(token, ekey) //Dispatch event to verify user response
+      if (onVerify) onVerify(token, ekey) //Dispatch event to verify user response
     }
 
     handleExpire () {

package/types/index.d.ts

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