Magento 2 is the leading E-commerce platform that provides improved scalability and flexibility for an online store.

An example of Magento 2’s flexibility is that store owners can customize and overwrite the core features of its framework according to the business requirements.

One such requirement is to add custom fields into our entities. To serve this purpose, Magento 2 offers a flexible and declarative way to extend functionality that is called extension attributes.

Magento 2 extension attributes are primarily containers used for adding an additional piece of information to our entities that allow adding additional custom data into an entity such as Product, Customer, Order, etc.

The below solution is the method to use payment extension attributes in Magento 2 that allows saving the custom field values in the database.

For example, the customers enter custom messages or comments while placing the order, and to save these comments, you need to pass it with the payment details using knockout JS.

The below method shows the same:

Method to Use Payment Extension Attributes in Magento 2

Create registration.php file at app\code\Vendor\Module

<?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);
1
2
3
4
5
<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);

Create module.xml file at app\code\Vendor\Module\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0"/>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</config>

Create an extension_attributes.xml file at app\code\Vendor\Module\etc

<?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\PaymentInterface">
        <attribute code="custom" type="string"/>
    </extension_attributes>
</config>

<?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\PaymentInterface">

</extension_attributes>

</config>

Create a requirejs-config.js file at app\code\Vendor\Module\view\frontend

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/place-order': {
                'Vendor_Module/js/order/place-order-mixin': true
            },
            'Magento_Checkout/js/action/set-payment-information': {
                'Vendor_Module/js/order/set-payment-information-mixin': true
            }
        }
    };

var config = {

config: {

mixins: {

'Magento_Checkout/js/action/place-order': {

'Vendor_Module/js/order/place-order-mixin': true

'Magento_Checkout/js/action/set-payment-information': {

'Vendor_Module/js/order/set-payment-information-mixin': true

}

};

Create place-order-mixin.js file at app\code\Vendor\Module\view\frontend\web\js\order

define([
    'jquery',
    'mage/utils/wrapper',
    'Vendor_Module/js/order/custom-assigner'
], function ($, wrapper, ordercommentAssigner) {
    'use strict';

    return function (placeOrderAction) {

        return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
            ordercommentAssigner(paymentData);

            return originalAction(paymentData, messageContainer);
        });
    };
});

define([

'jquery',

'mage/utils/wrapper',

'Vendor_Module/js/order/custom-assigner'

], function ($, wrapper, ordercommentAssigner) {

'use strict';

return function (placeOrderAction) {

return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {

ordercommentAssigner(paymentData);

return originalAction(paymentData, messageContainer);

});

};

});

Create custom-assigner.js at app\code\Vendor\Module\view\frontend\js\order

define([
    'jquery'
], function ($) {
    'use strict';

    return function (paymentData) {

        if (paymentData['extension_attributes'] === undefined) {
            paymentData['extension_attributes'] = {};
        }

        paymentData['extension_attributes']['custom'] = jQuery('[name="ordercomment[custom]"]').val();
    };
});

define([

'jquery'

], function ($) {

'use strict';

return function (paymentData) {

if (paymentData['extension_attributes'] === undefined) {

paymentData['extension_attributes'] = {};

}

paymentData['extension_attributes']['custom'] = jQuery('[name="ordercomment[custom]"]').val();

};

});

Create set-payment-information-mixin.js at app\code\Vendor\Module\view\frontend\js\order

define([
    'jquery',
    'mage/utils/wrapper',
    'Vendor_Module/js/order/custom-assigner'
], function ($, wrapper, ordercommentAssigner) {
    'use strict';

    return function (placeOrderAction) {
        return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) {
            ordercommentAssigner(paymentData);

            return originalAction(messageContainer, paymentData);
        });
    };
});

define([

'jquery',

'mage/utils/wrapper',

'Vendor_Module/js/order/custom-assigner'

], function ($, wrapper, ordercommentAssigner) {

'use strict';

return function (placeOrderAction) {

return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) {

ordercommentAssigner(paymentData);

return originalAction(messageContainer, paymentData);

});

};

});

Create di.xml at app\code\Vendor\Module\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <type name="Magento\Checkout\Model\PaymentInformationManagement">
        <plugin name="set_payment_data_before_save"
                type="Vendor\Module\Plugin\Model\SavePaymentPlugin" sortOrder="10"/>
    </type>

    <type name="Magento\Checkout\Model\GuestPaymentInformationManagement">
        <plugin name="guest_set_payment_data_before_save"
                type="Vendor\Module\Plugin\Model\GuestSavePaymentPlugin" sortOrder="10"/>
    </type>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<plugin name="set_payment_data_before_save"

type="Vendor\Module\Plugin\Model\SavePaymentPlugin" sortOrder="10"/>

</type>

<plugin name="guest_set_payment_data_before_save"

type="Vendor\Module\Plugin\Model\GuestSavePaymentPlugin" sortOrder="10"/>

</type>

</config>

Create SavePaymentPlugin.php at Vendor\Module\Plugin\Model

<?php

namespace Vendor\Module\Plugin\Model;

use Magento\Checkout\Model\PaymentInformationManagement;
use Magento\Quote\Api\Data\AddressInterface;
use Magento\Quote\Api\Data\PaymentInterface;

class SavePaymentPlugin
{
    protected $quoteRepository;

    public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject,
                                                              $cartId, PaymentInterface $paymentMethod,
                                                              AddressInterface $billingAddress = null)
    {
        $orderCustom = $paymentMethod->getExtensionAttributes();

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $quoteRepository = $objectManager->create('Magento\Quote\Api\CartRepositoryInterface');

        $quote = $quoteRepository->getActive($cartId);
        $custom = $orderComment->getCustom();
        $quote->setCustom(custom);
        $quote->save();
    }
}

<?php

namespace Vendor\Module\Plugin\Model;

use Magento\Checkout\Model\PaymentInformationManagement;

use Magento\Quote\Api\Data\AddressInterface;

use Magento\Quote\Api\Data\PaymentInterface;

class SavePaymentPlugin

{

protected $quoteRepository;

public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject,

$cartId, PaymentInterface $paymentMethod,

AddressInterface $billingAddress = null)

{

$orderCustom = $paymentMethod->getExtensionAttributes();

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$quoteRepository = $objectManager->create('Magento\Quote\Api\CartRepositoryInterface');

$quote = $quoteRepository->getActive($cartId);

$custom = $orderComment->getCustom();

$quote->setCustom(custom);

$quote->save();

}

Create GuestSavePaymentPlugin.php at Vendor\Module\Plugin\Model

<?php

namespace Vendor\Module\Plugin\Model;

use Magento\Checkout\Model\PaymentInformationManagement;
use Magento\Quote\Api\Data\AddressInterface;
use Magento\Quote\Api\Data\PaymentInterface;

class GuestSavePaymentPlugin
{
    protected $quoteRepository;

    public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject,
                                                              $cartId, $email, PaymentInterface $paymentMethod,
                                                              AddressInterface $billingAddress = null)
    {
        $quoteIdMask = $this->quoteIdMaskFactory->create()->load($cartId, 'masked_id');
        $quoteId = $quoteIdMask->getQuoteId();
        $orderCustom = $paymentMethod->getExtensionAttributes();

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $quoteRepository = $objectManager->create('Magento\Quote\Api\CartRepositoryInterface');

        $quote = $quoteRepository->get($quoteId);
        $custom = $orderComment->getCustom();
        $quote->setCustom(custom);
        $quote->save();
    }
}

<?php

namespace Vendor\Module\Plugin\Model;

use Magento\Checkout\Model\PaymentInformationManagement;

use Magento\Quote\Api\Data\AddressInterface;

use Magento\Quote\Api\Data\PaymentInterface;

class GuestSavePaymentPlugin

{

protected $quoteRepository;

public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject,

$cartId, $email, PaymentInterface $paymentMethod,

AddressInterface $billingAddress = null)

{

$quoteIdMask = $this->quoteIdMaskFactory->create()->load($cartId, 'masked_id');

$quoteId = $quoteIdMask->getQuoteId();

$orderCustom = $paymentMethod->getExtensionAttributes();

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$quoteRepository = $objectManager->create('Magento\Quote\Api\CartRepositoryInterface');

$quote = $quoteRepository->get($quoteId);

$custom = $orderComment->getCustom();

$quote->setCustom(custom);

$quote->save();

}

Now you can easily save your additional field’s data after placing an order.

Done!

If you have any doubts regarding this post, don’t be confused; just mention them in the Comments section below.

I would be glad to help.

Feel free to share the solution with Magento Community via social media.

Thank You.

(based on 13 Reviews)

How to Use Payment Extension Attributes in Magento 2

Method to Use Payment Extension Attributes in Magento 2

Kanchi Upadhyay

Leave a reply: Cancel Reply

Customer Service

Quick Links

Client's Love

How to Use Payment Extension Attributes in Magento 2

Method to Use Payment Extension Attributes in Magento 2

Get Weekly Updates

Kanchi Upadhyay

Leave a reply: Cancel Reply

<img alt="Meetanshi" class="footer-logo-img" src="https://meetanshi.com/blog/wp-content/uploads/2020/01/meetanshi_small.png"/>

Customer Service

Quick Links

Client's Love