hCaptcha Component for Angular v12 and above

Usage no npm install needed!

<script type="module">
  import ngHcaptchaFork from '';


angular-hcaptcha - hCaptcha Component for Angular v12 and above

Note: This is a fork from the origin ng-hcaptcha package, because you can't use it with angular v12 and above.

ng-hcaptcha provides an easy to use component for hCaptcha.

Table of Contents


Step 1 - Install the ng-hcaptcha dependency

npm install --save ng-hcaptcha

# Yarn
yarn add ng-hcaptcha

You can use the tag 'next' to get the latest beta version.

Step 2 - Import the NgHcaptchaModule

import { NgHcaptchaModule } from 'ng-hcaptcha';

    imports: [
        // Option #1
        // Set the sitekey globally for every hCaptcha component
            siteKey: 'YOUR_SITEKEY',
            languageCode: 'de' // optional, will default to browser language

        // Option #2
        // This option requires you to set the [siteKey] property for every hCaptcha component



<!-- Regular usage -->
<ng-hcaptcha (verify)="onVerify($event)"

<!-- Usage in forms -->
<!-- The value of the form control will be the verification token -->
<form [formGroup]="formGroup" (submit)="onSubmit()">
    <ng-hcaptcha formControlName="captcha"></ng-hcaptcha>

<!-- Invisible captcha -->
<button ngHcaptchaInvisibleButton
        (error)="onError($event)">Click me</button>


onVerify(token: string) {
    // The verification process was successful.
    // You can verify the token on your server now.

onExpired(response: any) {
    // The verification expired.

onError(error: any) {
    // An error occured during the verification process.


The properties below exist for all captcha components.

siteKey Allows you to set the site key per captcha instance.

languageCode Allows you to force a specific language. See