{"id":1471,"date":"2020-12-19T05:10:08","date_gmt":"2020-12-19T05:10:08","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-field-in-checkout-page-below-payment-method-list-in-magento-2\/"},"modified":"2025-07-17T10:13:18","modified_gmt":"2025-07-17T04:43:18","slug":"add-custom-field-in-checkout-page-below-payment-method-list-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-field-in-checkout-page-below-payment-method-list-in-magento-2\/","title":{"rendered":"How to Add Custom Field in Checkout Page Below Payment Method List in Magento 2"},"content":{"rendered":"\n

Magento 2\u00a0CMS is widely preferred to run online businesses in various niches.<\/p>\n\n\n\n

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. Likewise you can also add custom field below Apply Discount code in Magento 2<\/a>, to make the customers click it and let them explore detailed offer benefits.<\/p>\n\n\n\n

Also as being an admin you can get week days list in Magento 2<\/a> system configuration for when a customer can book an appointment, or select the days on which the store will offer delivery.<\/p>\n\n\n\n

This post shows the programmatic solution for the same.<\/p>\n\n\n\n

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

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. Or even If you want to restrict access to certain payment methods and make them visible only to the admin<\/a>, you can use the \u201cMake a Payment Method Visible Only to Admin\u201d feature.<\/p>\n\n\n\n

Any of the above scenarios can be implemented or other custom fields can be added as shown in the figure below:<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Steps to Add custom field in checkout page just after payment method list in Magento 2:<\/h2>\n\n\n\n

Step 1: To add custom field in the table<\/h3>\n\n\n\n

Create InstallData.php<\/strong><\/em> file under Vendor\\Module\\Setup\\<\/strong><\/p>\n\n\n\n

<?php\nnamespace Vendor\\Module\\Setup;\n\nuse Magento\\Framework\\Setup\\InstallDataInterface;\nuse Magento\\Framework\\Setup\\ModuleContextInterface;\nuse Magento\\Framework\\Setup\\ModuleDataSetupInterface;\nuse Magento\\Customer\\Model\\Customer;\nuse Magento\\Customer\\Setup\\CustomerSetupFactory;\n\nclass InstallData implements InstallDataInterface\n{\n\n    private $customerSetupFactory;\n\n    \/**\n     * Constructor\n     *\n     * @param \\Magento\\Customer\\Setup\\CustomerSetupFactory $customerSetupFactory\n     *\/\n    public function __construct(\n        CustomerSetupFactory $customerSetupFactory\n    ) {\n        $this->customerSetupFactory = $customerSetupFactory;\n    }\n\n    \/**\n     * {@inheritdoc}\n     *\/\n    public function install(\n        ModuleDataSetupInterface $setup,\n        ModuleContextInterface $context\n    ) {\n        $installer = $setup;\n\n        $installer->startSetup();\n\n        $installer->getConnection()->addColumn(\n            $installer->getTable('quote'),\n            'agree',\n            [\n                'type' => \\Magento\\Framework\\DB\\Ddl\\Table::TYPE_BOOLEAN,\n                'visible'  => true,\n                'default' => 0,\n                'comment' => 'Custom Condition'\n            ]\n        );\n\n\n        $installer->getConnection()->addColumn(\n            $installer->getTable('sales_order'),\n            'agree',\n            [\n                'type' => \\Magento\\Framework\\DB\\Ddl\\Table::TYPE_BOOLEAN,\n                'visible'  => true,\n                'default' => 0,\n                'comment' => 'Custom Condition'\n            ]\n        );\n    }\n}<\/pre>\n\n\n\n
Step 2: To Create extension attribute and add checkbox just after payment methods and Save that field in Quote table<\/h3>\n\n\n\n
Create extension_attributes.xml<\/strong><\/em> file under Vendor\\Module\\etc\\<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Api\/etc\/extension_attributes.xsd\">\n    <extension_attributes for=\"Magento\\Quote\\Api\\Data\\AddressInterface\">\n        <attribute code=\"agree\" type=\"string\" \/>\n    <\/extension_attributes>\n<\/config><\/pre>\n\n\n\n
Create checkout_index_index.xml<\/strong><\/em> file under Vendor\\Module\\view\\frontend\\layout\\<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"checkout.root\">\n            <arguments>\n                <argument name=\"jsLayout\" xsi:type=\"array\">\n                    <item name=\"components\" xsi:type=\"array\">\n                        <item name=\"checkout\" xsi:type=\"array\">\n                            <item name=\"children\" xsi:type=\"array\">\n                                <item name=\"steps\" xsi:type=\"array\">\n                                    <item name=\"children\" xsi:type=\"array\">\n                                        <item name=\"billing-step\" xsi:type=\"array\">\n                                            <item name=\"children\" xsi:type=\"array\">\n                                                <item name=\"payment\" xsi:type=\"array\">\n                                                    <item name=\"children\" xsi:type=\"array\">\n                                                        <item name=\"afterMethods\" xsi:type=\"array\">\n                                                            <item name=\"children\" xsi:type=\"array\">\n                                                                <item name=\"custom-checkbox\" xsi:type=\"array\">\n                                                                    <item name=\"component\" xsi:type=\"string\">Vendor_Module\/js\/checkout\/customJs<\/item>\n                                                                    <item name=\"displayArea\" xsi:type=\"string\">before-place-order<\/item>\n                                                                    <item name=\"sortOrder\" xsi:type=\"string\">3<\/item>\n                                                                    <item name=\"dataScope\" xsi:type=\"string\">checkoutcomments<\/item>\n                                                                    <item name=\"provider\" xsi:type=\"string\">checkoutProvider<\/item>\n                                                                <\/item>\n                                                            <\/item>\n                                                        <\/item>\n                                                    <\/item>\n                                                <\/item>\n                                            <\/item>\n                                        <\/item>\n                                    <\/item>\n                                <\/item>\n                            <\/item>\n                        <\/item>\n                    <\/item>\n                <\/argument>\n            <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Create customJs.js<\/strong><\/em> file under Vendor\\Module\\view\\frontend\\web\\js\\checkout<\/strong><\/p>\n\n\n\n
define(\n    [\n        'ko',\n        'jquery',\n        'uiComponent',\n        'mage\/url'\n    ],\n    function (ko, $, Component,url) {\n        'use strict';\n        return Component.extend({\n            defaults: {\n                template: 'Vendor_Module\/checkout\/customCheckbox'\n            },\n            initObservable: function () {\n\n                this._super()\n                    .observe({\n                        CheckVals: ko.observable(false)\n                    });\n                var checkVal=0;\n                self = this;\n                this.CheckVals.subscribe(function (newValue) {\n                    var linkUrls  = url.build('module\/checkout\/saveInQuote');\n                    if(newValue) {\n                        checkVal = 1;\n                    }\n                    else{\n                        checkVal = 0;\n                    }\n                    $.ajax({\n                        showLoader: true,\n                        url: linkUrls,\n                        data: {checkVal : checkVal},\n                        type: \"POST\",\n                        dataType: 'json'\n                    }).done(function (data) {\n                        console.log('success');\n                    });\n                });\n                return this;\n            }\n        });\n    }\n);<\/pre>\n\n\n\n
Create customCheckbox.html<\/strong><\/em> file under Vendor\\Module\\view\\frontend\\web\\template\\checkout<\/strong><\/p>\n\n\n\n
<input type=\"checkbox\" name=\"customCheckbox\" value=\"\" data-bind='checked: CheckVals'\/><div> Check to Agree <\/div><\/pre>\n\n\n\n
Create saveInQuote.php<\/strong><\/em> file under Vendor\\Module\\Controller\\Checkout<\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Controller\\Checkout;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\Controller\\Result\\ForwardFactory;\nuse Magento\\Framework\\View\\LayoutFactory;\nuse Magento\\Checkout\\Model\\Cart;\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Checkout\\Model\\Session;\nuse Magento\\Quote\\Model\\QuoteRepository;\n\nclass saveInQuote extends Action\n{\n    protected $resultForwardFactory;\n    protected $layoutFactory;\n    protected $cart;\n\n    public function __construct(\n        Context $context,\n        ForwardFactory $resultForwardFactory,\n        LayoutFactory $layoutFactory,\n        Cart $cart,\n        Session $checkoutSession,\n        QuoteRepository $quoteRepository\n    )\n    {\n        $this->resultForwardFactory = $resultForwardFactory;\n        $this->layoutFactory = $layoutFactory;\n        $this->cart = $cart;\n        $this->checkoutSession = $checkoutSession;\n        $this->quoteRepository = $quoteRepository;\n\n        parent::__construct($context);\n    }\n\n    public function execute()\n    {\n        $checkVal = $this->getRequest()->getParam('checkVal');\n        $quoteId = $this->checkoutSession->getQuoteId();\n        $quote = $this->quoteRepository->get($quoteId);\n        $quote->setAgree($checkVal);\n        $quote->save();\n    }\n}<\/pre>\n\n\n\n
Step 3: To Save that custom field in Sales_Order table<\/h3>\n\n\n\n
Create events.xml<\/strong><\/em> file under Vendor\\Module\\etc\\<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Event\/etc\/events.xsd\">\n    <event name=\"sales_model_service_quote_submit_before\">\n        <observer name=\"custom_checkbox_code_order_place_before_action\" instance=\"Vendor\\Module\\Observer\\PlaceOrder\"\/>\n    <\/event>\n<\/config><\/pre>\n\n\n\n
Create PlaceOrder.php<\/strong><\/em> file under Vendor\\Module\\Observer\\<\/strong><\/p>\n\n\n\n
<?php\nnamespace Vendor\\Module\\Observer;\nuse Magento\\Framework\\Event\\Observer;\nuse Magento\\Framework\\Event\\ObserverInterface;\nuse Magento\\Quote\\Model\\QuoteFactory;\nuse Psr\\Log\\LoggerInterface;\n\nclass PlaceOrder implements ObserverInterface\n{\n    \/**\n    * @var \\Psr\\Log\\LoggerInterface\n    *\/\n    protected $_logger;\n\n    \/**\n    * @var \\Magento\\Customer\\Model\\Session\n    *\/\n    protected $quoteFactory;\n\n    \/**\n     * Constructor\n     *\n     * @param \\Psr\\Log\\LoggerInterface $logger\n     *\/\n\n    public function __construct(LoggerInterface $logger,\n        QuoteFactory $quoteFactory) {\n        $this->_logger = $logger;\n        $this->quoteFactory = $quoteFactory;\n    }\n\n    public function execute(Observer $observer)\n    {\n        $order = $observer->getOrder();\n        $quoteId = $order->getQuoteId();\n        $quote  = $this->quoteFactory->create()->load($quoteId);\n        $order->setAgree($quote->getAgree());\n        $order->save();\n    }\n}<\/pre>\n\n\n\n
Create routes.xml<\/strong> file at Vendor\\Module\\etc\\frontend<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\"\n        xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\">\n    <router id=\"standard\">\n        <route id=\"Vendor_Module\" frontName=\"module\">\n            <module name=\"Vendor_Module\"\/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n
Step 4: To Display custom field value in admin side order view<\/h3>\n\n\n\n
Create sales_order_view.xml<\/strong><\/em> file under Vendor\\Module\\view\\adminhtml\\layout<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"admin-2columns-left\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"order_info\">\n            <block class=\"Vendor\\Module\\Block\\Adminhtml\\Order\\View\\DisplayCustomValue\" name=\"sales_order_view_custom_value\" template=\"order\/view\/displayCustomValue.phtml\" \/>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Create displayCustomValue.phtml<\/strong><\/em> file under Vendor\\Module\\view\\adminhtml\\templates\\order\\view<\/strong><\/p>\n\n\n\n
<h4>Custom Condition Added :\n<?php $CheckValue = $block->getAgree(); ($CheckValue) ? echo 'Yes' : echo 'No'; ?>\n<\/h4><\/pre>\n\n\n\n
Create displayCustomValue.php<\/strong><\/em> file under Vendor\\Module\\Block\\Adminhtml\\Order\\View\\<\/strong><\/p>\n\n\n\n
<?php\nnamespace Vendor\\Module\\Block\\Adminhtml\\Order\\View;\n\nuse Magento\\Sales\\Api\\Data\\OrderInterface;\nclass DisplayCustomValue extends \\Magento\\Backend\\Block\\Template\n{\n    public function __construct(\n        \\Magento\\Backend\\Block\\Widget\\Context $context,\n        OrderInterface $orderInterface,\n        array $data = []\n    ) {\n        $this->orderInterface = $orderInterface;\n        parent::__construct($context, $data);\n    }\n    public function getAgree(){\n        $orderId = $this->getRequest()->getParam('order_id');\n        $order = $this->orderInterface->load($orderId);\n\n        return $order->getAgree();\n    }\n}<\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Also, do share the solution with the Magento Community via social media.<\/p>\n\n\n\n
Also Read:<\/strong><\/p>\n\n\n\n