How to test nonce with AJAX – Plugin development

I see some issues:

1. You ajax action can be only used by logged users. If this is correct, I recommend you add a nopriv action that returns a error message.

    // Inside Constructor    
    add_action( 'wp_ajax_nopriv_pp_html_process', array( $this, 'pp_html_process_not_logged' ) );

And create this function :

    public function pp_html_process_not_logged () {
        // Status can be used to identify via JS if the operation is OK or KO and print an error with jQuery or a modal window, whatever you prefer.
        wp_send_json([
            'status' => false,
            'error' => __('Error. This service is only for logged users.', 'your_plugin_lang_slug')
        ]);
    }

2. You create a wp_nonce field that will not be used (later in JS you are creating other with the same name / action). Remove this line in your “pp_html_template” function:

    <?php wp_nonce_field( 'pp_publisher_save', 'pp_publisher_name' ); ?>
  

3. wp_head prints your HTML inside the HEAD tag and that’s is not “allowed”. This form needs to be inside BODY tag. Maybe you can add it in footer or a better solution is create a shortcode with add_shortcode function and put the shortcode in pages or post you want to display this form.

4. Remove this lines in your constructor because reason explained in 3 and because you are creating an AJAX action and ajax actions are processed by wp_ajax_{$action} hook.

    if ( ! is_admin() ) {
        add_action( 'wp_head', array( $this, 'pp_html_template' ) );
        add_action( 'init', array( $this, 'pp_html_process' ) );
    }

5. Ensure “pp_enqueue_public_styles” is called in “wp_enqueue_scripts” or “admin_enqueue_scripts” if it only appears on Dashboard. If you decide to create a shortcode, you can call this function before form.

6. In your JS file change this lines:

    ppFormData.append('pp_submit', 1);
    ppFormData.append('security', window.pp_public_ajax.pp_publisher_name)
    ppFormData.append('action', 'pp_html_process');
    

And remove this line inside AJAX function:

    action: 'pp_featured_image',

7. You have an error in your “pp_enqueue_public_styles” function:

public function pp_enqueue_public_styles() {
    // Register the script first!!
    wp_register_script( 'pp_public_ajax', plugins_url( '/assets/js/pp-public-ajax.js', __FILE__ ), array( 'jquery' ), null, true );    
    wp_localize_script( 'pp_public_ajax', 'pp_public_ajax',
        array(
            'pp_ajaxurl'             => admin_url( 'admin-ajax.php' ),
            'pp_publisher_name'      => wp_create_nonce( 'pp_publisher_save' )
        )
    );
    wp_enqueue_script('pp_public_ajax');
}