Contact us Create app

Directory

← Back

google-recaptcha

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

Author

Rating

Links

Popularity

<100

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

Last updated: 2017-08-01

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.4.0
  • iron-form-element-behavior#^1.0.7
  • iron-validatable-behavior#^1.1.2
  • paper-sandbox#^0.0.4
  • promise-polyfill#polymerlabs/promise-polyfill#^1.0.0
Released
2017-05-22
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 1.0+
Polymer 2.0+ in 0.0.4
Browser
Browser Independent

google-recaptcha - Vaadin Add-on Directory

A Polymer element for google recaptcha V2 and invisible (Polymer 1.9 - 2.x) google-recaptcha - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Zecat/google-recaptcha](https://github.com//Zecat/google-recaptcha/blob/v0.2.2/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Zecat/google-recaptcha) # \ A Polymer element for google recaptcha V2 and invisible. ```html ``` ## Install ``` bower install -S Zecat/google-recaptcha ``` ## Notes - Promise polyfill is a dev dependency. - Visit [https://www.google.com/recaptcha/admin](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 \ parent, and the container is moved into the body. The container is refit every time the user scroll or the \ is notified of resize. This is an expensive task but the only solution so far.
Online