问题

I am actually working on customization of the checkout form. I need to add a custom input field such as Fiscal Code inside the form.

Via Plugin I added the field, but after Placing Order the reference to this field disappear, how i can save and display it in Sales Order?

This is the code i used

Module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Lutech_CheckoutAdditionalField" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="fiscal_code_plugin" type="Lutech\CheckoutAdditionalField\Plugin\FiscalCodePlugin" sortOrder="1" />
    </type>
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="fiscal_code_save_plugin" type="Lutech\CheckoutAdditionalField\Plugin\SaveAddressInformation" sortOrder="10"/>
    </type>
</config>

extensions_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
        <attribute code="fiscal_code" type="string" />
    </extension_attributes>
</config>

app/code/Lutech/CheckoutAdditionalField/Plugin/FiscalCodePlugin.php

namespace Lutech\CheckoutAdditionalField\Plugin;


use Magento\Checkout\Block\Checkout\LayoutProcessor;

class FiscalCodePlugin {

    public function afterProcess(LayoutProcessor $subject, $result) {
        $customAttributeCode = 'fiscal_code';
        $customField = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'id' => 'fiscal_code',
            ],
            'dataScope' => 'shippingAddress.custom_attributes.fiscal_code',
            'label' => 'Fiscal Code',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => ['required-entry' => true],
            'sortOrder' => 150,
            'id' => 'fiscal_code',

        ];

        $result['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

        return $result;
    }

}

app/code/Lutech/CheckoutAdditionalFiield/Plugin/SaveAddressInformation.php

<?php    
namespace Lutech\CheckoutAdditionalField\Plugin;


class SaveAddressInformation {
    protected $quoteRepository;
    public function __construct(
        \Magento\Quote\Model\QuoteRepository $quoteRepository
    ) {
        $this->quoteRepository = $quoteRepository;
    }
    /**
     * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
     * @param $cartId
     * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
     */
    public function beforeSaveAddressInformation(
        \Magento\Checkout\Model\ShippingInformationManagement $subject,
        $cartId,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $shippingAddress = $addressInformation->getShippingAddress();
        $shippingAddressExtensionAttributes = $shippingAddress->getExtensionAttributes();
        if ($shippingAddressExtensionAttributes) {
            $customField = $shippingAddressExtensionAttributes->getFiscalCode();
            $shippingAddress->setFiscalCode($customField);
        }

    }
}

app/code/Lutech/CheckoutAdditionalField/Setup/InstallData.php

<?php
namespace Lutech\CheckoutAdditionalField\Setup;


use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface {
    /**
     * Installs data for a module
     *
     * @param ModuleDataSetupInterface $setup
     * @param ModuleContextInterface $context
     * @return void
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {
        $installer = $setup;
        $setup->startSetup();

        $connection = $setup->getConnection();

        $connection->addColumn(
            $installer->getTable('quote_address'),
            'fiscal_code',
            [
                'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                'nullable' => true,
                'default' => NULL,
                'length' => 255,
                'comment' => 'Fiscal Code for address'
            ]
        );
        $connection->addColumn(
            $installer->getTable('sales_order_address'),
            'fiscal_code',
            [
                'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                'nullable' => true,
                'default' => NULL,
                'length' => 255,
                'comment' => 'Fiscal Code for address'
            ]
        );
        $installer->endSetup();
    }


}

app/code/Lutech/CheckoutAdditionalField/view/frontend/requirejs-config.js

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

app/code/Lutech/CheckoutAdditionalField/view/frontend/web/js/action/set-shipping-information.js

/*jshint browser:true jquery:true*/
/*global alert*/
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']['fiscal_code'] = shippingAddress.customAttributes['fiscal_code'];
            // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
            return originalAction();
        });
    };
});

I have noticed one thing with PHPStorm.

In SaveAddressInformation.php $shippingAddressExtensionAttributes->getFiscalCode() will be autocompleted, instead of $shippingAddress->setFiscalCode($customField)