import {useEffect} from "@wordpress/element";
const HCaptcha = ({ sitekey, handleCaptchaResponse }) => {
const hcaptchaCallback = (response) => {
handleCaptchaResponse(response);
};
useEffect(() => {
const script = document.createElement('script');
script.src = `https://hcaptcha.com/1/api.js?onload=initHcaptcha`;
script.async = true;
script.defer = true;
script.onload = () => {
if (typeof window.hcaptcha !== 'undefined') {
window.hcaptcha.render('hcaptchaContainer', {
sitekey: sitekey,
callback: hcaptchaCallback
});
}
};
document.body.appendChild(script);
// Cleanup function
return () => {
// Check if hcaptcha is loaded before trying to remove it
if (window.hcaptcha) {
window.hcaptcha.reset();
}
if (script) {
script.remove();
}
};
}, [sitekey, handleCaptchaResponse]);
return (
<div className="rsssl-captcha"
style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px'}}>
<div id='hcaptchaContainer'></div>
</div>
);
};
export default HCaptcha;