Modify our WordPress plugin to integrate its captcha into WooCommerce block-based checkout page
Budget: $30 – $250 USD
We have a captcha plugin for WooCommerce. We want you to add some code to it to integrate the captcha into the block-based checkout page (not the old classic checkout page).
We will provide you with a sample plugin and the captcha class files. Your job is simply to integrate it as a block into the checkout page, as per follows:
1. Set up a WooCommerce hook to hook into the checkout page.
2. When the hook is triggered by a customer accessing the checkout page:
a) Make sure it is the block-based checkout page or do nothing.
b) Insert our captcha block into the checkout page, which should include:
* The captcha text by calling "Captcha_test::display_text()".
* The captcha image by calling "Captcha_test::display_captcha()".
* The user input field (e.g., <input type="test" [name or id]="captcha-test-input">)
3. When the user submits the order, hook the data (e.g., "woocommerce_store_api_checkout_order_processed" or similar hook):
* Retrieve the input field value and verify if the value matches the captcha by calling "Captcha_test::is_valid()".
a) If it matches, echo "Success" and exit immediately (e.g., "wp_die('Success')" );
b) If it doesn't match, echo "Failed" and exit immediately (e.g., "wp_die('Failed')" );
That's all ( see attached screenshot ).
You must be familiar with customizing the WooCommerce Checkout Block programmatically and show me similar work that you have done before.
We will provide you with a sample plugin and the captcha class files. Your job is simply to integrate it as a block into the checkout page, as per follows:
1. Set up a WooCommerce hook to hook into the checkout page.
2. When the hook is triggered by a customer accessing the checkout page:
a) Make sure it is the block-based checkout page or do nothing.
b) Insert our captcha block into the checkout page, which should include:
* The captcha text by calling "Captcha_test::display_text()".
* The captcha image by calling "Captcha_test::display_captcha()".
* The user input field (e.g., <input type="test" [name or id]="captcha-test-input">)
3. When the user submits the order, hook the data (e.g., "woocommerce_store_api_checkout_order_processed" or similar hook):
* Retrieve the input field value and verify if the value matches the captcha by calling "Captcha_test::is_valid()".
a) If it matches, echo "Success" and exit immediately (e.g., "wp_die('Success')" );
b) If it doesn't match, echo "Failed" and exit immediately (e.g., "wp_die('Failed')" );
That's all ( see attached screenshot ).
You must be familiar with customizing the WooCommerce Checkout Block programmatically and show me similar work that you have done before.