0

How to create custom field on checkout Page in magento2?

enter image description here

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

    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.