Расширенное подключение через JavaScript API

<div id="signup-captcha"></div>

function initCaptcha() {
  let widget;

  const options = {
    // Опции виджета
  };

  widget = SPCaptcha.render("#signup-captcha", options);

  // Здесь можно подписаться на события виджета
}

SPCaptcha.render(container, options);

"#signup-captcha"

document.querySelector("#signup-captcha")

function initCaptcha() {
  const widget = SPCaptcha.render("#signup-captcha", options);
}

function initCaptcha() {
  const options = {
    siteKey: "<SITE_KEY>",
    language: "ru",
    responseField: true,
    responseFieldName: "sp-captcha-token"
  };

  const widget = SPCaptcha.render("#signup-captcha", options);
}

const options = {
  siteKey: "<SITE_KEY>",

  onExpired() {
    submitButton.disabled = true;
    status.textContent = "Пройдите проверку ещё раз.";
  }
};

function handleExpired() {
  submitButton.disabled = true;
  status.textContent = "Пройдите проверку ещё раз.";
}

const options = {
  siteKey: "<SITE_KEY>",
  onExpired: handleExpired
};

let widget;

widget = SPCaptcha.render("#signup-captcha", options);

const widgetId = widget.id;

function initCaptcha() {
  const status = document.querySelector("#captcha-status");
  const retryButton = document.querySelector("#captcha-retry");
  let widget;
  function handleError(error) {
    console.error("CAPTCHA error:", error.code, error.message);
    if (widget) {
      SPCaptcha.destroy(widget.id);
      widget = undefined;
    }
    status.textContent =
    "Не удалось загрузить антибот-проверку. Нажмите «Повторить».";
    retryButton.hidden = false;
  }
  const options = {
    siteKey: "<SITE_KEY>",
    onError: handleError
  };
  function renderCaptcha() {
    widget = SPCaptcha.render("#signup-captcha", options);
  }
  retryButton.addEventListener("click", function() {
      retryButton.hidden = true;
      status.textContent = "";
      renderCaptcha();
  });
  renderCaptcha();
}

const widget = SPCaptcha.render("#signup-captcha", options);

const unsubscribe = widget.subscribe(eventName, handler);

const widget = SPCaptcha.render("#signup-captcha", options);

const unsubscribeSuccess = widget.subscribe(
  "success",
  function(event) {
    window.analytics?.track("captcha_success");
  }
);

function initCaptcha() {
  function renderCaptcha() {
    widget = SPCaptcha.render("#signup-captcha", options);
  }

  renderCaptcha();
}

function initCaptcha() {
  const showButton = document.querySelector("#show-captcha");

  function renderCaptcha() {
    widget = SPCaptcha.render("#signup-captcha", options);
  }

  showButton.addEventListener("click", renderCaptcha);
}

function initCaptcha() {
  const submitButton = document.querySelector("#signup-submit");
  const status = document.querySelector("#captcha-status");
  const retryButton = document.querySelector("#captcha-retry");
  let widget;
  let subscriptions = [];
  function removeSubscriptions() {
    subscriptions.forEach(function(unsubscribe) {
        unsubscribe();
    });
    subscriptions = [];
  }
  function handleError(error) {
    console.error("CAPTCHA error:", error.code, error.message);
    if (widget) {
      removeSubscriptions();
      SPCaptcha.destroy(widget.id);
      widget = undefined;
    }
    submitButton.disabled = true;
    status.textContent =
    "Не удалось загрузить антибот-проверку. Нажмите «Повторить».";
    retryButton.hidden = false;
  }
  function handleExpired() {
    submitButton.disabled = true;
    status.textContent = "Пройдите проверку ещё раз.";
  }
  const options = {
    siteKey: "<SITE_KEY>",
    language: "ru",
    responseField: true,
    responseFieldName: "sp-captcha-token",
    onError: handleError,
    onExpired: handleExpired
  };
  function subscribeToEvents(currentWidget) {
    subscriptions = [
      currentWidget.subscribe("success", function() {
          submitButton.disabled = false;
          status.textContent = "";
          retryButton.hidden = true;
          window.analytics?.track("captcha_success");
      }),
      currentWidget.subscribe("error", function(event) {
          window.analytics?.track("captcha_error", {
              code: event.code
          });
      }),
      currentWidget.subscribe("expired", function() {
          window.analytics?.track("captcha_expired");
      })
    ];
  }
  function renderCaptcha() {
    widget = SPCaptcha.render("#signup-captcha", options);
    subscribeToEvents(widget);
  }
  function retryCaptcha() {
    retryButton.hidden = true;
    status.textContent = "";
    if (widget) {
      removeSubscriptions();
      SPCaptcha.destroy(widget.id);
      widget = undefined;
    }
    renderCaptcha();
  }
  retryButton.addEventListener("click", retryCaptcha);
  renderCaptcha();
}

window.initCaptcha = initCaptcha;

SPCaptcha.ready(initCaptcha);

const token = await SPCaptcha.execute(options);

const options = {
  siteKey: "<SITE_KEY>",
  language: "ru"
};

function initCaptcha() {
  const form = document.querySelector("#signup-form");

  form.addEventListener("submit", async function(event) {
    event.preventDefault();

    const token = await SPCaptcha.execute(options);
  });
}

try {
  const token = await SPCaptcha.execute(options);

  // Добавьте токен в запрос к своему бекэнду.
} catch (error) {
  // Обработайте отмену или ошибку проверки.
}

window.initCaptcha = initCaptcha;

SPCaptcha.ready(initCaptcha);

<form id="signup-form" action="/signup" method="post">
  <input type="email" name="email">
  <input type="password" name="password">

  <button id="signup-submit" type="submit">
    Зарегистрироваться
  </button>

  <p id="captcha-status"></p>

  <button id="captcha-retry" type="button" hidden>
    Повторить
  </button>
</form>

function initCaptcha() {
  const form = document.querySelector("#signup-form");
  const submitButton = document.querySelector("#signup-submit");
  const status = document.querySelector("#captcha-status");
  const retryButton = document.querySelector("#captcha-retry");

  const options = {
    siteKey: "<SITE_KEY>",
    language: "ru"
  };

  let isChecking = false;

  async function submitWithCaptcha() {
    if (isChecking) {
      return;
    }

    isChecking = true;
    submitButton.disabled = true;
    retryButton.hidden = true;
    status.textContent = "Проверяем, что вы не бот...";

    try {
      let token;

      try {
        token = await SPCaptcha.execute(options);
      } catch (error) {
        retryButton.hidden = false;

        if (error.code === "execution-cancelled") {
          status.textContent =
            "Проверка отменена. Нажмите «Повторить», чтобы продолжить.";
          return;
        }

        console.error("CAPTCHA error:", error.code, error.message);
        status.textContent =
          "Не удалось пройти проверку. Нажмите «Повторить».";
        return;
      }

      status.textContent = "Отправляем данные...";

      const formData = new FormData(form);
      formData.set("sp-captcha-token", token);

      const response = await fetch(form.action, {
        method: form.method,
        body: formData
      });

      if (!response.ok) {
        throw new Error(
          `Form submission failed with status ${response.status}`
        );
      }

      status.textContent = "";
    } catch (error) {
      console.error("Form submission error:", error);
      status.textContent =
        "Не удалось отправить форму. Нажмите «Зарегистрироваться» ещё раз.";
    } finally {
      isChecking = false;
      submitButton.disabled = false;
    }
  }

  form.addEventListener("submit", function(event) {
    event.preventDefault();
    submitWithCaptcha();
  });

  retryButton.addEventListener("click", submitWithCaptcha);
}

window.initCaptcha = initCaptcha;

SPCaptcha.ready(initCaptcha);