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 ]

Published on webcomponents.org

<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

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

Link to this version
ImportedReleased 01 August 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.0.3)
Browser Compatibility
Install with
bower install --save Zecat/google-recaptcha"#0.2.2"
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