Lit

import { ReCaptcha } from "@better-captcha/lit/provider/recaptcha";

// The component is automatically registered as a custom element

<recaptcha-captcha sitekey="your-site-key"></recaptcha-captcha>

import { ReCaptcha } from "@better-captcha/lit/provider/recaptcha";

const captcha = document.querySelector('recaptcha-captcha');
const handle = captcha.getHandle();

// Execute the captcha
handle.execute();

// Reset the captcha
handle.reset();

// Get the response token
const response = handle.getResponse();
console.log(response);

import { ReCaptcha } from "@better-captcha/lit/provider/recaptcha";

const captcha = document.querySelector('recaptcha-captcha') as ReCaptcha;

captcha.onReady = (handle) => {
  console.log("Captcha is ready", handle);
};

captcha.onSolve = (token: string) => {
  console.log("Captcha solved with token:", token);
  // Send token to your backend for verification
};

captcha.onError = (error: Error | string) => {
  console.error("Captcha error:", error);
};

const captcha = document.querySelector('recaptcha-captcha');

captcha.addEventListener('ready', (e) => {
  console.log("Captcha ready", e.detail);
});

captcha.addEventListener('solve', (e) => {
  console.log("Captcha solved", e.detail.token);
});

captcha.addEventListener('error', (e) => {
  console.error("Captcha error", e.detail.error);
});

<!-- Via attributes (for simple values) -->
<recaptcha-captcha sitekey="your-site-key"></recaptcha-captcha>

// Via properties (for complex objects)
const captcha = document.querySelector('recaptcha-captcha');
captcha.options = { theme: 'dark', size: 'compact' };
captcha.scriptOptions = { autoLoad: false, timeout: 30000 };

<recaptcha-captcha sitekey="your-site-key" autoRender="false"></recaptcha-captcha>
<button onclick="showCaptcha()">Show Captcha</button>

const captcha = document.querySelector('recaptcha-captcha');
const handle = captcha.getHandle();

function showCaptcha() {
  handle.render();
}