Magento 2 Cloudflare Turnstile Documentation

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 –

• 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.

#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.

#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:

#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.

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.

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.

It will navigate you to the dashboard.

Now go to Turnstile.

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

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.

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.

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.

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.

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>

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”}}

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

Customer Login Page

Customer Registration Page

Checkout Page

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

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.

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

Cloudflare Turnstile CAPTCHA for Guest User

Now store guest users can also use Cloudflare Turnstile CAPTCHA during their checkout.

Note: For using Cloudflare Turnstile CAPTCHA guest users then from the backend “Allow Guest Checkout” option should be “No”.

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.

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.