Now that we have our basic integration setup, we need to add our fields. So far, everything we've written will work for just about any integration. Now we're going to write code for the specific settings our integration needs. Follow these steps:

1. Let's start with a function to create the fields:

/**
 * Initialize integration settings form fields.
 *
 * @return void
 */
 public function init_form_fields() {
  
   }

2. Now we can add the settings to this function. Let's add one setting first. Add a field for our API key. We're going to create an array called form_fields and add all of our fields to that array:

$this->form_fields = array(
     'api_key' => array(
       'title' => __( 'API Key', 'woocommerce-integration-demo' ),
       'type' => 'text',
       'description' => __( 'Enter with your API Key. 
         You can find this in "User Profile" drop-down 
          (top right corner) > 
         API Keys.', 'woocommerce-integration-demo' ),
       'desc_tip' => true,
       'default' => ''
     ),
   );

The preceding code is for an API key. The three important fields are as follows:

• title: The name of the field.
• type: It's a text field (as opposed to a paragraph or number input).
• description: This shows up next to the text field to explain what it is to the user.

Now that we know how to add one field, you can add the rest of our fields. WooCommerce has a whole section in the documentation about these fields. If you want to know the types of fields you can display and what each setting means, read through their documentation at https://docs.woocommerce.com/document/implementing-wc-integration/#section-3.

The following code shows the complete array when you finish adding fields:

$this->form_fields = array(
     'api_key' => array(
       'title' => __( 'API Key', 'woocommerce-integration-demo' ),
       'type' => 'text',
       'description' => __( 'Enter with your API Key. 
        You can find this in "User Profile" drop-down (top right corner) > 
        API Keys.', 'woocommerce-integration-demo' ),
       'desc_tip' => true,
       'default' => ''
     ),
     'debug' => array(
       'title' => __( 'Debug Log', 'woocommerce-integration-demo' ),
       'type' => 'checkbox',
       'label' => __( 'Enable logging', 'woocommerce-integration-demo' ),
       'default' => 'no',
       'description' => __( 'Log events such as API requests', 
       'woocommerce-integration-demo' ),
 
      ),
     'customize_button' => array(
       'title' => __( 'Customize!', 'woocommerce-integration-demo' ),
       'type' => 'button',
       'custom_attributes' => array(
       'onclick' => "location.href='http://www.woothemes.com'",

      ),
       'description' => __( 'Customize your settings by going 
        to the integration site directly.', 
       'woocommerce-integration-demo' ),
       'desc_tip' => true,
     )
 );

The preceding code is similar to the code for one settings field. I wanted to show you what it looks like when you have multiple fields. Notice the different field types such as button and checkbox. 

When we're done, this function should look like the following:

/**
 * Initialize integration settings form fields.
 *
 * @return void
 */
 public function init_form_fields() {
   $this->form_fields = array(
     'api_key' => array(
       'title' => __( 'API Key', 'woocommerce-integration-demo' ),
       'type' => 'text',
       'description' => __( 'Enter with your API Key. 
        You can find this in "User Profile" drop-down (top right corner) > 
        API Keys.', 'woocommerce-integration-demo' ),
       'desc_tip' => true,
       'default' => ''
     ),
     'debug' => array(
       'title' => __( 'Debug Log', 'woocommerce-integration-demo' ),
       'type' => 'checkbox',
       'label' => __( 'Enable logging', 'woocommerce-integration-demo' ),
       'default' => 'no',
       'description' => __( 'Log events such as API requests', 
       'woocommerce-integration-demo' ),
     ),
     'customize_button' => array(
       'title' => __( 'Customize!', 'woocommerce-integration-demo' ),
       'type' => 'button',
       'custom_attributes' => array(
       'onclick' => "location.href='http://www.woothemes.com'",
     ),
       'description' => __( 'Customize your settings by going 
        to the integration site directly.', 
        'woocommerce-integration-demo' ),
       'desc_tip' => true,
     )
   );
 }

The preceding block shows what our code looks like when all of the settings fields are added to the init_form_fields method.

When you're all done it and you load the Integrations page, it will look something like the following screenshot:

This is some of the simplest code I can show you to customize WooCommerce. But it's still pretty complex for new coders. This code might take a seasoned developer an hour or more to figure out and customize to suit their needs. So don't worry if it takes you a while to understand. I highly recommend that you read through the documentation, available at https://docs.woocommerce.com/document/implementing-wc-integration/ so you can fully understand it.