HCaptcha
Privacy-focused CAPTCHA service with monetization opportunities
About HCaptcha
hCaptcha is a privacy-focused CAPTCHA service that protects your site from bots while offering both interactive and passive verification modes to balance security with user experience.
For more information, visit the official hCaptcha documentation.
Showcase
Usage
import { HCaptcha } from "@better-captcha/react/provider/hcaptcha";
<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />import { component$ } from "@builder.io/qwik";
import { HCaptcha } from "@better-captcha/qwik/provider/hcaptcha";
export default component$(() => (
<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />
));import { HCaptcha } from "@better-captcha/solidjs/provider/hcaptcha";
<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} /> <template>
<HCaptcha
sitekey="10000000-ffff-ffff-ffff-000000000001"
:options="{ theme: 'dark' }"
/>
</template>
<script setup lang="ts">
import { HCaptcha } from "@better-captcha/vue/provider/hcaptcha";
</script><script lang="ts">
import HCaptcha from "@better-captcha/svelte/provider/hcaptcha";
</script>
<HCaptcha sitekey="10000000-ffff-ffff-ffff-000000000001" options={{}} />import { HCaptcha } from "@better-captcha/lit/provider/hcaptcha";<hcaptcha-captcha sitekey="10000000-ffff-ffff-ffff-000000000001"></hcaptcha-captcha>Configuration
Provider Options
Prop
Type
Imperative Handle
Prop
Type
Testing
hCaptcha provides test keys for development:
| Type | Site Key |
|---|---|
| Always Passes | 10000000-ffff-ffff-ffff-000000000001 |
| Always Fails | 20000000-ffff-ffff-ffff-000000000002 |
Test keys are designed for development and automated testing. Replace with real keys for production use.
Best Practices
- Privacy Compliance: hCaptcha is designed with privacy in mind and is GDPR/CCPA compliant by default
- Monetization: Consider enabling monetization in your dashboard to earn from CAPTCHA solves
- Difficulty Levels: Adjust difficulty based on your security needs vs. user experience
- Passive Mode: Use passive mode for lower-risk scenarios to improve UX
- Auto Theme: Use
theme: "auto"to match your site's color scheme automatically