Directory

← Back

google-recaptcha

A Polymer element for google recaptcha V2 and invisible (Polymer 1.9 - 2.x)

Author

Contributors

Rating

[ 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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

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
Released
2017-08-01
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.0.3
Browser
Browser Independent
Online