Vue.js google reCaptcha callback

Question

I am trying to get recaptcha callback working with vue.js in a component. The captcha itself does work, but not the callback that I define in the data-callback attribute.

I've tried everything I could think of, but I still get the ReCAPTCHA couldn't find user-provided function: dothisthat error.

Here is the component

<script>     function dothisthat (){             alert(312);         } </script>  <template>     <div class="well main-well">         <h4>Captcha</h4>         <p class="small">You must complete the captcha to finish your booking.</p>         <div id="captcha-wrapper">             <div class="g-recaptcha" :data-sitekey="captchaKey" data-callback="dothisthat"></div>         </div>     </div> </template> <script>      function dothisthat (){         alert(123);     }     import * as filters from '../../../filters';     import Translation from '../../../Translation';      export default {         name: 'Captcha',         props: {         },         computed: {             captchaKey: function() {                 return this.$store.getters.captcha;             }         },         methods: {             dothisthat: function(){                 return function() {                     console.log("123");                 };             }         },         mounted(){              function dothisthat() {                 alert(123);             }             $(function() {                 function dothisthat() {                     alert(123);                 }             });         }     } </script> 

Not one of the dothisthat functions are getting called. What am I doing wrong?

Answer 1

I came across this problem too and it took me 2 days to solve it.

So I will provide here a general answer for integrating recaptcha with vue.js from scratch step by step, to be an easy guide for people who will be in the same situation in the future (I am supposing vue-cli is used here).

Note: I am using here the invisible recaptcha but the process is pretty similar to the normal one

Step 1:

add the recaptcha javascript api to your index.html

index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

Step 2:

make a component called Recaptcha or whatever you want to call it (making a component will make your code easier to read, easier to maintain and easier to add recaptcha to more than one page if you need)

Recaptcha.vue

<template>   <div    id="g-recaptcha"   class="g-recaptcha"   :data-sitekey="sitekey">   </div> </template>  <script> export default {   data () {     return {       sitekey: '6LfAEj0UAAAAAFTGLqGozrRD8ayOy*********',       widgetId: 0     }   },   methods: {     execute () {       window.grecaptcha.execute(this.widgetId)     },     reset () {       window.grecaptcha.reset(this.widgetId)     },     render () {       if (window.grecaptcha) {         this.widgetId = window.grecaptcha.render('g-recaptcha', {           sitekey: this.sitekey,           size: 'invisible',           // the callback executed when the user solve the recaptcha           callback: (response) => {             // emit an event called verify with the response as payload             this.$emit('verify', response)             // reset the recaptcha widget so you can execute it again             this.reset()            }         })       }     }   },   mounted () {     // render the recaptcha widget when the component is mounted     this.render()   } } </script> 

Step 3:

Import the recaptcha component and add it to your page (parent component).

page.vue

<template>   <div>     <h1>Parent component (your page)</h1>     <button @click="executeRecaptcha">execute recaptcha</button>     <!-- listen to verify event emited by the recaptcha component -->     <recaptcha ref="recaptcha" @verify="submit"></recaptcha>   </div> </template>  <script> import Recaptcha from 'recaptcha' export default {   components: {     Recaptcha   },   methods: {     // send your recaptcha token to the server to verify it     submit (response) {       console.log(response)     },     // execute the recaptcha widget     executeRecaptcha () {       this.$refs.recaptcha.execute()     }   } } </script> 

Answer 2

I'm not using component, but I had the same problem, and finally I resolve it like this:

HTML

<div id="recaptcha" class="g-recaptcha"></div> <button id="submit" @click="validate">Submit</button> <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script> 

JS

// ... mounted: function() {     this.initReCaptcha(); }, methods: {     initReCaptcha: function() {         var self = this;         setTimeout(function() {             if(typeof grecaptcha === 'undefined') {                 self.initReCaptcha();             }             else {                 grecaptcha.render('recaptcha', {                     sitekey: 'SITE_KEY',                     size: 'invisible',                     badge: 'inline',                     callback: self.submit                 });             }         }, 100);     },     validate: function() {         // your validations...         // ...         grecaptcha.execute();     },     submit: function(token) {         console.log(token);     } },