ACL is my custom payment method now i want to add custom field below ACL Option in Checkout Page.


enter image description here

  • Is the attribute "bank_name" created? If yes, which type of attributes you created? – PY Yick Sep 19 '18 at 7:21
  • No, I have not created an attribute – Akash Sep 19 '18 at 7:26
  • Which attribute type you want to have for "bank_name"? Customer or customer address? – PY Yick Sep 19 '18 at 7:28
  • a user just fills the bank info, account number for that payment method and admin can see that information. That's it. Can you explain the flow how to create this functionality? – Akash Sep 19 '18 at 7:31
  • Every order is different for "bank_name" from the same customer? – PY Yick Sep 19 '18 at 7:41

To answer your question, there are 3 parts:

  1. Create Order Attribute
  2. Insert attribute when placing order
  3. Read the Order Attribute in payment module

Create Order Attribute

For creating order attribute, you MUST use setup script with the following code:


namespace Vendor\Module\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Quote\Setup\QuoteSetupFactory;
use Magento\Sales\Setup\SalesSetupFactory;

class UpgradeData implements UpgradeDataInterface
     * @var QuoteSetupFactory
    protected $quoteSetupFactory;

     * @var SalesSetupFactory
    protected $salesSetupFactory;

     * @var EavSetupFactory
    protected $eavSetupFactory;

     * Constructor
    public function __construct(
        QuoteSetupFactory $quoteSetupFactory,
        SalesSetupFactory $salesSetupFactory,
        EavSetupFactory $eavSetupFactory
    ) {
        $this->quoteSetupFactory = $quoteSetupFactory;
        $this->salesSetupFactory = $salesSetupFactory;
        $this->eavSetupFactory = $eavSetupFactory;

     * {@inheritdoc}
    public function upgrade(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {

        if (version_compare($context->getVersion(), '1.0.1', '<')) {

            /** @var \Magento\Quote\Setup\QuoteSetup $quoteInstaller */
            $quoteInstaller = $this->quoteSetupFactory->create(['resourceName' => 'quote_setup', 'setup' => $setup]);

            /** @var \Magento\Sales\Setup\SalesSetup $salesInstaller */
            $salesInstaller = $this->salesSetupFactory->create(['resourceName' => 'sales_setup', 'setup' => $setup]);

            //Add attributes to quote
            $entityAttributesCodes = [
                'bank_name' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,

            foreach ($entityAttributesCodes as $code => $type) {
                $quoteInstaller->addAttribute('quote', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);
                $salesInstaller->addAttribute('order', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);

I used upgrade script as example, but you can use inscript to perform the same function too.

Insert attribute when placing order

This process is a little bit tricky but I think it's still OK for you.

  • Create new file app/code/Vendor/Module/etc/extension_attributes.xml with the following code:

    <?xml version="1.0" ?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
        <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
            <attribute code="bank_name" type="string"/>
  • Create file app/code/Vendor/Module/view/frontend/requirejs-config.js with the following code:

    var config = {
        config: {
            mixins: {
                'Magento_Checkout/js/action/set-shipping-information': {
                    'Vendor_Module/js/order/set-shipping-information-mixin': true
  • Create new file app/code/Vendor/Module/view/frontend/web/js/order/set-shipping-information-mixin.js with the following code:

    ], function ($, wrapper, quote) {
        'use strict';
        return function (setShippingInformationAction) {
            return wrapper.wrap(setShippingInformationAction, function (originalAction) {
                var shippingAddress = quote.shippingAddress();
                if (shippingAddress['extension_attributes'] === undefined) {
                    shippingAddress['extension_attributes'] = {};
                // you can extract value of extension attribute from any place (in this example I use customAttributes approach)
                shippingAddress['extension_attributes']['bank_name'] = jQuery('input[name="bank_name"]').val();
                // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
                return originalAction();
  • Create file app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
            <referenceBlock name="checkout.root">
                    <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="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <!-- Your form declaration here -->
                                                                    <item name="custom-checkout-form-container" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Vendor_Module/js/view/order_attr</item>
                                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                        <item name="config" xsi:type="array">
                                                                            <item name="template" xsi:type="string">Vendor_Module/order_attr</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="custom-checkout-form-fieldset" xsi:type="array">
                                                                                <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
                                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                                <!-- the following display area is used in template (see below) -->
                                                                                <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                                                <item name="children" xsi:type="array">
                                                                                    <item name="bank_name" xsi:type="array">
                                                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                        <item name="config" xsi:type="array">
                                                                                            <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                                                                                            <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                        <item name="dataScope" xsi:type="string">customCheckoutForm.bank_name</item>
                                                                                        <item name="label" xsi:type="string">Clearance Full Name</item>
                                                                                        <item name="sortOrder" xsi:type="string">1</item>
                                                                                        <item name="validation" xsi:type="array">
                                                                                            <item name="required-entry" xsi:type="string">true</item>
  • Create file app/code/Vendor/Module/view/frontend/web/template/order_attr.html with the following code:

        <form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
            <fieldset class="fieldset">
                <legend data-bind="i18n: 'Clearance Info'"></legend>
                <div><!-- ko i18n: 'This is clearance description' --><!-- /ko --></div>
                <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
  • Create file app/code/Vendor/Module/view/frontend/web/js/view/order_attr.js with the following code:

    ], function(Component) {
        'use strict';
        return Component.extend({
            initialize: function () {
                // component initialization logic
                return this;
             * Form submit handler
             * This method can have any name.
            onSubmit: function() {
                // trigger form validation
                this.source.set('params.invalid', false);
                // verify that form data is valid
                if (!this.source.get('params.invalid')) {
                    // data is retrieved from data provider by value of the customScope property
                    var formData = this.source.get('customCheckoutForm');
                    // do something with form data
  • Create file app/code/Vendor/Module/etc/di.xml with the following code:

    <?xml version="1.0" encoding="UTF-8"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Checkout\Model\ShippingInformationManagement">
            <plugin name="save-in-quote" type="Vendor\Module\Plugin\AddOrderAttrToQuote" sortOrder="10"/>
  • Create new file app/code/Vendor/Module/Plugin/AddOrderAttrToQuote.php with the following code:

    namespace Vendor\Module\Plugin;
    class AddOrderAttrToQuote
        protected $quoteRepository;
        public function __construct(
            \Magento\Quote\Model\QuoteRepository $quoteRepository
        ) {
            $this->quoteRepository = $quoteRepository;
         * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
         * @param $cartId
         * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
        public function beforeSaveAddressInformation(
            \Magento\Checkout\Model\ShippingInformationManagement $subject,
            \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
        ) {
            $extAttributes = $addressInformation->getShippingAddress()->getExtensionAttributes();
            $bank_name = $extAttributes->getBankName();
            $quote = $this->quoteRepository->getActive($cartId);
  • Create new file app/code/Cleargo/NewAttributes/etc/events.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
        <event name="sales_model_service_quote_submit_before">
            <observer name="handle_order_attrs" instance="Vendor\Module\Observer\HandleOrderAttrs" />
  • Create new file app/code/Vendor/Module/Observer/HandleOrderAttrs.php with the following code:

    namespace Vendor\Module\Observer;
    use \Magento\Framework\Event\ObserverInterface;
    use \Magento\Framework\Event\Observer;
    class HandleOrderAttrs implements ObserverInterface
        public function execute(Observer $observer)
            $order = $observer->getOrder();
            $quote = $observer->getQuote();
            //Load the values
            $bank_name = $quote->getData("bank_name");
            $order->setData('bank_name', $bank_name)

Read the Order Attribute in payment module

For case 3, seems it's from 3rd party module. Anyway, if you want to get the value of bank_name from order, you can use the following code:



It's quite a lot of work to do for an order attribute, but once you get the key point, everything will go smooth.

| improve this answer | |
  • Thanks, You have added a custom tab in shipping information but I want to add below my custom payment method. When I click on payment method then it's shows – Akash Sep 20 '18 at 9:53
  • @Akash did you find any solution. for the same – 111 Mar 27 '19 at 12:36

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.