In di.xml
<type name="Magento\Checkout\Block\Onepage">
<arguments>
<argument name="layoutProcessors" xsi:type="array">
<item name="unique_name" xsi:type="object">[Vendor]\[Modulue]\Block\Checkout\LayoutProcessor</item>
</argument>
</arguments>
</type>
[Vendor][Modulue]\Block\Checkout\LayoutProcessor.php file
<?php
namespace [Vendor]\[Modulue]\Block\Checkout;
class LayoutProcessor implements \Magento\Checkout\Block\Checkout\LayoutProcessorInterface
{
/**
* @param array $result
* @return array
*/
public function process($result)
{
$configuration = isset($result['components']['checkout']['children']['steps']
['children']['billing-step']['children']['payment']['children']['payments-list']['children'])
? $result['components']['checkout']['children']['steps']
['children']['billing-step']['children']['payment']['children']['payments-list']['children'] :'';
if ($configuration) {
foreach ($configuration as $paymentGroup => $groupConfig) {
if (isset($groupConfig['component']) &&
$groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {
$result['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']
['children']['company_tax_id'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => ''.$groupConfig['dataScopePrefix'].'.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
],
'dataScope' => ''.$groupConfig['dataScopePrefix'].'.custom_attributes.state', // your name here in my case state
'label' => 'Other State',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => ['custom-state' => true], // your new validation name here in my case custom-state
'sortOrder' => 105,
];
}
}
}
return $result;
}
}
[Vendor]/[Modulue]/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Checkout/js/action/place-order': {
'[Vendor]_[Modulue]/js/action/place-order-mixin': true
},
}
}
};
[Vendor]/[Modulue]/view/frontend/web/js/action
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote',
'Magento_Ui/js/lib/validation/validator'
], function ($, wrapper, quote,validator) {
'use strict';
validator.addRule(
'custom-state',
function (value) {
// Your Condition return true false based on condition
if ($('.payment-method._active [name="custom_attributes[state]"]').length > 0 ) {
if ($('.payment-method._active [name="custom_attributes[state]"]').is(':visible') && $('.payment-method._active [name="custom_attributes[state]"]').val() == ''){
return false;
} else {
return true;
}
}
},
$.mage.__('This is a required field.')
);
return function (placeOrderAction) {
/** Override default place order action and add agreement_ids to request */
return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
var billingAddress = quote.billingAddress();
if (billingAddress['extension_attributes'] === undefined) {
billingAddress['extension_attributes'] = {};
}
billingAddress['extension_attributes']['state'] = $('.payment-method._active [name="custom_attributes[state]"]').val();
return originalAction(paymentData, messageContainer);
});
};
});