change callback and elementId to element

README.md

@@ -95,15 +95,17 @@ An `onload` event is added to the script tag to call the render function when th
 // A function that will call the render Procaptcha function when the procaptcha script has loaded
 document.getElementById('procaptcha-script').addEventListener('load', function () {
     // Define a callback function to be called when the CAPTCHA is verified
-    window.onCaptchaVerified = function (output) {
+    function onCaptchaVerified(output) {
         console.log('Captcha verified, output: ' + JSON.stringify(output))
     }
 
+    // Get the Element using elementId
+    const captchaContainer = document.getElementById('procaptcha-container')
     // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
-    window.procaptcha.render('procaptcha-container', {
+    window.procaptcha.render(captchaContainer, {
         siteKey: 'YOUR_SITE_KEY',
         theme: 'dark',
-        callback: 'onCaptchaVerified',
+        callback: onCaptchaVerified,
     })
 })
 ```
@@ -113,18 +115,18 @@ document.getElementById('procaptcha-script').addEventListener('load', function (
 The `Procaptcha.render()` function takes an options object as its second argument. The options object can contain the
 following fields:
 
-| Key                    | Type   | Description                                                                                              | Required |
-| ---------------------- | ------ | -------------------------------------------------------------------------------------------------------- | -------- |
-| siteKey                | string | The site key of your application / website. This is required.                                            | ✓        |
-| callback               | string | The name of the window function that will be called when the CAPTCHA is verified.                        | ✗        |
-| theme                  | string | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`.                     | ✗        |
-| captchaType            | string | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`.          | ✗        |
-| chalexpired-callback   | string | The name of the window function that will be called when the CAPTCHA challenge expires.                  | ✗        |
-| error-callback         | string | The name of the window function that will be called when an error occurs.                                | ✗        |
-| close-callback         | string | The name of the window function that will be called when the CAPTCHA is closed.                          | ✗        |
-| open-callback          | string | The name of the window function that will be called when the CAPTCHA is opened.                          | ✗        |
-| expired-callback       | string | The name of the window function that will be called when the CAPTCHA solution expires.                   | ✗        |
-| challenge-valid-length | number | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗        |
+| Key                    | Type     | Description                                                                                              | Required |
+| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------- | -------- |
+| siteKey                | string   | The site key of your application / website. This is required.                                            | ✓        |
+| callback               | function | The function that will be called when the CAPTCHA is verified.                                           | ✗        |
+| theme                  | string   | The theme of the CAPTCHA widget. The default is `light`. The other option is `dark`.                     | ✗        |
+| captchaType            | string   | The type of CAPTCHA to render. The default is `frictionless`. Other options are `image`, `pow`.          | ✗        |
+| chalexpired-callback   | string   | The name of the window function that will be called when the CAPTCHA challenge expires.                  | ✗        |
+| error-callback         | string   | The name of the window function that will be called when an error occurs.                                | ✗        |
+| close-callback         | string   | The name of the window function that will be called when the CAPTCHA is closed.                          | ✗        |
+| open-callback          | string   | The name of the window function that will be called when the CAPTCHA is opened.                          | ✗        |
+| expired-callback       | string   | The name of the window function that will be called when the CAPTCHA solution expires.                   | ✗        |
+| challenge-valid-length | number   | The amount of time, in milliseconds, a successful CAPTCHA challenge is valid for. Defaults to 2 minutes. | ✗        |
 
 The same options can be passed to the implicit rendering method by adding them as data attributes to the `.procaptcha`.
 For example, to set the theme to dark, you would add `data-theme="dark"` to the `.procaptcha` container.
@@ -268,13 +270,15 @@ setting.
 
 ```javascript
 document.getElementById('procaptcha-script').addEventListener('load', function () {
-    window.onCaptchaVerified = function (output) {
+    function onCaptchaVerified(output) {
         console.log('Captcha verified, output: ' + JSON.stringify(output))
     }
-    window.procaptcha.render('procaptcha-container', {
+    // Get the Element using elementId
+    const captchaContainer = document.getElementById('procaptcha-container')
+    window.procaptcha.render(captchaContainer, {
         siteKey: 'YOUR_SITE_KEY',
         theme: 'dark',
-        callback: 'onCaptchaVerified',
+        callback: onCaptchaVerified,
         captchaType: 'frictionless', // can also be omitted
     })
 })
@@ -296,13 +300,15 @@ the `captchaType` to `pow`.
 
 ```javascript
 document.getElementById('procaptcha-script').addEventListener('load', function () {
-    window.onCaptchaVerified = function (output) {
+    function onCaptchaVerified(output) {
         console.log('Captcha verified, output: ' + JSON.stringify(output))
     }
-    window.procaptcha.render('procaptcha-container', {
+    // Get the Element using elementId
+    const captchaContainer = document.getElementById('procaptcha-container')
+    window.procaptcha.render(captchaContainer, {
         siteKey: 'YOUR_SITE_KEY',
         theme: 'dark',
-        callback: 'onCaptchaVerified',
+        callback: onCaptchaVerified,
         captchaType: 'pow',
     })
 })
@@ -323,13 +329,15 @@ to `image`.
 
 ```javascript
 document.getElementById('procaptcha-script').addEventListener('load', function () {
-    window.onCaptchaVerified = function (output) {
+    function onCaptchaVerified(output) {
         console.log('Captcha verified, output: ' + JSON.stringify(output))
     }
-    window.procaptcha.render('procaptcha-container', {
+    // Get the Element using elementId
+    const captchaContainer = document.getElementById('procaptcha-container')
+    window.procaptcha.render(captchaContainer, {
         siteKey: 'YOUR_SITE_KEY',
         theme: 'dark',
-        callback: 'onCaptchaVerified',
+        callback: onCaptchaVerified,
         captchaType: 'image',
     })
 })

demos/client-bundle-example/src/frictionless.html

@@ -6,24 +6,26 @@
             async function captchaLoaded() {
                 const render = (await import('./assets/procaptcha.bundle')).render
                 console.log('Captcha loaded')
-                render('procaptcha-container', {
+                // Get the Element using elementId
+                const captchaContainer = document.getElementById('procaptcha-container')
+                render(captchaContainer, {
                     siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
                     theme: 'dark',
-                    callback: 'onCaptchaVerified',
+                    callback: onCaptchaVerified,
                     captchaType: 'frictionless',
                 })
             }
             window.captchaLoaded = captchaLoaded
 
             // Define a callback function to be called when the CAPTCHA is verified
-            window.onCaptchaVerified = function (output) {
+            function onCaptchaVerified(output) {
                 console.log('Captcha verified, output: ' + JSON.stringify(output))
             }
         </script>
         <script
             id="procaptchaScript"
             type="module"
-            src="./procaptcha.bundle.js?onload=captchaLoaded&render=explicit"
+            src="./assets/procaptcha.bundle.js?onload=captchaLoaded&render=explicit"
             async
             defer
         ></script>

demos/client-bundle-example/src/index.html

@@ -36,15 +36,17 @@
             import { render } from './assets/procaptcha.bundle.js'
 
             // Define a callback function to be called when the CAPTCHA is verified
-            window.onCaptchaVerified = function (output) {
+            function onCaptchaVerified(output) {
                 console.log('Captcha verified, output: ' + JSON.stringify(output))
             }
 
+            // Get the Element using elementId
+            const captchaContainer = document.getElementById('procaptcha-container')
             // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
-            render('procaptcha-container', {
+            render(captchaContainer, {
                 siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
                 theme: 'dark',
-                callback: 'onCaptchaVerified',
+                callback: onCaptchaVerified,
             })
         </script>
     </body>

demos/client-bundle-example/src/urlParams.html

@@ -6,16 +6,18 @@
             async function captchaLoaded() {
                 const render = (await import('./assets/procaptcha.bundle')).render
                 console.log('Captcha loaded')
-                render('procaptcha-container', {
+                // Get the Element using elementId
+                const captchaContainer = document.getElementById('procaptcha-container')
+                render(captchaContainer, {
                     siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
                     theme: 'dark',
-                    callback: 'onCaptchaVerified',
+                    callback: onCaptchaVerified,
                 })
             }
             window.captchaLoaded = captchaLoaded
 
             // Define a callback function to be called when the CAPTCHA is verified
-            window.onCaptchaVerified = function (output) {
+            function onCaptchaVerified(output) {
                 console.log('Captcha verified, output: ' + JSON.stringify(output))
             }
         </script>

packages/procaptcha-bundle/package.json

@@ -62,7 +62,7 @@
         "@rollup/plugin-typescript": "^11.1.2",
         "@vitejs/plugin-react": "^4.2.1",
         "tslib": "2.6.2",
-        "typescript": "5.1.6",
+        "typescript": "^5.1.6",
         "webpack-merge": "^5.9.0"
     }
 }

packages/procaptcha-bundle/src/index.tsx

@@ -31,7 +31,7 @@ interface ProcaptchaRenderOptions {
     siteKey: string
     theme?: 'light' | 'dark'
     captchaType?: Features
-    callback?: string
+    callback?: (payload: ProcaptchaOutput) => void
     'challenge-valid-length'?: string // seconds for successful challenge to be valid
     'chalexpired-callback'?: string
     'expired-callback'?: string
@@ -112,7 +112,7 @@ const renderLogic = (
     renderOptions?: ProcaptchaRenderOptions
 ) => {
     elements.forEach((element) => {
-        const callbackName = renderOptions?.callback || element.getAttribute('data-callback')
+        const callbackName = renderOptions?.callback
         const chalExpiredCallbackName =
             renderOptions?.['chalexpired-callback'] || element.getAttribute('data-chalexpired-callback')
         const errorCallback = renderOptions?.['error-callback'] || element.getAttribute('data-error-callback')
@@ -141,7 +141,7 @@ const renderLogic = (
             },
         }
 
-        if (callbackName) callbacks.onHuman = getWindowCallback(callbackName)
+        if (callbackName) callbacks.onHuman = renderOptions?.callback as any // Assuming the callback is set correctly
         if (chalExpiredCallbackName) callbacks.onChallengeExpired = getWindowCallback(chalExpiredCallbackName)
         if (onExpiredCallbackName) callbacks.onExpired = getWindowCallback(onExpiredCallbackName)
         if (errorCallback) callbacks.onError = getWindowCallback(errorCallback)
@@ -195,14 +195,8 @@ const implicitRender = () => {
 }
 
 // Explicit render for targeting specific elements
-export const render = (elementId: string, renderOptions: ProcaptchaRenderOptions) => {
+export const render = (element: Element, renderOptions: ProcaptchaRenderOptions) => {
     const siteKey = renderOptions.siteKey
-    const element = document.getElementById(elementId)
-
-    if (!element) {
-        console.error('Element not found:', elementId)
-        return
-    }
 
     renderLogic([element], getConfig(siteKey), renderOptions)
 }