Validate and save additional checkout field for specific payment gateway in Woocommerce

Question

I need to show an text input field when customers select BACS gateway and I would like the input field value to be appended to orders and email notifications.

I am using Additional field on checkout for specific payment gateway in Woocommerce answer code where I have changed the select field to an input text field:

add_filter( 'woocommerce_gateway_description', 'gateway_bacs_custom_fields', 20, 2 );
function gateway_bacs_custom_fields( $description, $method_id ){
    //
     if( $method_id == 'bacs' ){

        ob_start(); // Start buffering

        echo '<div  class="bacs-fields" style="padding:10px 0;">';

        woocommerce_form_field( 'field_slug', array(
            'type'          => 'text',
            'label'         => __("Udfyld EAN", "woocommerce"),
            'class'         => array('form-row-wide'),
            'required'      => true,
                            ), '');
        echo '<div>';

        $description .= ob_get_clean(); // Append  buffered content
    }
    return $description;
}

It works fine on checkout page where it displays the field.

But the inputted text value is not being saved to orders and email notifications.

How to save and append this inputted text value on orders and email notifications?

Answer 1

There is a lot of missing steps as the answer code you are using is just displaying a field in checkout under BACS payment description:

You need to (only when BACS is the selected payment method):

1. Validate the field
2. Save the inputted value to the order
3. Display the field value on Order received and Order view (My account)
4. Display the field value on email notifications
5. Display the field value in admin edit order pages

So as you can see what you are asking is huge (too broad) and will require an additional new question for point 3, 4 and 5, where you will need to say where you want to output it (the location).

All the code for steps 1 and 2:

add_filter( 'woocommerce_gateway_description', 'gateway_bacs_appended_custom_text_fields', 10, 2 );
function gateway_bacs_appended_custom_text_fields( $description, $payment_id ){
     if( $payment_id === 'bacs' ){

        ob_start(); // Start buffering

        echo '<div class="bacs-fields" style="padding:10px 0;">';

        woocommerce_form_field( 'udfyld_ean', array(
            'type'          => 'text',
            'label'         => __("Udfyld EAN", "woocommerce"),
            'class'         => array('form-row-wide'),
            'required'      => true,
        ), '');

        echo '<div>';

        $description .= ob_get_clean(); // Append  buffered content
    }
    return $description;
}


// Process the field (validation)
add_action('woocommerce_checkout_process', 'udfyld_ean_checkout_field_validation');
function udfyld_ean_checkout_field_validation() {
if ( $_POST['payment_method'] === 'bacs' && isset($_POST['udfyld_ean']) && empty($_POST['udfyld_ean']) )
    wc_add_notice( __( 'Please enter your "Udfyld EAN" number.' ), 'error' );
}

// Save "Udfyld EAN" number to the order as custom meta data
add_action('woocommerce_checkout_create_order', 'save_udfyld_ean_to_order_meta_data', 10, 4 );
function save_udfyld_ean_to_order_meta_data( $order, $data ) {
    if( $data['payment_method'] === 'bacs' && isset( $_POST['udfyld_ean'] ) ) {
        $order->update_meta_data( '_udfyld_ean', sanitize_text_field( $_POST['udfyld_ean'] ) );
    }
}

Code goes in function.php file of your active child theme (or active theme). tested and works.

To get this custom field value from $order the WC_Order object you will use:

$udfyld_ean = $order->get_meta('_udfyld_ean');

Or from $order_id the order ID you can use WordPress get_post_meta() function:

$udfyld_ean = get_post_meta( $order_id, '_udfyld_ean', true );

The field validation (for BACS as the selected payment method):

The inputted field value is saved to the order meta data (phpMyAdmin view in wp_postmeta table):