Magento 2 how to create custom Field in checkout page

Question

How to create custom field on checkout Page in magento2?

Answer 1

Using Theme :-

Create the purchaseorder-form.html file in below path,

Path : app/design/frontend/Theme/ThemeName/Magento_OfflinePayments/web/template/payment

<div class="payment-method-content">
    <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <div class="payment-method-billing-address">
        <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <form id="purchaseorder-form" class="form form-purchase-order" data-role="purchaseorder-form">
        <fieldset class="fieldset payment method" data-bind='attr: {id: "payment_form_" + getCode()}'>
            <div class="field field-number required">
                <label for="po_number" class="label">
                    <span><!-- ko i18n: 'Purchase Order Number'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="text"
                           id="po_number"
                           name="payment[po_number]"
                           data-validate="{required:true}"
                           data-bind='
                            attr: {title: $t("Purchase Order Number")},
                            value: purchaseOrderNumber'
                           class="input-text"/>
                </div>
            </div>
        </fieldset>
        
        <!--custom field-->
        <fieldset class="fieldset payment method">
            <div class="field required">
                <label for="custom_field" class="label">
                    <span><!-- ko i18n: 'Custom Field'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="text"
                           id="custom_field"
                           name="custom_field"
                           class="input-text"/>
                </div>
            </div>
        </fieldset>
    </form>
    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar" id="review-buttons-container">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    enable: (getCode() == isChecked()),
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    "
                    data-role="review-save">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>
</div>

Using Custom module :-

Create the purchaseorder-form.html file in your module,

path : app/code/vendor/module/view/frontend/web/template/payment

<div class="payment-method-content">
    <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <div class="payment-method-billing-address">
        <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <form id="purchaseorder-form" class="form form-purchase-order" data-role="purchaseorder-form">
        <fieldset class="fieldset payment method" data-bind='attr: {id: "payment_form_" + getCode()}'>
            <div class="field field-number required">
                <label for="po_number" class="label">
                    <span><!-- ko i18n: 'Purchase Order Number'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="text"
                           id="po_number"
                           name="payment[po_number]"
                           data-validate="{required:true}"
                           data-bind='
                            attr: {title: $t("Purchase Order Number")},
                            value: purchaseOrderNumber'
                           class="input-text"/>
                </div>
            </div>
        </fieldset>

        <!--custom field-->
        <fieldset class="fieldset payment method">
            <div class="field required">
                <label for="custom_field" class="label">
                    <span><!-- ko i18n: 'Custom Field'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="text"
                           id="custom_field"
                           name="custom_field"
                           class="input-text"/>
                </div>
            </div>
        </fieldset>
    </form>
    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <div class="actions-toolbar" id="review-buttons-container">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    enable: (getCode() == isChecked()),
                    css: {disabled: !isPlaceOrderActionAllowed()}
                    "
                    data-role="review-save">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>
</div>

after run the below commands ,

php bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:f