Implement async hcaptcha execute

.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     "@babel/env",
     "@babel/react"
-  ]
+  ],
+  "plugins": [["@babel/transform-runtime", {
+    "regenerator": true
+  }]]
 }

README.md

@@ -86,7 +86,7 @@ In these instances, you'll most likely want to use `ref` to handle the callbacks
 
 |Method|Description|
 |---|---|
-|`execute()`|Programmatically trigger a challenge request|
+|`execute()`|Programmatically trigger a challenge request. Additionally, this method can be run asynchronously and returns a promise with the `token` and `eKey` when the challenge is completed.|
 |`resetCaptcha()`|Reset the current challenge|
 
 

examples/src/index.js

@@ -1,13 +1,39 @@
+const { useRef } = require('react');
 const React = require('react');
 const {render} = require('react-dom');
 const HCaptcha = require('../../dist/');
 
+const AsyncDemo = () => {
+  const captchaRef = useRef();
+
+  const executeCaptcha = async () => {
+    try {
+      const res = await captchaRef.current.execute();
+      console.log("Verified asynchronously: ", res);
+
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <div>
+      <HCaptcha ref={captchaRef}
+        sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
+        theme="light"
+        onVerify={() => undefined}
+      />
+      <button onClick={executeCaptcha}>Execute asynchronously</button>
+    </div>
+  );
+}
+
 class ReactDemo extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {isVerified: false};
+    this.state = {isVerified: false, async: false};
     this.captcha = React.createRef();
 
     this.handleChange = this.handleChange.bind(this);
@@ -46,35 +72,49 @@ class ReactDemo extends React.Component {
         <p>
           Set your sitekey and onVerify callback as props, and drop into your form. From here, we'll take care of the rest.
         </p>
-        <div>
-          <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
-          sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
-          theme="light"
-          />
-        </div>
-
-        <div>
-          <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
-          sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
-          theme="dark"
-          />
-        </div>
-
-        <div>
-          <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
-          sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
-          size="compact"
-          theme="dark"
-          />
+        <div style={{marginBottom: 10}}>
+          <label>
+            <input type="radio" name="behavior" checked={!this.state.async} onChange={() => this.setState({ async: false })}></input>
+            Normal
+          </label>
+          <label>
+            <input type="radio" name="behavior" checked={this.state.async} onChange={() => this.setState({ async: true })}></input>
+            Asynchronous
+          </label>
         </div>
+        {!this.state.async ? (
+          <>
+            <div>
+            <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
+            sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
+            theme="light"
+            />
+            </div>
 
-        {isVerified &&
-          <div>
-            <p>Open your console to see the Verified response.</p>
-            <button onClick={this.handleReset}>Reset Captcha</button>
-          </div>
-        }
+            <div>
+              <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
+              sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
+              theme="dark"
+              />
+            </div>
 
+            <div>
+              <HCaptcha ref={this.captcha} onVerify={this.onVerifyCaptcha} languageOverride={this.languageOverride}
+              sitekey="917ba1eb-0b37-486e-9c90-39f3cb7b2579"
+              size="compact"
+              theme="dark"
+              />
+            </div>
+            {isVerified &&
+              <div>
+                <p>Open your console to see the Verified response.</p>
+                <button onClick={this.handleReset}>Reset Captcha</button>
+              </div>
+            }
+          </>
+        ) : (
+          <AsyncDemo />
+        )}
       </div>
     );
   }
@@ -83,7 +123,7 @@ class ReactDemo extends React.Component {
 render(
   <div>
     <h1>HCaptcha React Demo</h1>
-    <ReactDemo/>
+    <ReactDemo />
   </div>,
   document.getElementById('app')
 );