diff --git a/README.md b/README.md
index d87059ea9f..5ae2afe0d3 100644
--- a/README.md
+++ b/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',
})
})
diff --git a/demos/client-bundle-example/src/frictionless.html b/demos/client-bundle-example/src/frictionless.html
index 9e5ebd9ce6..9b6b3ed97f 100644
--- a/demos/client-bundle-example/src/frictionless.html
+++ b/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))
}
diff --git a/demos/client-bundle-example/src/index.html b/demos/client-bundle-example/src/index.html
index 4fd00f29bb..e38d6832df 100644
--- a/demos/client-bundle-example/src/index.html
+++ b/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,
})
diff --git a/demos/client-bundle-example/src/jsBundleTest.html b/demos/client-bundle-example/src/jsBundleTest.html
index b856d56670..5ef37bdc11 100644
--- a/demos/client-bundle-example/src/jsBundleTest.html
+++ b/demos/client-bundle-example/src/jsBundleTest.html
@@ -15,7 +15,7 @@