Add Custom form fields to WooCommerce Payment Gateway Description

Ever wondered how to add custom form fields to a WooCommerce payment gateway?

In the previous tutorial, we were able to create our custom mobile payment gateway but today we’re going to add a couple of extra settings or fields or a form in there for us to validate and have the customer input all their details.

Add custom form fields to WooCommerce

Create a new file inside our includes folder, includes/payleo-checkout-description-fields.php

Add the WooCommerce filter

We shall use a descriptive WooCommerce filter called woocommerce_gateway_description(), a callback and we pass in two arguments.

add_filter( 'woocommerce_gateway_description', 'techiepress_payleo_description_fields', 20, 2 );

Add the function

Next we then add our function techiepress_payleo_description_fields(). We pass in two arguments, the description and payment id, then return the description.

Our payment id is payleo, so we shall check if our current id is not equal to payleo, then we return the description.

function techiepress_payleo_description_fields( $description, $payment_id ) {

    if ( 'payleo' !== $payment_id ) {
        return $description;
    }

If our current id is the payment id, then we shall do the following.

Firstly, we shall use ob_startt() to buffer up some content.

 ob_start();

Secondly, we append other things to the description. We shall use ob_get_clean() to get all the buffered content and then add it to our description and echo it out.

We shall echo an image as showed in the following code snippet.

echo '<img src="' . plugins_url('../assets/icon.png', __FILE__ ) . '">';

let’s echo another div and give it an inline style for our image.

   echo '<img src="' . plugins_url('../assets/icon.png', __FILE__ ) . '">';

Add custom form fields to WooCommerce description

Most importantly, we’re going to add fields to our description. WooCommerce already does sanitization, cleaning, validation for us so we don’t need to reinvent the wheel.

We shall just use the WooCommerce form field woocommerce_form_field()

Learn how to use WooCommerce form fields here

Phone Number field

Firstly, we shall have the phone number field with an id of phone _number plus an array of details as shown in the following code snippet.

woocommerce_form_field(
        'payment_number',
        array(
            'type' => 'text',
            'label' =>__( 'Payment Phone Number', 'payleo-payments-woo' ),
            'class' => array( 'form-row', 'form-row-wide' ),
            'required' => true,
        )
    );

Note that classes in WooCommerce are arrays, even we had one, we would wrap it in an array.

Reload your plugin. You will notice that we have a phone number field to be filled.

Payment Network field

Secondly, we shall add a payment network. Assuming we have different networks and we have to choose one option. this time we shall use a select type and also give it a bunch of options as shown in the following code snippet.

  woocommerce_form_field(
        'paying_network',
        array(
            'type' => 'select',
            'label' => __( 'Payment Network', 'payleo-payments-woo' ),
            'class' => array( 'form-row', 'form-row-wide' ),
            'required' => true,
            'options' => array(
                'none' => __( 'Select Phone Network', 'payleo-payments-woo' ),
                'mtn_mobile' => __( 'MTN Mobile Money', 'payleo-payments-woo' ),
                'airtel_money' => __( 'Airtel Money', 'payleo-payments-woo' ),
            ),
        )
    );

When we save that and reload our plugin, we see all the two fields we have added, and we’re able to fill them.

Finally, that’s how we add form fields to our payment gateway.

Get all the code for Part 3 on Github

Proceed to Part 4