Creating a custom mobile OTP (One-Time Password) system in a WordPress contact form

<form id="custom-mobile-otp-form" method="post" action="">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="mobile">Mobile Number:</label>
    <input type="text" id="mobile" name="mobile" required>
    <button type="button" id="send-otp">Send OTP</button>

    <div id="otp-section" style="display:none;">
        <label for="otp">Enter OTP:</label>
        <input type="text" id="otp" name="otp" required>
        <button type="submit" id="verify-otp">Submit</button>
    </div>
</form>
<div id="response-message"></div>

add_action('wp_ajax_send_mobile_otp', 'handle_send_mobile_otp');
add_action('wp_ajax_nopriv_send_mobile_otp', 'handle_send_mobile_otp');

function handle_send_mobile_otp() {
    session_start();
    $mobile = sanitize_text_field($_POST['mobile']);
    $otp = rand(100000, 999999); // Generate a 6-digit OTP
    $_SESSION['mobile_otp'] = $otp;
    $_SESSION['mobile_otp_expiry'] = time() + 300; // OTP valid for 5 minutes

    // Integrate SMS Gateway API (e.g., Twilio, Nexmo, Textlocal)
    $api_key = 'YOUR_API_KEY'; // Replace with your SMS gateway API key
    $sender = 'TXTLCL';        // Replace with your SMS sender ID
    $message = "Your OTP is $otp. It is valid for 5 minutes.";

    // Example API Request for Textlocal
    $url = "https://api.textlocal.in/send/?apikey=$api_key&numbers=$mobile&message=" . urlencode($message) . "&sender=$sender";
    $response = wp_remote_get($url);

    if (is_wp_error($response)) {
        wp_send_json_error('Failed to send OTP. Please try again.');
    }

    wp_send_json_success('OTP sent successfully to ' . $mobile . '!');
}

add_action('wp_ajax_verify_mobile_otp', 'handle_verify_mobile_otp');
add_action('wp_ajax_nopriv_verify_mobile_otp', 'handle_verify_mobile_otp');

function handle_verify_mobile_otp() {
    session_start();
    $user_otp = sanitize_text_field($_POST['otp']);

    if (isset($_SESSION['mobile_otp']) && isset($_SESSION['mobile_otp_expiry'])) {
        if (time() > $_SESSION['mobile_otp_expiry']) {
            wp_send_json_error('OTP expired!');
        } elseif ($user_otp == $_SESSION['mobile_otp']) {
            unset($_SESSION['mobile_otp']);
            unset($_SESSION['mobile_otp_expiry']);
            wp_send_json_success('OTP verified! Form submitted successfully.');
        } else {
            wp_send_json_error('Invalid OTP!');
        }
    } else {
        wp_send_json_error('No OTP found!');
    }
}

jQuery(document).ready(function ($) {
    $('#send-otp').click(function () {
        const mobile = $('#mobile').val();

        if (mobile) {
            $.ajax({
                url: ajaxurl, // WordPress AJAX URL
                method: 'POST',
                data: {
                    action: 'send_mobile_otp',
                    mobile: mobile,
                },
                success: function (response) {
                    if (response.success) {
                        alert(response.data);
                        $('#otp-section').show();
                    } else {
                        alert(response.data);
                    }
                },
            });
        } else {
            alert('Please enter your mobile number.');
        }
    });

    $('#custom-mobile-otp-form').submit(function (e) {
        e.preventDefault();
        const otp = $('#otp').val();

        $.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
                action: 'verify_mobile_otp',
                otp: otp,
            },
            success: function (response) {
                if (response.success) {
                    $('#response-message').text(response.data);
                } else {
                    $('#response-message').text(response.data);
                }
            },
        });
    });
});

function custom_enqueue_mobile_otp_scripts() {
    wp_enqueue_script('custom-mobile-otp', get_template_directory_uri() . '/js/custom-mobile-otp.js', ['jquery'], null, true);
    wp_localize_script('custom-mobile-otp', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'custom_enqueue_mobile_otp_scripts');