How to Add Custom Field in Checkout Page Below Payment Method List in Magento 2

Add custom field in checkout page below payment method list in Magento 2

Magento 2 CMS is widely preferred to run online businesses in various niches.

As the CMS is flexible for customization, modern business requirements can be easily fulfilled. One such example is to add custom field in checkout page just after payment method list in Magento 2.

This post shows the programmatic solution for the same.

For example. you need the customer to agree with something apart from the default Magento 2 terms and conditions, you can implement a custom checkbox.

Or, you can add the gift wrap checkbox using the below code. If you want to encourage the customers to donate some amount with each purchase, you can add a checkbox field which when the customer will tick, a fixed amount will be added to the cart total automatically.

Any of the above scenarios can be implemented or other custom fields can be added as shown in the figure below:Add custom field in checkout page just after payment method list in Magento 2:

The example here is about adding a custom checkbox in the checkout page, saving its value in the database table, and displaying the same in the admin panel.

Steps to Add custom field in checkout page just after payment method list in Magento 2:

Step 1: To add custom field in the table

Create InstallData.php file under Vendor\Module\Setup\

Step 2: To Create extension attribute and add checkbox just after payment methods and Save that field in Quote table

Create extension_attributes.xml file under Vendor\Module\etc\

Create checkout_index_index.xml file under Vendor\Module\view\frontend\layout\

Create customJs.js file under Vendor\Module\view\frontend\web\js\checkout

Create customCheckbox.html file under Vendor\Module\view\frontend\web\template\checkout

Create saveInQuote.php file under Vendor\Module\Controller\Checkout

Step 3: To Save that custom field in Sales_Order table

Create events.xml file under Vendor\Module\etc\

Create PlaceOrder.php file under Vendor\Module\Observer\

Create routes.xml file at Vendor\Module\etc\frontend

Step 4: To Display custom field value in admin side order view

Create sales_order_view.xml file under Vendor\Module\view\adminhtml\layout

Create displayCustomValue.phtml file under Vendor\Module\view\adminhtml\templates\order\view

Create displayCustomValue.php file under Vendor\Module\Block\Adminhtml\Order\View\

That’s it.

Any other doubts about this solution can be mentioned in the Comments section below.

I’d be happy to help.

Also, do share the solution with the Magento Community via social media.

Additionally, if you want to add custom field in checkout page at different position with additional features, you may as well use the third party extension to ease your task!

Thank you.

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

5
(based on 15 Reviews)

Krishna is a Magento developer at Meetanshi. She is always ready to learn new things. Apart from work, she likes to read books and spend time with family.

8 comments On How to Add Custom Field in Checkout Page Below Payment Method List in Magento 2

  • It doesn’t work on Magento 2.4.2, doesn’t load the checkbox and doesn’t find customJs.

  • It is very useful tutorial, But i want to add text field instead of checkbox. I am trying by reference of this tutorial but I facing some errors. Can you please help me .

    • Hey,
      Thank you for the appreciation!
      Use the below code in customCheckbox.html to add a textbox

      Thank You.

  • Very Useful , Thank you.
    but please i need hint to know How can i display value of gift message after payment method.

    • Hello,
      Thank you for the appreciation!
      You can get the value of the gift message by getting a gift message value in the function and then use this function in the template(.html) file.
      Thank You.

  • Helped me a lot, thanks !
    You just forget the routes.xml file and the event.xml file is wrong, the correct is events.xml

    But it’s a detail.

Leave a reply:

Your email address will not be published.