Request reCAPTCHA token from api only when user submits form...

README.md

@@ -53,6 +53,19 @@ Recaptcha v3 works best when it is loaded on every page to get the most context
 
 ```
 
+Please note if the user is on the page for too long, when they submit the form, there will be a timeout and the reCAPTCHA will not validate.
+
+To get around this please use the following code:
+```
+<form id="my-form" method="post" action="/register">
+    {!! RecaptchaV3::field('register') !!}
+    {!! RecaptchaV3::field('register', 'g-recaptcha-response', true, 'my-form') !!}
+    <input type="submit" value="Register"></input>
+</form>
+```
+
+In this case the request to get the reCAPTCHA token will be made when the user submits the form, avoiding the timeout.
+
 #### Validation
 
 Add the `recaptchav3` validator to the rules array. The rule accepts two parameters: The `action` name and the minimum required `score` (defaults to 0.5).

src/RecaptchaV3.php

@@ -111,22 +111,44 @@ public function initJs()
     }
 
 
-    /**
-     * @param $action
-     */
-    public function field($action, $name = 'g-recaptcha-response')
-    {
-        $fieldId = uniqid($name . '-', false);
-        $html = '<input type="hidden" name="' . $name . '" id="' . $fieldId . '">';
-        $html .= "<script>
-  grecaptcha.ready(function() {
-      grecaptcha.execute('" . $this->sitekey . "', {action: '" . $action . "'}).then(function(token) {
-         document.getElementById('" . $fieldId . "').value = token;
-      });
-  });
-  </script>";
-        return $html;
-    }
+	/**
+	* Create the field for recaptcha response, if the $requestOnSubmit is false the token is requested on the page
+	* load can cause error if the user take more than 2 minutes to submit the form because the token
+	* have a 2minutes timeout, the other option its a better approach
+	* @param $action
+	* @param $name
+	* @param $requestOnSubmit boolean if true the script will only call the api on form submit
+	* @param $formId the form id is required if the $requestOnSubmit is true
+	* @param $functionName for default the value is onClickRecaptcha and the onclick="onClickRecaptcha(event)" shoud be added on submit button
+	* @return string
+	*/
+	public function field($action, $name = 'g-recaptcha-response', $requestOnSubmit=false, $formId=null, $functionName="onClickRecaptcha")
+	{
+		$fieldId = uniqid($name . '-', false);
+		$html = '<input type="hidden" name="' . $name . '" id="' . $fieldId . '">';
+		if ($requestOnSubmit == false){
+			$html .= "<script>
+			  grecaptcha.ready(function() {
+				  grecaptcha.execute('" . $this->sitekey . "', {action: '" . $action . "'}).then(function(token) {
+					 document.getElementById('" . $fieldId . "').value = token;
+				  });
+			  });
+			  </script>";
+		}else{
+			$html .= "<script>
+			function " . $functionName . "(e) {
+				e.preventDefault();
+				grecaptcha.ready(function() {
+				  grecaptcha.execute('" . $this->sitekey . "', {action: '" . $action . "'}).then(function(token) {
+					 document.getElementById('" . $fieldId . "').value = token;
+					 document.getElementById('" . $formId . "').submit();
+				  });
+				});
+			}
+		</script>";
+		}
+		return $html;
+	}
 
 
 }