A Polymer element for google recaptcha V2 and invisible (Polymer 1.9 - 2.x)
[ This description is mirrored from README.md at github.com/Zecat/google-recaptcha on 2019-05-22 ]
<google-recaptcha>
A Polymer element for google recaptcha V2 and invisible.
<dom-bind>
<template is="dom-bind">
<google-recaptcha
force-in-body
value="{{token}}"
sitekey="6LdHISEUAAAAAN0FxtC5OBGQv-zrtj1tQ1Z_KUWf"
></google-recaptcha>
<span>[[token]]</span>
</template>
</dom-bind>
Install
bower install -S Zecat/google-recaptcha
Notes
- Promise polyfill is a dev dependency.
- Visit https://www.google.com/recaptcha/admin to get a sitekey.
Shadow DOM work-around
By-design, the google recaptcha doesn't work inside shadow dom, so we detect when it has a ShadowRoot parent and if so, the recaptcha is placed in a container light DOM, which sync its size and screen position with its original <google-recaptcha> parent, and the container is moved into the body. The container is refit every time the user scroll or the <google-recaptcha> is notified of resize. This is an expensive task but the only solution so far.
Install
Framework Support
Browser Compatibility
Install with
Run the above Bower command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 0.2.2
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- iron-form-element-behavior#PolymerElements/iron-form-element-behavior#1 - 2
- iron-validatable-behavior#PolymerElements/iron-validatable-behavior#1 - 2
- iron-fit-behavior#PolymerElements/iron-fit-behavior#1 - 2
- iron-scroll-target-behavior#PolymerElements/iron-scroll-target-behavior#1 - 2