Reading list Switch to dark mode

    Magento 2 Cloudflare Turnstile Documentation

    Updated 1 November 2023

    Magento 2 Cloudflare Turnstile – By integrating Cloudflare Captcha Turnstile into your Magento 2 store, you can defend your forms against spammers, bots, and hackers.

    A contemporary replacement for Google CAPTCHA prevents spammers from filling out forms that users might use to log in, register, place an order, view or edit a cart, contact us page, etc.

    In other words, Cloudflare Captcha is a Google Captcha alternative. Integrating Cloudflare on Magento 2 store admin needs a site and secret keys to communicate between both platforms. These keys are for one-time use only.

    Check the working in the video mentioned below –

    0RPTpNrz9Ag

    Features of Magento 2 Cloudflare Turnstile

    • Display turnstile on different pages.
    • Enable Cloudflare Turnstile for various storefronts.
    • Replace google captcha on these storefronts like Customer Login, Forgot Password, Create New Customer Account, Edit Customer Account, Contact Us, Product Review, Checkout/Placing Order, Checkout Page sign-in, and Coupon Codes.
    • Prevent unethical operations.
    • Admin can choose the storefronts according to their requirements.
    • This module is MultiShop Compatible.
    • Track the users who have successfully completed the widget.
    • The extension is compatible with the Hyva theme.

    Installation of Magento 2 Cloudflare Turnstile

    #1 Download Module

    Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

    Start your headless eCommerce
    now.
    Find out More

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

    M2-installation-1

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy
    php bin/magento indexer:reindex
    php bin/magento cache:flush

    Language Translation of Magento 2 Cloudflare Turnstile

    For translating the module language, navigate through src/app/code/Webkul/CloudflareTurnstile/i18n/en_US.csv and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

    Magento 2 Multi-Vendor Zoom Integration

    Then upload it to the path src/app/code/Webkul/CloudflareTurnstile/i18n where Magento 2 is installed on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

    The user can edit the CSV like the image below.

    screenshot_from_2023_03_03_09_56_16

    How to Get Site and Secret Key – Magento 2 Cloudflare Turnstile

    The admin needs to sign up for the Cloudflare account. If they already have one, log in to the Cloudflare dashboard and open the account.

    Screenshot-59-1

    It will navigate you to the dashboard.

    Screenshot-62

    Now go to Turnstile.

    Screenshot-60

    All added sites will display here, for creating a new one click on add site button and it will navigate to another page.

    dash.cloudflare.com_13340364ef866395b15a3faaeea0257c_turnstile_add

    Here, the admin needs to enter the following details.

    Site Name: Add a name for the widget to identify it in the future.

    Domain: Enter your website’s hostname or select from your existing websites on Cloudflare.

    Widget Type: Select the widget type as managed, non-interactive, or visible.

    Once you have entered the site name, domain, and selected the widget type, click the create button.

    dash.cloudflare.com_13340364ef866395b15a3faaeea0257c_turnstile

    Upon clicking the create button, you will be redirected to the Turnstile page where you can view:

    • Domain
    • Visitor Solve Rate
    • API Solve Rate
    • Selected widget type
    • Site key

    Click on settings to view the site and secret key.

    Screenshot-63-1

    Configuration of Magento 2 Cloudflare Turnstile

    Admin must log in to their Magento 2 admin account, navigate to Stores > Configuration > Cloudflare Turnstile, and enter the details.

    Cloudflare Turnstile

    Here, the admin needs to enter the Site key and Secret key, which they get while adding the site on Cloudflare Turnstile.

    magento234.webkul.com_m2443_pub_admin_admin_system_config_index_key_a13ae512481259d58b7a97950805d6a65693e92fa1433552a10d57829713ceff_

    Storefront Visibility

    The admin can set permission for various storefront visibility of Cloudflare Turnstile. Like Customer Login, Forgot Password, Create New Customer Account, Edit Customer Account, Contact Us, Product Review, Checkout/Placing Order, and Coupon Codes.

    magento234.webkul.com_m2443_pub_admin_admin_system_config_index_key_a13ae512481259d58b7a97950805d6a65693e92fa1433552a10d57829713ceff_-1

    Cloudflare Turnstile can be added in any custom form by entering the below-mentioned code in any reference block or container of the layout.

    Add using a reference block (This is for the code end).

    <block class=”Webkul\CloudflareTurnstile\Block\Turnstile” name=”productreviewcloudflarecaptcha” after=”-” > </block>

    Screenshot-1-2

    Cloudflare Turnstile can be added in any custom form by entering the below-mentioned code in CMS pages.

    Add in CMS pages:

    {{block class=”Webkul\CloudflareTurnstile\Block\Turnstile”}}
    magento234.vachak.com_m2451_pub___2_

    Frontend Workflow

    Turnstile will display on the storefronts selected by the admin while configuring the module settings.

    Customer Login Page

    magento234-vachak-com_m2451_pub_customer_account_login_referer_ahr0chm6ly9tywdlbnrvmjm0lnzhy2hhay5jb20vbti0ntevchvil3byaxzhy3ktcg9sawn5lwnvb2tpzs1yzxn0cmljdglvbi1tb2rl_

    Customer Registration Page

    magento234.webkul.com_m2443_pub_customer_account_create_

    Checkout Page

    On the checkout page, Cloudflare will display two places one for payment and one for coupon codes.

    magento234.webkul.com_m2443_pub_checkout_

    Checkout Page Sign in

    Upon adding the product to the cart without signing in, when the customer proceeds to checkout and enters their registered email address, Cloudflare will be displayed.

    magento234.webkul.com_m2462_checkout_store-screenshots-1

    Similarly, it will be displayed on various pages to provide a hassle-free experience to the customers.

    Website Analytics

    In the Cloudflare account, you can check the analytics of your website like challenges issued, visitor solve rate, and API solves rate. On clicking the website link, the dashboard will open where you can view analytics.

    Screenshot-64

    Challenges Issued: This means the number of times the widget has been displayed on the website.

    Visitor Solve Rate: Percentage of users who have seen the widget and completed it.

    API Solve Rate: Percentage of users who have completed the widget and then performed the action on the page successfully like logging in on completing the registration.

    That’s all for the Magento 2 Cloudflare Turnstile module. However, if you still have questions regarding the Magento 2 extensions please create a support ticket by clicking Webkul Support System.

    Moreover, If you’re looking to build an online store with Magento, you should hire Magento developers who have the necessary skills and experience to create a professional and effective e-commerce website.

    Current Product Version - 4.0.2

    Supported Framework Version - 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content