Magento – How to add custom fileds in Magento 2,checkout payment method

customcustom-fieldmagento2payment-methods

How to add two custom fields for all payment methods in my payment section of magento 2,Can any one help me on this?

$jsLayout['components']['checkout']['children']['steps']['children']['payment']['children']
        ['methods']['children']['paymentAdditional'] = [
            'component' => 'uiComponent',
            'displayArea' => 'paymentAdditional',
            'children' => [
                'delivery_date' => [
                    'component' => Vendor_Module/js/view/payment/method-renderer/taxInfo-comp',
                    'config' => [
                        'customScope' => 'methods',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'vendor_module/payment/taxinfo-form',
                        'options' => [],
                    ],
                    'dataScope' => 'methods.tax_code',
                    'label' => 'Tax Code',
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => false, //['required-entry' => $this->_helper->getConfigIsFieldRequired()],
                    'sortOrder' => 200,
                ]
            ],
        ];

Best Answer

If You want two add new custom field for all payment method in payment section of magento 2

you can overwrite \Magento\Checkout\Block\Checkout\LayoutProcessor

follow this sequence

/[vendor]/[module]/etc/frontend/di.xml

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="checkout_custom_fields" type="vendor\module\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>

vandor/module/Model/Checkout/LayoutProcessorPlugin.php

namespace vendor\module\Model\Checkout;

class LayoutProcessorPlugin
{

    /**
     * @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']['delivery_date'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/date',
                'options' => [],
            ],
            'dataScope' => 'shippingAddress.your_field',
            'label' => 'field label',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 200
        ];
        return $jsLayout;
    }
}

Reference here

Related Topic