How to Add A custom Field to Checkout and Saving it to Backend in Magento2?

PHP code that inserts additional field in LayoutProcessor >>

$customAttributeCode = 'custom_field';
$customField = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        // customScope is used to group elements within a single form (e.g. they can be validated separately)
        'customScope' => 'shippingAddress.custom_attributes',
        'customEntry' => null,
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/input',
        'tooltip' => [
            'description' => 'Yes, this works. I tested it. Sacrificed my lunch break but verified this approach.',
        ],
    ],
    'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
    'label' => 'Custom Attribute',
    'provider' => 'checkoutProvider',
    'sortOrder' => 0,
    'validation' => [
       'required-entry' => true
    ],
    'options' => [],
    'filterBy' => null,
    'customEntry' => null,
    'visible' => true,
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

Add mixin to change the behavior of ‘Magento_Checkout/js/action/set-shipping-information’ which is responsible for data submission between shipping and billing checkout steps

Step 1. Create your_module_name/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                '/js/action/set-shipping-information-mixin': true
            }
        }
    }
};

Step 2. Create your_module_name/js/action/set-shipping-information-mixin.js

/**
 * @author aakimov
 */
define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
    'use strict';
   return function (setShippingInformationAction) {
   return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
            if (shippingAddress['extension_attributes'] === undefined) {
                shippingAddress['extension_attributes'] = {};
            }
 shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];
 // pass functionality to original action ('Magento_Checkout/js/action/set-shipping-information')
 return originalAction();
        });
    };
});

Step 3. Create your_module_name/etc/extension_attributes.xml

To access your data on backend you can use:

$value = $address->getExtensionAttributes()->getCustomField();

If you still have any query regarding this “How to” or would like to add some suggestions to this solution, let us know your feedback or query at [email protected], and don’t forget to share this “How to” blog with your fellow Magento 2 users!