Basic integration using vanilla JavaScript. For framework-specific integrations, see the other guides.
Widget Setup#
Add the widget to your HTML:
<form id="myForm" action="/submit" method="POST">
<input type="text" name="name" placeholder="Name" />
<div class="captcha-widget" data-sitekey="YOUR_SITE_KEY"></div>
<button type="submit">Submit</button>
</form>
<script src="https://challenge.captchacat.com/ray/widget.js"></script>The widget automatically:
- Renders a CAPTCHA in the
captcha-widgetdiv - Adds a hidden
captchacat-tokenfield to the form when solved
Manual Rendering#
For dynamic forms or SPAs, use the JavaScript API:
// Render the widget manually
window.Captchacat.render(document.getElementById('captcha-container'));Token Callback#
To handle the token programmatically, use a callback:
<div
class="captcha-widget"
data-sitekey="YOUR_SITE_KEY"
data-token-callback="onCaptchaVerified"
></div>
<script>
function onCaptchaVerified(token) {
console.log('Token received:', token);
// Send token to your server
}
</script>Server Validation#
Validate the token on your server:
// Node.js example
app.post('/submit', async (req, res) => {
const token = req.body['captchacat-token'];
const response = await fetch('https://challenge.captchacat.com/validate_token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
api_key: process.env.CAPTCHA_CAT_API_KEY,
token: token
})
});
if (response.ok) {
// Valid - process the form
res.send('Success!');
} else {
// Invalid
res.status(400).send('CAPTCHA verification failed');
}
});