Not able to use re-captcha inside polymer element

[shailesh17mar]

The component works fantastically on normal page but, it does not work inside any polymer element is there anything that I am missing.?

[cbalit]

The problem is the shadow Dom. Google captcha api need to access to a container to put something inside. If the captcha is in the page the container is available. If the captcha is in another element the container is hidden

[shailesh17mar]

So, is there any way to make it work?

[cbalit]

I made some change on my repository. Once they 'll be integrate in the fork you will be abble to proceed by:

1. Creating the captcha
2. Listening to render event to add it where you want
3. Add it to the body

Polymer({
        ready: function () {
          var _this=this;
          this.recaptcha = new Recaptcha();
          this.recaptcha.setAttribute("sitekey", "6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4");
          this.recaptcha.addEventListener('captcha-rendered', function (event) {
            if(event.currentTarget.parentNode==document.body){
              _this.appendChild(_this.recaptcha);
            }
          });
          document.body.appendChild(this.recaptcha);
        }
      });

[shailesh17mar]

render: function () { var _this=this; //Render call this.captchaId = window.grecaptcha.render(this.querySelector('div'), { sitekey : this.sitekey, theme:this.theme, type:this.type, callback: function(response){ _this.responseHandler(response) } }); this.fire('captcha-rendered',null); }

As for the rendering part I replaced this.containerId with this.querySelector('div') because recaptcha.render function accepts both id as well as div where captcha is to be rendered. This has solved my problem related to rendering the recaptcha for now.

[cbalit]

very smart, I missed it.