Here is an example (using Plugin) for changing field order, disabling field or adding missing field to address.
File: etc/di.xml
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin disabled="false" name="Vendor_Module_Plugin_Block_Checkout_LayoutProcessor" sortOrder="99"
type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>
File: Plugin/Block/Checkout/LayoutProcessor.php
<?php
namespace Vendor\Module\Plugin\Block\Checkout;
use Magento\Checkout\Block\Checkout\LayoutProcessor as MageLayoutProcessor;
class LayoutProcessor
{
public function afterProcess(MageLayoutProcessor $subject, $jsLayout)
{
/* config: checkout/options/display_billing_address_on = payment_method */
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']
)) {
foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'] as $key => $payment) {
/* company */
if (isset($payment['children']['form-fields']['children']['company'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['company']['sortOrder'] = 0;
}
/* region & region_id */
if (isset($payment['children']['form-fields']['children']['region'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region']['visible'] = false;
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region']['config']['componentDisabled'] = true;
}
if (isset($payment['children']['form-fields']['children']['region_id'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region_id']['visible'] = false;
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['region_id']['config']['componentDisabled'] = true;
}
$method = substr($key, 0, -5);
/* vat_id */
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['vat_id'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billingAddress' . $method,
'customEntry' => null,
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'tooltip' => null,
],
'dataScope' => 'billingAddress' . $method . '.vat_id',
'dataScopePrefix' => 'billingAddress' . $method,
'label' => __('VAT number'),
'provider' => 'checkoutProvider',
'sortOrder' => 1,
'validation' => [],
'options' => [],
'filterBy' => null,
'customEntry' => null,
'visible' => true,
];
}
}
/* config: checkout/options/display_billing_address_on = payment_page */
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']
)) {
/* company */
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['company']
)) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['company']['sortOrder'] = 0;
}
/* region & region_id */
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region']['visible'] = false;
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region']['config']['componentDisabled'] = true;
}
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region_id'])) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region_id']['visible'] = false;
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['region_id']['config']['componentDisabled'] = true;
}
$method = 'shared';
/* vat_id */
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['vat_id'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billingAddress' . $method,
'customEntry' => null,
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'tooltip' => null,
],
'dataScope' => 'billingAddress' . $method . '.vat_id',
'dataScopePrefix' => 'billingAddress' . $method,
'label' => __('VAT number'),
'provider' => 'checkoutProvider',
'sortOrder' => 1,
'validation' => [],
'options' => [],
'filterBy' => null,
'customEntry' => null,
'visible' => true,
];
}
return $jsLayout;
}
}
Just follow this path in checkout_index_index.xml
But you need to specify validators in each form. Or you can try to use layoutProcessor like here going through the loop and reffer to paymend method via its $keyCode.
Also I found that rule max_text_length does not work properly on billing forms but works perfectly in shipping forms. I ended up with creating own validation rule.
You can find all rules here Magento_Ui/js/lib/validation/rules.js
Be careful with rules form mage/validation.js they don't work on chekout and vice versa (please correct me if I am wrong) so it's the reason why I tried to use max_text_length instead of validate-length maximum-length-35
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payments-list" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Billing forms start -->
<!-- Pay attention that you need to set form validators for each payment method-->
<item name="cashondelivery-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="form-fields" xsi:type="array">
<item name="children" xsi:type="array">
<!-- form fields here -->
<item name="company" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">15</item>
<item name="min_text_length" xsi:type="number">7</item>
<item name="no-whitespace" xsi:type="boolean">true</item>
</item>
</item>
<item name="postcode" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">9</item>
</item>
</item>
<item name="region_id" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max-string-length" xsi:type="number">35</item>
</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="street" xsi:type="array">
<item name="children" xsi:type="array">
<item name="0" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="2" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<!-- Billing forms end -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Best Answer
can you provide step to do this solution please I just working with magento2 for 2 months