Checkout Registration reCAPTCHA

This guide provides step-by-step instructions for integrating the new reCAPTCHA system into your checkout user registration process. Follow these steps to replace the old CAPTCHA implementation with the modern reCAPTCHA version.

Integration Steps

1. Update Template Code

Navigate to the login-register template file located at:

modules/prodcatalogueorder/templates/login-register.html

Replace the existing CAPTCHA code block:

<div class="form-row">
    <label>Enter the code<span class="require-star">*</span></label>
    <label><img src="/index.php?action=register&form_action=show_captcha" alt="Captcha" /></label>
    <input class="text" type="text" name="captcha_code" value=""/> 
</div>

With the new reCAPTCHA implementation:

<{if $use_recaptcha eq 'on'}>
    <{if is_object($recaptcha)}>
        <div class="form-item">
            <label for="captcha_code">Not a Bot?:<em>*</em></label>
            <{$recaptcha->show('captcha1')}>
        </div>
    <{/if}>
<{/if}>

Code Changes:

Removed the manual CAPTCHA input field
Added conditional checks for reCAPTCHA configuration
Updated styling classes for consistency
Implemented dynamic reCAPTCHA display

2. Add Error Handling Field

Inside the registration form ('register_frm'), add the following hidden field for error handling:

<input type="hidden" name="return_here_on_error" value="on">

Purpose: This hidden field ensures users return to the registration form with their entered data if validation fails.

3. Implement Error Messages

Add the following error message display code outside the 'register_frm' form:

<{if (isset($error_msg))}>
    Errors:
    <div>
        <{$error_msg}>
    </div>
<{/if}>

Configuration

Important: The reCAPTCHA functionality is controlled by the $use_recaptcha variable in the Register module's configuration. Ensure this setting is properly configured before implementing the changes.

Best Practices

Always backup your template files before making modifications
Test the reCAPTCHA integration in a development environment first
Verify error messages are displaying correctly
Ensure the Register module configuration is properly set
Monitor reCAPTCHA performance after implementation

Troubleshooting

If you encounter issues after implementation, check the following:

Verify the Register module's reCAPTCHA configuration is set to 'on'
Confirm all template changes are properly saved
Check browser console for any JavaScript errors
Ensure the reCAPTCHA API keys are correctly configured