WooCommerce插件开发：Checkout“下订单”按钮不起作用。 如何修复我的插件？

Question

I am making a WordPress Plugin that adds an option to add a custom gift voucher to the checkout page. I have managed to get the gift voucher inputs and "apply now" button working and it adds the voucher value to the checkout totals, and it adjusts the total accordingly.

The problem is that my plugin seems to cause the "Place order" button to not be clickable. When I deactivate the plugin the checkout button works fine, so there is something in the plugin code that is causing the conflict. I've checked in the browser console and there are no errors being displayed for this page. Here is the code so far:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery'); 
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, '1.3.2'); 
        wp_enqueue_script('jquery');
    }
}

function giftvoucher_front_end_scripts() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/gift_voucher.js' , array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'giftvoucher_front_end_scripts' );

// Displaying a select field and a submit button in checkout page
function gift_voucher_value_check() {
    echo '<a class="button alt" name="gift_voucher_action_btn" id="gift_voucher_action" value="Apply" data-value="gift_voucher_data_value">Apply Now</a>';
}
add_action( 'woocommerce_checkout_after_customer_details', 'gift_voucher_value_check', 10, 0 );

// jQuery - Ajax script
function gift_voucher_redeem_script() {
    // Only checkout page
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('#gift_voucher_action').on('click', function() {

            redeemvoucher();

            $.ajax({
                type: "post",
                url:  wc_checkout_params.ajax_url,
                data: {
                     'action' : 'gift_voucher_redeem',
                     //'gift_voucher_value' : $("#rx-redemption-points").val()
                     'gift_voucher_value' : $("#gift_voucher_redeem").val()
                },
                success: function(response) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+response); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log('error: '+error); // just for testing | TO BE REMOVED
                }
            });
        })
    }
    </script>
    <?php
}

add_action( 'wp_footer', 'gift_voucher_redeem_script' );

// Wordpress Ajax code (set ajax data in Woocommerce session)
add_action( 'wp_ajax_gift_voucher_redeem', 'gift_voucher_redeem' );
add_action( 'wp_ajax_nopriv_gift_voucher_redeem', 'gift_voucher_redeem' );
function gift_voucher_redeem() {
    if( isset($_POST['gift_voucher_value']) ){
        WC()->session->set( 'custom_fee', esc_attr( $_POST['gift_voucher_value'] ) );
        echo true;
    }
    exit();
}
add_action( 'wp_ajax_gift_voucher_redeem', 'gift_voucher_redeem' );
add_action( 'wp_ajax_nopriv_gift_voucher_redeem', 'gift_voucher_redeem' );

// Add a custom dynamic discount based on gift_voucher_data_value
function gift_voucher_value_discount( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    // Only for targeted shipping method
    if (  WC()->session->__isset( 'custom_fee' ) )
        $discount = (float) WC()->session->get( 'custom_fee' );

    if( isset($discount) && $discount > 0 )
        $cart->add_fee( __( 'Giftvoucher discount', 'woocommerce' ), -$discount );
}   
add_action( 'woocommerce_cart_calculate_fees', 'gift_voucher_value_discount', 20, 1 );


// Add the gift voucher fields to the checkout page
function customise_checkout_field($checkout)
{
    echo '<div id="customise_checkout_field"><h3>' . __('Have a Giftvoucher?') . '</h3>';
    echo '<form>';
    woocommerce_form_field('voucher_number_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'label' => __('Enter your giftvoucher number') ,
        'id' => 'gift_voucher_number',
        'placeholder' => __('19 digits, no spaces') ,
        'required' => true,
    ) , $checkout->get_value('voucher_number_field'));
    woocommerce_form_field('pin_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'id' => 'gift_voucher_pin',
        'label' => __('Enter your PIN') ,
        'placeholder' => __('4 digits') ,
        'required' => true,
    ) , $checkout->get_value('pin_field'));
    woocommerce_form_field('redeem_amount_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'label' => __('Amount to redeem $') ,
        'id' => 'gift_voucher_redeem',
        'placeholder' => __('0.00') ,
        'required' => true,
    ) , $checkout->get_value('redeem_amount_field'));
    //echo '<input type="button" value="Redeem Giftvoucher" onclick="redeemvoucher()"';
    echo '<span id="redeemed"></span>';
    echo '</form>';
    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

Can anyone assist me in finding what is causing this conflict with the "Place order" button? Thanks in advance.

Answer 1

Well it turns out that the answer was that the "Apply now" button was actually outside of the form tags... which is okay, I can live with that... but when I commented out the form tags, the checkout works perfectly when clicking the "Place order" button.

Must give credit to a colleague who had a look at the code and pointed out the issue to me... Thanks James!