Working with reCAPTCHA

[ercanertan]

Would be great if someone share the idea how to solve this common real case problem please.

I have simple form which has email field only and trying to make this secure with Google reCAPTCHA.

How can I access this.formData.recaptcha inside grecaptcha.execute method and wait until token come back to continue further?

Thanks in advance!!

<form method="POST"
    x-data="alpineFormApp()"
    @submit.prevent="submitData()"
    class="">

    <input class="w-full" type="email" name="email" x-model="formData.email" placeholder="Enter email address" required>
    <button type="submit" x-text="buttonLabel"> Subscribe </button>

</form>

<script src="https://www.google.com/recaptcha/api.js?render=recaptcha_key"></script>
<script>
  alpineFormApp = () => {
    return{
      formData: {
        email:'',
        recaptcha: ''
      },
      buttonLabel: 'Subscribe',
      submitData() {
        this.buttonLabel = 'Submitting...'
        this.loading = true;

        grecaptcha.ready(function() {
          grecaptcha.execute('recaptcha_key', {action: 'submit'}).then(function(token) {
            // This will take time to come back from google api
            // I need to access this.formData to append recaptcha
            this.formData.recaptcha = token;
          });
        });
        // continue to submit the form using fetch api
      }
    }
  }
</script>

[SimoTod]

I think you need to use an arrow function (grecaptcha.execute('recaptcha_key', {action: 'submit'}).then((token) => {) otherwise this inside your callback won't be the object you expect.

[SimoTod]

also grecaptcha.ready(() => {

[ercanertan]

@SimoTod Thank you!!!! I can access now.

[ercanertan]

@SimoTod One last thing please, I need to make sure grecaptcha.ready() finished first before rest of the line run (to use fetch api).
Do you know easy way to achieve this by any chance?

[ercanertan]

Actually since I have access to "this" , I can now use fetch api inside grecaptcha.execute() method.
That will work fine!
Thank you again!

[leonardchiu]

@ercanertan Thanks for the question! Exactly what I was looking for!!

@SimoTod Thanks for the solution! Works perfectly. But can anyone point me to an article or video that explain why the arrow function works?

Anyway... Awesome community!