Other SPA Frameworks

For frameworks without a dedicated package (SolidJS, etc.), use loadEuCaptcha() from @myrasec/eu-captcha to load the widget script programmatically.

Note: Svelte now has a dedicated package — see Svelte.

Package	Version
@myrasec/eu-captcha	1.0.0

Server-side verification is identical regardless of frontend framework — see Server-Side Verification.

---

Installation

npm i @myrasec/eu-captcha

Usage

Call loadEuCaptcha() once when your application initialises:

import { loadEuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha";

loadEuCaptcha();

Then add the widget div in your component template:

<div class="eu-captcha" data-sitekey="EUCAPTCHA_SITE_KEY"></div>

The verify.js script is enqueued globally after loadEuCaptcha() runs, so no additional script tag is needed in your template.

Checking completion before submit

Use isEuCaptchaDone() in your submit handler:

import { isEuCaptchaDone } from "@myrasec/eu-captcha";

function handleSubmit() {
  if (!isEuCaptchaDone()) {
    // challenge not yet complete
    return;
  }

  // proceed with form submission
}

Listening for completion

Listen for the euCaptchaDone window message and clean up the listener when the component is destroyed:

function listenForCaptchaDone(msg) {
  if (msg.data.type === "euCaptchaDone") {
    // enable submit button, update state, etc.
  }
}

window.addEventListener("message", listenForCaptchaDone, false);

// In your framework's cleanup / onDestroy hook:
// window.removeEventListener("message", listenForCaptchaDone, false);

Retrieving the token

Once complete, the widget injects a hidden input into the surrounding <form>:

<input type="hidden" name="eu-captcha-response" value="<token>" />

If you are submitting via fetch or axios, read the token from the DOM:

const token = document.querySelector('input[name="eu-captcha-response"]')?.value ?? "";

Pass it to your server endpoint and verify it with the verification API.