Magento 2: Add full name field to checkout billing address

Question

I need to add a new fied "Full Name" to checkout billing address form. I have already added this to shipping address by following this: Use new field "Full Name" to replace "First Name" and "Last Name" in Checkout

I am trying to add the new field by following this but it is not working: https://webkul.com/blog/add-custom-field-billing-address-form-magento-2/

The full name field is not rendering in the checkout billing address form.

Answer 1

I added a field in the button.html of billing address form

app/design/frontend/Theme/default/Magento_Checkout/web/template/billing-address/form.html

 <div class="billing-address-form">
    <!-- ko foreach: getRegion('before-fields') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <form id="new-billing-address" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset address" data-form="billing-new-address">
            <div class="field _required full_name">
                <label class="label">
                    <span data-bind="i18n: 'Full Name'"></span>
                </label>
                <div class="control">
                    <input type="text" class="input-text required" id="full_name_text" data-bind="event:{ keyup: fullNameChanged }" />
                </div>
            </div>
            <!-- ko foreach: getRegion('additional-fieldsets') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
            <div class="choice field">
                <input type="checkbox" class="checkbox"  data-bind="checked: saveInAddressBook, attr: {id: 'billing-save-in-address-book-' + getCode($parent)}" />
                <label class="label" data-bind="attr: {for: 'billing-save-in-address-book-' + getCode($parent)}" >
                    <span data-bind="i18n: 'Save in address book'"></span>
                </label>
            </div>
            <!-- /ko -->
        </fieldset>
    </form>
</div>

Copied vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js and placed it in app/design/frontend/Theme/default/Magento_Checkout/web/js/view/billing-address.js And then added the binded function to the billing-address.js

fullNameChanged: function() {
            var fullNameValue = $('#full_name_text').val();
            var firstSpacePos = fullNameValue.indexOf(' ');
            if (firstSpacePos!=-1) {
                //this means user has entered a space
                var first_name = fullNameValue.substring(0, firstSpacePos).trim();
                var last_name = fullNameValue.substring(firstSpacePos).trim();
                $('div[name="billingAddressshared.firstname"] .input-text').val(first_name);
                $('div[name="billingAddressshared.lastname"] .input-text').val(last_name);
            }
            else{
                //this means user has entered a single word
                $('div[name="billingAddressshared.firstname"] .input-text').val(fullNameValue);
                $('div[name="billingAddressshared.lastname"] .input-text').val(fullNameValue);
            }
            $('div[name="billingAddressshared.firstname"] .input-text').keyup();
            $('div[name="billingAddressshared.lastname"] .input-text').keyup();
        }