How to add new custom field to billing address section in magento2

Question

I have tried to add new field in magento2 billing address section. I have followed below link to add new field in shipping address block

http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/

I have added new field to shipping address section successfully. But in my site, I have been using "Virtual products". So I want to add my new custom field into billing section. I just modified that "LayoutProcessorPlugin.php" code like below

$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children']['delivery_date']

instead of

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['delivery_date']

But it doesn't working. How to add my new custom field to Billing address block in magento2?

Answer 1

you need to create a plugin in your custom module ( the one that you used to create the custom attribute ), and have the code something like the following one:

namespace Package\Name\Plugin\Checkout;

class LayoutProcessor
{
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        // Loop all payment methods (because billing address is appended to the payments)
        $configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
        foreach ($configuration as $paymentGroup => $groupConfig) {
            if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['custom_attribute_code'] = [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'id' => 'custom_attribute_id',
                    ],
                    'dataScope' => $groupConfig['dataScopePrefix'] . '.custom_attribute_id',
                    'label' => __('Custom attribute label'),
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => [
                        'required-entry' => true,
                        'min_text_length' => 0,
                    ],
                    'sortOrder' => 300,
                    'id' => 'custom_attribute_id'
                ];
            }
        }

        return $jsLayout;
    }
}

Hope this helps

Answer 2

@Vlad Patru is absolutely right.

Just want to add that this loop of all payment methods in obtained in $configuration. But It is to be noted that Starting from Magento 2.1.4 release, the checkout configuration has additional Display Billing Address On option (Stores -> Configuration -> Checkout -> Checkout Options). It has two possible values:

Payment Method - billing address is displayed per payment method

Payment Page - billing address is displayed above payment methods

So, $configuation will return all payment methods only when Display Billing Address is selected as per Payment Method.