Magento – Magento-2 : How to display custom field just after payment method list and save on place order

checkoutmagento2sales-order

I want to display one text area, just after payment method list, on checkout page.

Text area value should be saved on place order.
Saved value also need to be displayed in Admin >> sales >> order >> view >> payment method.

In which table should I add the custom columns, so the values can be easily displayed on the admin-side.

UPDATE

I have displayed text-area to checkout step, How to save value on place order?

Thanks

Best Answer

At first, you must not add any custom columns to existing core tables, if you need you should create own tables.

I see at least two possible solutions:

It might be enough to store all custom fields in payment additional information, how to do it see dev docs. You can add custom fields to payment method additional_data before place order request, or read data from the request in the observer. After that, you need to add paymentInfoKeys for all existing payment methods (a plugin might be useful) - http://devdocs.magento.com/guides/v2.1/payments-integrations/base-integration/payment-option-config.html. Now, all custom fields will be displayed in payment method details.
Create own table for custom fields and use extension attributes to store custom fields for payment method. In that case, you also need to retrieve custom data in the observer but store it in the extension attributes, as an example - https://github.com/magento/magento2/blob/develop/app/code/Magento/Vault/Observer/AfterPaymentSaveObserver.php (in your case it will retrieve data from the request or additional_data, store in custom table and set to the extension attributes) and you need an additional plugin to load extension attributes - https://github.com/magento/magento2/blob/develop/app/code/Magento/Vault/Plugin/PaymentVaultAttributesLoad.php (reads from custom table and set to extension attributes). The final step is to create a block and provide own layout to render custom data.

<referenceBlock name="order_additional_info"> <block class="BlockClassName" name="custom_name" template="BlockClassName::template_name.phtml"/> </referenceBlock>

The order_additonal_info will be available starting from 2.2.0 release but you can use payment_additional_info or order_payment_additional.

How to save value on place order?

Again, I see at least few solutions:

Each payment method has additional_data and you can update it before place order but you need to prevent default placeOrder function for each payment method - https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L129.
Use afterPlaceOrder (https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L48) callback to send own request with custom fields.

Related Solutions

Magento 2 – How to Add Custom Field Before Place Order Button and Get Value in Observer

checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="payments-list" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="order-comment" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Namespace_Modulename/js/view/comment</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="dataScope" xsi:type="string">checkoutcomment</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

In comment.js

define(
    [
        'ko',
        'jquery',
        'uiComponent'
    ],
    function (ko, $, Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Namespace_Modulename/checkout/comment'
            }
        });
    }

);

in comment.html

<form data-role="order-comments" method="post">
    <label><strong>Order Comment</strong></label>
    <textarea class="input-text" name="order_comment" type="text"></textarea>
</form>

make a column in qoute and sales_order column In observer save like this

    $order = $observer->getOrder();
    $quoteRepository = $this->_objectManager->create('Magento\Quote\Model\QuoteRepository');
    $quote = $quoteRepository->get($order->getQuoteId());
    $order->setOrderComment( $quote->getOrderComment() );

Magento – Magento2: Add new Field in Cart page and Save in order

Magento provides additional attribute functionality to pass additional data. On cart page, create input field for remark then in custom module's events.xml, create an observer like below :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="checkout_cart_product_add_after">
        <observer name="customremark" instance="Companyname\Modulename\Observer\customremark" />
    </event>

</config>

Then in observer, you can get this remark field from request

<?php

namespace Companyname\Modulename\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\RequestInterface;

class SetAdditionalOptions implements ObserverInterface
{
    /**
     * @var RequestInterface
     */
    protected $_request;

    /**
     * @param RequestInterface $request
     */
    public function __construct(
        RequestInterface $request
    ) {
        $this->_request = $request;
    }

    /**
     * @param \Magento\Framework\Event\Observer $observer
     */
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        // Check and set information according to your need
        if ($this->_request->getFullActionName() == 'checkout_cart_add') { //checking when product is adding to cart
            $product = $observer->getProduct();
            $additionalOptions = [];
            $additionalOptions[] = array(
                'label' => "Remark",
                'value' => "Your Information",
            );
            $observer->getProduct()->addCustomOption('additional_options', serialize($additionalOptions));
        }
    }
}

Hope this helps.

Best Answer

Related Solutions

Magento 2 – How to Add Custom Field Before Place Order Button and Get Value in Observer

Magento – Magento2: Add new Field in Cart page and Save in order

Related Topic