Magento2 programmatically add custom data to checkout and show on order.

Step 1. Register your module Vendor_Module:
etc/module.xml

<?xml version="1.0"?>


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

registration.php

<?php


// @codeCoverageIgnoreStart
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);
// @codeCoverageIgnoreEnd

Step 2 Create a installData.php or upgradeData.php and addAttribute to quote and order. I use custom data name “contact_type”.

<?php
/**
 * Created by PhpStorm.
 * User: thelightsp
 * Date: 6/30/19
 * Time: 7:45 AM
 */

namespace Vendor\Module\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Quote\Setup\QuoteSetupFactory;
use Magento\Sales\Setup\SalesSetup;
use Magento\Sales\Setup\SalesSetupFactory;
use Magento\Framework\DB\Ddl\Table;

class UpgradeData implements UpgradeDataInterface
{
    /**
     * @var EavSetupFactory
     */
    public $eavSetupFactory;

    /**
     * @var \Magento\Framework\ObjectManagerInterface
     */
    public $objectManager;

    /**
     * @var \Magento\Catalog\Model\ResourceModel\Eav\Attribute
     */
    public $eavAttribute;

    /**
     * @var \Magento\Framework\App\State
     */
    protected $state;
    /**
     * @var QuoteSetupFactory
     */
    protected $quoteSetupFactory;
    /**
     * @var SalesSetupFactory
     */
    protected $salesSetupFactory;
    /**
     * UpgradeData constructor.
     * @param EavSetupFactory $eavSetupFactory
     * @param \Magento\Framework\ObjectManagerInterface $objectManager
     * @param \Magento\Framework\App\State $state
     * @param \Magento\Catalog\Model\ResourceModel\Eav\Attribute $eavAttribute
     * @param QuoteSetupFactory $quoteSetupFactory
     * @param SalesSetupFactory $salesSetupFactory
     */
    public function __construct(
        EavSetupFactory $eavSetupFactory,
        \Magento\Framework\ObjectManagerInterface $objectManager,
        \Magento\Framework\App\State $state,
        \Magento\Catalog\Model\ResourceModel\Eav\Attribute $eavAttribute,
        QuoteSetupFactory $quoteSetupFactory,
        SalesSetupFactory $salesSetupFactory
    ) {
        $this->eavSetupFactory = $eavSetupFactory;
        $this->objectManager = $objectManager;
        $this->eavAttribute = $eavAttribute;
        $this->state = $state;
        $this->quoteSetupFactory = $quoteSetupFactory;
        $this->salesSetupFactory = $salesSetupFactory;

    }


    /**
     * @param ModuleDataSetupInterface $setup
     * @param ModuleContextInterface $context
     */
    public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $setup->startSetup();
        if (version_compare($context->getVersion(), '1.3.1', '<')) {
            /** @var QuoteSetup $quoteSetup */
            $quoteSetup = $this->quoteSetupFactory->create(['setup' => $setup]);
            $quoteSetup
                ->addAttribute(
                    'quote',
                    'contact_type',
                    ['type' => Table::TYPE_TEXT, 'required' => false]
                );

            /** @var SalesSetup $salesSetup */
            $salesSetup = $this->salesSetupFactory->create(['setup' => $setup]);
            $salesSetup
                ->addAttribute(
                    'order',
                    'contact_type',
                    ['type' => Table::TYPE_TEXT, 'required' => false]
                );
        }

    }

}

Step 3: Add custom data component on layout: view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="itemsAfter" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="contact-type" xsi:type="array">
                                        <item name="component" xsi:type="string">Vendor_Module/js/view/sidebar/contact-type</item>
                                        <item name="sortOrder" xsi:type="string">12</item>
                                        <item name="displayArea" xsi:type="string">contact-type</item>
                                        <item name="dataScope" xsi:type="string">contactType</item>
                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                    </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 4: Add component of your field: view/frontend/web/js/view/sidebar/contact-type.js

define(
    [
        'ko',
        'uiComponent'
    ],
    function (ko, Component ) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Vendor_Module/sidebar/contact-type',
                inputValue: ''
            },
            isVisible: true,

            /**
             * @inheritdoc
             */
            initObservable: function () {
                this._super().observe({
                    CheckVal1: ko.observable(false)
                    
                });
                var contactType= [];

                this.CheckVal1.subscribe(function (newValue) {
                    
                    window.checkoutConfig.contact_type = newValue;

                });

                return this;
            }


        });
    }
);

Step 5: add component template: view/frontend/web/template/sidebar/contact-type.html

<div class="aw-sidebar_contact-type" data-bind="visible: isVisible">
    <span data-role="title" class="toggle" data-bind="i18n:'Contacts'"></span>
    <div class="content" data-role="content">

        <div class="contact">
            <div>
                <div class="control">
                    <input type="checkbox" data-bind='checked: CheckVal1'  id="contact[phone]" name="contact_phone" value="1" class="checkbox"> <label></label>
                </div>
                <label for="contact[phone]">Your checkbox</label>
                
            </div>
         </div>   
    </div>
</div>

Step 6: Add your attribute value to payment extension attribute:view/frontend/web/js/model/place-order-mixin.js

define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/full-screen-loader'
], function (
    $,
    wrapper,
    fullScreenLoader
) {
    'use strict';

    return function (placeOrderAction) {
        return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
          
            paymentData['extension_attributes']['contact_type'] = window.checkoutConfig.contact_type;

            return originalAction(paymentData, messageContainer).fail(
                function () {
                    fullScreenLoader.stopLoader();
                }
            );
        });
    };
});

Step 7: add your extension_attributes in Vendor_Modules/etc/extension_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\PaymentInterface">
        <attribute code="contact_type" type="string" />
    </extension_attributes>
    <extension_attributes for="Magento\Quote\Api\Data\CartInterface">
        <attribute code="contact_type" type="string" />
    </extension_attributes>
    <extension_attributes for="Magento\Sales\Api\Data\OrderInterface">
        <attribute code="contact_type" type="string" />
    </extension_attributes>
</config>

Step 8: Add plugin to modify data payment from extension attribute and order interface:

<?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\Api\PaymentInformationManagementInterface">
       <plugin name="contactType" type="Vendor\Module\Model\Plugin\ContactType"/>
  </type>
 <type name="Magento\Sales\Api\OrderRepositoryInterface">
        <plugin name="contacttype-order-repository-plugin" type="Vendor\Module\Plugin\Order\OrderRepositoryPlugin"/>
    </type>
</config>

<?php

namespace Vendor\Module\Model\Plugin;

use Magento\Checkout\Api\PaymentInformationManagementInterface;
use Magento\Quote\Api\Data\PaymentInterface;


class ContactType
{
    /**
     * @param PaymentInformationManagementInterface $subject
     * @param int $cartId
     * @param PaymentInterface $paymentMethod
     * @return void
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function beforeSavePaymentInformationAndPlaceOrder(
        PaymentInformationManagementInterface $subject,
        $cartId,
        PaymentInterface $paymentMethod
    ) {
       if($paymentData->getExtensionAttributes()->getContactType()){
                $quote = $this->quoteRepository->getActive($cartId);
                $quote->setContactType($paymentData->getExtensionAttributes()->getContactType());
                $this->quoteRepository->save($quote);
            }
    }

    /**
     * @param PaymentInformationManagementInterface $subject
     * @param int $cartId
     * @param PaymentInterface $paymentMethod
     * @return void
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function beforeSavePaymentInformation(
        PaymentInformationManagementInterface $subject,
        $cartId,
        PaymentInterface $paymentMethod
    ) {
        if($paymentData->getExtensionAttributes()->getContactType()){
                $quote = $this->quoteRepository->getActive($cartId);
                $quote->setContactType($paymentData->getExtensionAttributes()->getContactType());
                $this->quoteRepository->save($quote);
            }
    }
}

Step 9: add data to event quote submit before: Vendor_Module/etc/events.xml

<?xml version="1.0" encoding="UTF-8"?>


<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="sales_model_service_quote_submit_before">
        <observer name="aw_osc_quote_submit_before" instance="Vendor\Module\Observer\QuoteSubmitBeforeObserver" />
    </event>
</config>

<?php

namespace Vendor\Module\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Quote\Model\Quote;
use Magento\Sales\Api\Data\OrderInterface;

class QuoteSubmitBeforeObserver implements ObserverInterface
{
    /**
     * {@inheritdoc}
     */
    public function execute(Observer $observer)
    {
        $event = $observer->getEvent();
        /** @var OrderInterface $order */
        $order = $event->getOrder();
        /** @var Quote $quote */
        $quote = $event->getQuote();
        $order->setContactType($quote->getContactType());
      
        return $this;
    }
}

Step 10: Set your custom data to order:

<?php

namespace Vendor\Module\Plugin\Order;

use Magento\Sales\Api\OrderRepositoryInterface;
use Magento\Sales\Api\Data\OrderInterface;
use Magento\Sales\Api\Data\OrderExtensionFactory;
use Magento\Sales\Api\Data\OrderExtensionInterface;

class OrderRepositoryPlugin
{
    /**
     * @var OrderExtensionFactory
     */
    private $orderExtensionFactory;

    /**
     * @param OrderExtensionFactory $orderExtensionFactory
     */
    public function __construct(
        OrderExtensionFactory $orderExtensionFactory
    ) {
        $this->orderExtensionFactory = $orderExtensionFactory;
    }

    /**
     * Add extension attributes to order
     *
     * @param OrderRepositoryInterface $subject
     * @param OrderInterface $order
     * @return OrderInterface
     */
    public function afterGet(OrderRepositoryInterface $subject, OrderInterface $order)
    {
        $this->setExtensionAttributes($order);
        return $order;
    }

    /**
     * Set extension attributes to order entity
     *
     * @param OrderInterface $order
     */
    private function setExtensionAttributes(OrderInterface $order)
    {
        /** @var OrderExtensionInterface $extensionAttributes */
        $extensionAttributes = $order->getExtensionAttributes();
        if ($extensionAttributes === null) {
            $extensionAttributes = $this->orderExtensionFactory->create();
        }
        $extensionAttributes->setContactType($order->getContactType());
        $order->setExtensionAttributes($extensionAttributes);
    }
}

That is all step add your custom data to checkout and order via checkout and database.

Step 11: Show custom data to order view.

Create layout referer and show your block: Vendor/Module/view/adminhtml/layout/sales_order_view.xml

Create your block: Vendor/Module/Block/Adminhtml/Order/View/ContactType.php

Create your template: Vendor/Module/view/adminhtml/templates/order/view/contacttype.phtml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        
        <referenceBlock name="order_additional_info">
            <block class="Vendor\Module\Block\Adminhtml\Order\View\ContactType" name="order.view.contacttype" template="Vendor_Module::order/view/contacttype.phtml"/>
        </referenceBlock>
    </body>
</page>

<?php
/**
 * Created by PhpStorm.
 * User: thelightsp
 * Date: 6/30/19
 * Time: 4:00 PM
 */

namespace Vendor\Module\Block\Adminhtml\Order\View;


class ContactType extends \Magento\Sales\Block\Adminhtml\Order\AbstractOrder
{
    /**
     * ContactType constructor.
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Sales\Helper\Admin $adminHelper
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Sales\Helper\Admin $adminHelper,
        array $data = [])
    {
        parent::__construct($context, $registry, $adminHelper, $data);
    }

    /**
     * @return string
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function getContactType(){
        return $this->getOrder()->getContactType();
    }
}

<div class="admin__page-section-item" style="display: block;width: 100%">
    <div class="admin__page-section-item-title">
        <span class="title"><?= $block->escapeHtml(__('Customer Communication')) ?></span>
    </div>
    <address class="admin__page-section-item-content">
        <?= /* @noEscape */ $block->getContactType(); ?>
    </address>
</div>

That is all step create custom data add to checkout and show on your order. Hope it will help you well.