Recaptcha API

API used to properly used the Recaptcha V3 from Google. Read more about Recaptcha in the Google documentation of Recaptcha V3.

classDiagram
direction LR
    RecaptchaApi --> isRecaptchaEnabled
    RecaptchaApi --> getRecaptchaReadyInstance
    RecaptchaApi --> getToken

    class RecaptchaApi {
        isRecaptchaEnabled() boolean
        getRecaptchaReadyInstance() Promise~IReCaptchaInstance~
        getToken() Promise~string~
    }

    link isRecaptchaEnabled "../methods/is-recaptcha-enabled/"
    link getRecaptchaReadyInstance "../methods/get-recaptcha-ready-instance/"
    link getToken "../methods/get-token/"

Get API

To get the Recaptcha API use its name RecaptchaV3Api with the getApi method.

This API is initialized asynchronously which means that if you use the getApiSync method to get it, it might not exist yet and you will get an error as a result.

useStorefront(async (storefront) => {
    const recaptchaApi = await storefront.getApi('RecaptchaV3Api');
});

Methods

• isRecaptchaEnabled - returns information about whether the Recaptcha is enabled in the shop or not.
• getRecaptchaReadyInstance - returns the Recaptcha instance when it's ready to be used.
• getToken - executes Recaptcha on a given action and return a token

Example

In this example we make a RecaptchaV3Api call to check whether the Recaptcha is enabled in the shop or not.

useStorefront(async (storefront) => {
    const recaptchaApi = await storefront.getApi('RecaptchaV3Api');

    const isRecaptchaEnabled = await recaptchaApi.isRecaptchaEnabled();

    if (isRecaptchaEnabled === true) {
        // do something with Recaptcha
    }
});

Example

In this example we make a RecaptchaV3Api call to retrieve the recaptcha instance.

useStorefront(async (storefront) => {
    const recaptchaApi = await storefront.getApi('RecaptchaV3Api');

    const recaptchaInstance = await recaptchaApi.getRecaptchaReadyInstance();

    recaptchaInstance.ready(function() {
        recaptchaInstance.execute('reCAPTCHA_site_key', { action: 'submit' }).then(function(token) {
            // Add your logic to submit to your backend server here.
        });
    });
});

Example

In this example we make a RecaptchaV3Api call to execute the Recaptcha and retrieve a token.

useStorefront(async (storefront) => {
    const recaptchaApi = await storefront.getApi('RecaptchaV3Api');

    const token = await recaptchaApi.getToken('submit');

    // Add your logic to submit to your backend server here.
});