Captcha

Before you start

In order to use Captchas you must first have our JS snippet on your pages. You can learn more about the integration process by clicking below:

Also, make sure to setup your captcha first by creating it here. You can create as many captchas with different configurations as you want.

Integrating captcha

Once your captcha has been created, copy it's ID and paste it as the value for the captchaId property.

Also, make sure to replace #captcha_target - this is the node in which the captcha image will be rendered.

const captchaInstance = AlpinaJSCaptchas({
captchaId: 'YOUR_CAPTCHA_ID',
renderNode: '#captcha_target',
});
captchaInstance.render()
.then(() => {
// captcha has been rendered
window.onSubmit = () => {
const captchaInputValue = document.querySelector('#captcha_input').value;
// id could be passed to your API where you can make a call
// to our captcha verification endpoint to make sure the captcha
// has actually been solved
const { solved, id } = await captchaInstance.verify(captchaInputValue);
if (solved) {
// captcha is valid
// now you can submit the form to your API
// IMPORTANT: it's highly recommended to add verification
// in your API as well, to make sure that captcha has been solved
// You'll need to pass the `id` variable above to your API.
// take a look at our API Captcha endpoints to learn more.
} else {
// captcha has not been solved
// we will automatically generate and render a new one.
// This is where you can inform your user that they need to try again.
}
};
})
.catch(err => {
throw err;
})
;

And the HTML to along with the JS code above is as follows:

<div id="captcha_target"></div>
<input id="captcha_input" type="text" placeholder="Enter the captcha here" />
<button onclick="onSubmit()">Submit</button>