Network Programming in .NET

In this tutorial, we’ll walk through how to integrate the Car Registration API into a WordPress site. This method ensures that your username and API key are not publicly exposed.

Tools Used in This Demo

1. WordPress
2. Code Snippets (Free plugin)
3. Elementor Pro (Paid website builder)

We’ll be using both PHP and JavaScript scripts. While there are multiple ways to accomplish this, the approach described here prioritizes security by keeping sensitive credentials hidden.

Step 1: Register for the API

Visit carregistrationapi.com and create an account to get your username/API key.

Step 2: Add the PHP Script

Use the Code Snippets plugin to add the PHP code. Paste the script into a new snippet and activate it.

🔁 Important: Replace the placeholder on line 16 with your actual username from Step 1.

add_action('elementor_pro/forms/new_record', function($record, $handler) {
    if (!session_id()) session_start();

    // ✅ Confirm hook fired
    //file_put_contents(WP_CONTENT_DIR . '/uploads/rego-debug.txt', "HOOK FIRED\n", FILE_APPEND);
    //check https://abc.com.au/wp-content/uploads/rego-debug.txt

    $form_id = $record->get_form_settings('form_id');
    if ('regoform' !== $form_id) return;

    //file_put_contents(WP_CONTENT_DIR . '/uploads/rego-debug.txt', "Form matched: $form_id\n", FILE_APPEND);

    $fields = $record->get('fields');
    $rego  = $fields['rego']['value'] ?? '';
    $state = $fields['state']['value'] ?? '';
    $username = 'ABC';

    $api_url = add_query_arg([
        'RegistrationNumber' => $rego,
        'State'              => $state,
        'username'           => $username,
    ], 'https://www.regcheck.org.uk/api/reg.asmx/CheckAustralia');

    // 🔍 API call
    $response = wp_remote_get($api_url);

    // ✅ ADD LOGGING BLOCK HERE
    //file_put_contents(WP_CONTENT_DIR . '/uploads/rego-debug.txt', "API URL: $api_url\n", FILE_APPEND);

    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        file_put_contents(WP_CONTENT_DIR . '/uploads/rego-debug.txt', "API Error: $error_message\n", FILE_APPEND);
    } else {
        $body = wp_remote_retrieve_body($response);
        //file_put_contents(WP_CONTENT_DIR . '/uploads/rego-debug.txt', "API Response: $body\n", FILE_APPEND);

        // Parse response
        $xml = @simplexml_load_string($body);
        $vehicleJson = (string) ($xml->vehicleJson ?? '');
        $vehicleData = json_decode($vehicleJson, true);

        $_SESSION['rego_result'] = [
            'Description' => $vehicleData['Description'] ?? 'N/A',
            'Year'        => $vehicleData['RegistrationYear'] ?? 'N/A',
            'Engine'      => $vehicleData['Engine'] ?? 'N/A',
        ];
    }
}, 10, 2);

// Shortcode to display result
add_shortcode('rego_vehicle_info', function() {
    if (!session_id()) session_start();
	
	//$log_path = WP_CONTENT_DIR . '/uploads/rego-debug.txt';

    // Log shortcode execution
    //file_put_contents($log_path, "SHORTCODE TRIGGERED\n", FILE_APPEND);
	
    $data = $_SESSION['rego_result'] ?? null;

    if (!$data) {
        return '<p>No vehicle information available yet.</p>';
    }
	
    //file_put_contents($log_path, "Session Data: " . print_r($data, true) . "\n", FILE_APPEND);
	
    ob_start();
    ?>
    <div class="rego-vehicle-info">
        <h3>Vehicle Details</h3>
        <ul>
            <li><strong>Description:</strong> <?= esc_html($data['Description']) ?></li>
            <li><strong>Registration Year:</strong> <?= esc_html($data['Year']) ?></li>
            <li><strong>Engine:</strong> <?= esc_html($data['Engine']) ?></li>
        </ul>
    </div>
    <?php
    return ob_get_clean();
});

add_action('rest_api_init', function() {
    register_rest_route('rego/v1', '/data', [
        'methods' => 'GET',
        'callback' => function() {
            if (!session_id()) session_start();
            return $_SESSION['rego_result'] ?? ['error' => 'No data in session'];
        },
        'permission_callback' => '__return_true'
    ]);
});

Step 3: Create the Form and Layout on Your Website

a) Create the Form (Using Elementor or similar)

Structure your form with the following settings:

• Form ID: regoform
• Form Name: regoform
• Rego Field:
  • ID: rego
  • Shortcode: [field id="rego"]
• State Field:
  • ID: state
  • Shortcode: [field id="state"]

These field IDs will be referenced in the PHP and JavaScript scripts.

b) Add HTML Widgets

Use two separate HTML widgets in Elementor:

1. For Displaying the Result:
   Add this HTML element: <div id="rego-result-container"></div>
2. For the JavaScript Logic:
   Add the JavaScript snippet (you can remove or comment out any log messages if not needed).

<script>
window.addEventListener('load', function () {
    function waitForjQueryAndForm() {
        if (typeof jQuery === 'undefined') {
            console.log("⏳ Waiting for jQuery...");
            setTimeout(waitForjQueryAndForm, 100);
            return;
        }

        jQuery(function ($) {
            const $form = $('#regoform');

            if (!$form.length) {
                console.log("⏳ Waiting for form #regoform to appear...");
                setTimeout(waitForjQueryAndForm, 100);
                return;
            }

            console.log("✅ Found form #regoform");

            // Listen for form success response from Elementor Pro
            $form.on('submit_success', function () {
                console.log("✅ Form #regoform successfully submitted via AJAX");

                setTimeout(function () {
                    $.ajax({
                        url: '/wp-json/rego/v1/data',
                        method: 'GET',
                        success: function (data) {
                            console.log("✅ API response:", data);

                            if (data && !data.error) {
                                const html = `
                                    <div class="rego-vehicle-info">
                                        <h3>Vehicle Details</h3>
                                        <ul>
                                            <li><strong>Description:</strong> ${data.Description}</li>
                                            <li><strong>Registration Year:</strong> ${data.Year}</li>
                                            <li><strong>Engine:</strong> ${data.Engine}</li>
                                        </ul>
                                    </div>
                                `;
                                $('#rego-result-container').html(html);
                            } else {
                                $('#rego-result-container').html('<p>No vehicle info available.</p>');
                            }
                        },
                        error: function () {
                            $('#rego-result-container').html('<p>Failed to load vehicle info.</p>');
                        }
                    });
                }, 1000);
            });
        });
    }

    waitForjQueryAndForm();
});
</script>

How the Flow Works

1. The user fills out the form and clicks the “Send” button.
2. The form captures the rego and state values.
3. The PHP script listens for the form action, calls the API, and fetches the results.
4. The JavaScript reads the result and displays the data dynamically on the page.

Example

Here’s a basic demo in action