Add meta to Admin and Invoices from Custom form fields in WooCommerce payment gateway Description

In the previous article, we learned how to add custom form fields to a WooCommerce payment gateway. Today we shall learn how to add meta to admin and invoices from custom form fields in the WooCommerce payment gateway description.

If we place an order, our order actually goes through. However, we had decided that if the fields are not filled, we display a message and that’s what we’re going to do now.

Add meta to Admin from custom form fields in the WooCommerce payment gateway description.

Add WooCommerce checkout process hook

Let’s go back to our plugin inside the file includes/payleo-checkout-description-fields.php and add a new hook that we shall use and that is the woocommerce_checkout_process

add_action( 'woocommerce_checkout_process', 'techiepress_payleo_description_fields_validation' );

Add function to check form fields validations

Let’s add a new function to check all those validations.

function techiepress_payleo_description_fields( $description, $payment_id ) {
}

We will start the validation function techiepress_payleo_description_fields() and then we hook it into our add action woocommerce_checkout_process. We don’t need arguments for this particular action.

Validate custom form fields in the WooCommerce payment gateway description.

Firstly, we shall check if the phone number is empty,

Secondly, check if the payment gateway that we chose is actually our custom Payleo Mobile Payments

In addition, we add a WooCommerce add notice wc_add_notice to display a message.

The following code snippet shows how to validate form fields using a display message.

function techiepress_payleo_description_fields_validation() {
    if( 'payleo' === $_POST['payment_method'] && ! isset( $_POST['payment_number'] )  || empty( $_POST['payment_number'] ) ) {
        wc_add_notice( 'Please enter a number that is to be billed', 'error' );
    }
}

If you try to place an order, without the phone number, you will see this error.

Save the meta data from custom form fields in WooCommerce payment gateway description

in order to save that metadata, we shall use WooCommerce hook woocommerce_checkout_update_order_meta We shall give it a function, a priority of 10 and one argument which is the order id.

add_action( 'woocommerce_checkout_update_order_meta', 'techiepress_checkout_update_order_meta', 10, 1 );

Do the basic check

Let’s start off our function and say if the payment number is set and not empty, we shall use WordPress update_post_meta which requires a post id and we shall use the order_id in this case. We add a meta key of payment_number and the value is still payment_number

function techiepress_checkout_update_order_meta( $order_id ) {
    if( isset( $_POST['payment_number'] ) || ! empty( $_POST['payment_number'] ) ) {
       update_post_meta( $order_id, 'payment_number', $_POST['payment_number'] );
    }
}

Now go back to the front-end, reload, add a phone number and place the order.

You will notice that the order is successfully received.

However, when you go back to the dashboard and you check for the new order, you will not find it there. This is because we have not displayed it though it is saved in our database.

Display the order

We need to use a WooCommerce hook to display our order.

Let’s add another hook which is the woocommerce_admin_order_data_after_billing_address because we want to place this information after the billing address. We also add the function, give it a priority of 10 and only one argument.

add_action( 'woocommerce_admin_order_data_after_billing_address', 'techiepress_order_data_after_billing_address', 10, 1 );

In our function, we shall echo some HTML. We shall use the get_post_meta() function of WordPress.

To get the order id, we are going to get that order and then we chain on it a method that allows us to get the order id

Let’s echo another line just to make our payment number stand out.

function techiepress_order_data_after_billing_address( $order ) {
    echo '<p><strong>' . __( 'Payment Phone Number:', 'payleo-payments-woo' ) . '</strong><br>' . get_post_meta( $order->get_id(), 'payment_number', true ) . '</p>';
}

When you save and reload, you will notice that we have our payment number showing up in our backend and also being saved in our front-end.

image

So that’s how we add custom form fields in the WooCommerce payment gateway description. You can try to get all the other fields to see what they look like. Try to sanitize them.

9:24 Pass information to the invoice.

finally, we shall pass this same information to our invoices and all the other items that go along.

Let’s add a new hook called woocommerce_order_item_meta_end. Give it function name and pass three different arguments, the item_id, the item and finally the order.

add_action( 'woocommerce_order_item_meta_end', 'techiepress_order_item_meta_end', 10, 3 );

function techiepress_order_item_meta_end( $item_id, $item, $order ) {
    echo '<p><strong>' . __( 'Payment Phone Number:', 'payleo-payments-woo' ) . '</strong><br>' . get_post_meta( $order->get_id(), 'payment_number', true ) . '</p>';
}

When you save this and place a new order, we shall be able to get the invoice information as well.

Find all the code for this part on Github

Thanks for reading and to get the whole package please proceed to Part5