Amp Recaptcha Examples

This page is long to show off layout and unlayout callbacks

You can paste the following into a dev tools console to run the amp-recaptcha-input getValue().

document.querySelector('amp-recaptcha-input').implementation_.getValue().then(token => {console.log('Got Token!');console.log(token);})

amp-recaptcha-input inside amp-lightbox

Open LightboxClose lightbox

Search (GET xhr cross origin current host > httpbin.org)

Search for

You searched for: {{term}}

Recaptcha token: {{recaptcha_example}}

Error! Please check the JS Console in your dev tools.

{{message}}

amp-recaptcha-input Standard Example

Search (GET non-xhr cross origin - current host > httpbin.org)

Search for

Search (POST xhr same origin current host > /recaptcha/submit)

Search for

You searched for: {{term}}

Recaptcha token: {{recaptcha_example}}

Error! Please check the JS Console in your dev tools.

{{message}}

Search (GET non-xhr same origin) Using AMP Bind and Amp Action (on="tap:....")

Search for Submit AMP Bind Search

Search (POST xhr same origin current host > /recaptcha/submit) Using AMP Bind and Amp Action (on="tap:....")

Search for Submit AMP Bind Search

You searched for: {{term}}

Recaptcha token: {{recaptcha_example}}

The submitted amp bind state was: {{additionalFields}}

Pushed down amp-recaptcha-input testing layoutCallback()

Search (GET xhr cross origin current host > httpbin.org)

Search for

You searched for: {{term}}

Recaptcha token: {{recaptcha_example}}

Error! Please check the JS Console in your dev tools.

{{message}}