how to add a custom customer attributes under shipping address in checkout page in Magento2?

Question

how to add a custom customer attributes under shipping address in checkout page in Magento2?

i m using this extension for customer attributes.

In customer registration page

In Shipping Page

Answer 1

step1 : try to create a plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method. because billing and shipping address forms are generated dynamically.

app/code/Adamsmage/Customattribute/etc/frontend/di.xml

<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="add_custom_field_checkout_form" type="Adamsmage\Customattribute\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

step2 : Create plugin class on this Directory.

app\code\Adamsmage\Customattribute\Model\Plugin\Checkout

<?php
namespace Adamsmage\Customattribute\Model\Plugin\Checkout;

class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'custom-field'
            ],
            'dataScope' => 'shippingAddress.custom_attributes.custom_field',
            'label' => 'Checkout Custom Field',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 250,
            'id' => 'custom-field'
        ];


        return $jsLayout;
    }
}