react-gamified-captcha 1.0.0

package/CaptchaWidget.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+
+export const GamifiedCaptcha = ({ 
+  siteKey = "ch_pub_demo_testkey_12345", 
+  onHumanVerified, 
+  onError,
+  className = "conversion-business-widget",
+  style = {}
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const isInvalidKey = !siteKey || siteKey === "ch_pub_demo_testkey_12345";
+
+  useEffect(() => {
+    // 1. SSR Safety Check
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return;
+    }
+
+    // 2. Funnel Logic (Console Warning for missing/demo keys)
+    if (isInvalidKey) {
+      console.error("Conversion.Business Error: Invalid Site Key. Please register at https://conversion.business to obtain a valid API key.");
+      setHasError(true);
+      return;
+    }
+
+    const scriptId = 'conversion-business-sdk';
+    let script = document.getElementById(scriptId);
+    let isNewScript = false;
+
+    // 3. Singleton Script Loading
+    if (!script) {
+      script = document.createElement('script');
+      script.id = scriptId;
+      script.src = 'https://conversion-business-widgets.web.app/sdk.js';
+      script.async = true;
+      isNewScript = true;
+
+      // 4. CSP/Network Error Handling (Fail-Open)
+      script.onerror = (e) => {
+        console.error("Conversion.Business Error: Failed to load SDK. Check your Content Security Policy or AdBlocker.", e);
+        if (onError) onError(e);
+      };
+
+      document.body.appendChild(script);
+    }
+
+    const verificationHandler = (e) => {
+      if (onHumanVerified && e.detail?.token) {
+        onHumanVerified(e.detail.token);
+      }
+    };
+
+    document.addEventListener('conversion.business:verified', verificationHandler);
+
+    return () => {
+      document.removeEventListener('conversion.business:verified', verificationHandler);
+      // We do not remove the script tag because other instances on the page might need it.
+    };
+  }, [siteKey, onHumanVerified, onError, isInvalidKey]);
+
+  // 5. Funnel Logic (Visual Fallback for missing/demo keys)
+  if (hasError || isInvalidKey) {
+    return (
+      <div style={{ color: '#d32f2f', border: '1px solid #d32f2f', padding: '12px', borderRadius: '4px', backgroundColor: '#fff', fontFamily: 'sans-serif', ...style }} className={className}>
+        <strong>Widget Error:</strong> Valid API Key Required. <a href="https://conversion.business" target="_blank" rel="noopener noreferrer" style={{color: '#d32f2f', textDecoration: 'underline'}}>Get your free key here</a>.
+      </div>
+    );
+  }
+
+  // 6. Prop Forwarding to the actual widget container
+  return (
+    <div 
+      className={className} 
+      data-sitekey={siteKey} 
+      data-theme="light"
+      style={style}
+    />
+  );
+};

package/README.md

@@ -0,0 +1,51 @@
+# react-gamified-captcha
+
+A gamified alternative to traditional captchas for React applications. Say goodbye to frustrating traffic lights and blurry crosswalks.
+
+## Important: API Key Required
+**To use this package in production, you must register for a free API key at [conversion.business](https://conversion.business).** 
+If you do not provide a valid `siteKey`, the widget will not render and your users will see an error.
+
+## Installation
+
+```bash
+npm install react-gamified-captcha
+```
+
+## Usage
+
+```jsx
+import { GamifiedCaptcha } from 'react-gamified-captcha';
+
+function App() {
+  const handleVerify = (token) => {
+    console.log("Human verified! Token:", token);
+    // Send this token to your backend for validation
+  };
+
+  const handleError = (error) => {
+    console.warn("Captcha failed to load or encountered an error. Failing open.", error);
+    // Best practice: Fail-open by allowing the user to submit the form anyway
+  };
+
+  return (
+    <form>
+      {/* ... your form fields ... */}
+      
+      <GamifiedCaptcha 
+        siteKey="YOUR_CONVERSION_BUSINESS_API_KEY" 
+        onHumanVerified={handleVerify}
+        onError={handleError}
+      />
+      
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## Next.js (SSR) Support
+This component is fully SSR-safe and can be used directly in Next.js or Remix applications without requiring dynamic imports.
+
+## Graceful Degradation (`onError`)
+If a user has an aggressive ad-blocker or strict Content Security Policy that prevents our script from loading, the `onError` callback will fire. We strongly recommend implementing a **fail-open** strategy in this scenario. If `onError` triggers, simply let the user bypass the captcha so you don't lose the signup.

package/index.js

@@ -0,0 +1 @@
+export { GamifiedCaptcha } from './CaptchaWidget.js';

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-gamified-captcha",
+  "version": "1.0.0",
+  "description": "A gamified, frictionless captcha component for React. Powered by conversion.business.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "captcha",
+    "recaptcha",
+    "gamified",
+    "security",
+    "bot-protection"
+  ],
+  "author": "conversion.business",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}