How to Use Payment Extension Attributes in Magento 2

Never miss Magento tips, tricks, tutorials, and news.
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.
Thank you for subscribing.
Thank You.
Feel free to share the solution with Magento Community via social media.
If you have any doubts regarding this post, don’t be confused; just mention them in the Comments section below.

Method to Use Payment Extension Attributes in Magento 2

1. Create registration.php file at appcodeVendorModule
   
   <?php use MagentoFrameworkComponentComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, ‘Vendor_Module’, __DIR__);

   use MagentoFrameworkComponentComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, ‘Vendor_Module’, __DIR__);

2. Create module.xml file at appcodeVendorModuleetc
   
   <?xml version=”1.0″?><br /> <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″/><br /> </config>

   <?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”/>

3. Create an extension_attributes.xml file at appcodeVendorModuleetc
   
   <?xml version=”1.0″?><br /> <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Api/etc/extension_attributes.xsd”> <extension_attributes for=”MagentoQuoteApiDataPaymentInterface”> <attribute code=”custom” type=”string”/> </extension_attributes><br /> </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=“MagentoQuoteApiDataPaymentInterface”>         <attribute code=“custom” type=“string”/>     </extension_attributes>

4. Create a requirejs-config.js file at appcodeVendorModuleviewfrontend
   
   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             }         }     };

5. Create place-order-mixin.js file at appcodeVendorModuleviewfrontendwebjsorder
   
   define([ ‘jquery’, ‘mage/utils/wrapper’, ‘Vendor_Module/js/order/custom-assigner’<br /> ], function ($, wrapper, ordercommentAssigner) { ‘use strict’; return function (placeOrderAction) { return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) { ordercommentAssigner(paymentData); return originalAction(paymentData, messageContainer); }); };<br /> });

   ‘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);         });     };

6. Create custom-assigner.js at appcodeVendorModuleviewfrontendjsorder
   
   define([ ‘jquery’<br /> ], function ($) { ‘use strict’; return function (paymentData) { if (paymentData[‘extension_attributes’] === undefined) { paymentData[‘extension_attributes’] = {}; } paymentData[‘extension_attributes’][‘custom’] = jQuery(‘[name=”ordercomment[custom]”]’).val(); };<br /> });

   ‘jquery’ ], function ($) {     ‘use strict’;     return function (paymentData) {         if (paymentData[‘extension_attributes’] === undefined) {             paymentData[‘extension_attributes’] = {};         }         paymentData[‘extension_attributes’][‘custom’] = jQuery(‘[name=”ordercomment[custom]”]’).val();     };

7. Create set-payment-information-mixin.js at appcodeVendorModuleviewfrontendjsorder
   
   define([ ‘jquery’, ‘mage/utils/wrapper’, ‘Vendor_Module/js/order/custom-assigner’<br /> ], function ($, wrapper, ordercommentAssigner) { ‘use strict’; return function (placeOrderAction) { return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) { ordercommentAssigner(paymentData); return originalAction(messageContainer, paymentData); }); };<br /> });

   ‘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);         });     };

8. Create di.xml at appcodeVendorModuleetc
   
   <?xml version=”1.0″?><br /> <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:ObjectManager/etc/config.xsd”> <type name=”MagentoCheckoutModelPaymentInformationManagement”> <plugin name=”set_payment_data_before_save” type=”VendorModulePluginModelSavePaymentPlugin” sortOrder=”10″/> </type> <type name=”MagentoCheckoutModelGuestPaymentInformationManagement”> <plugin name=”guest_set_payment_data_before_save” type=”VendorModulePluginModelGuestSavePaymentPlugin” sortOrder=”10″/> </type><br /> </config>

   <?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=“MagentoCheckoutModelPaymentInformationManagement”>         <plugin name=“set_payment_data_before_save”                 type=“VendorModulePluginModelSavePaymentPlugin” sortOrder=“10”/>     </type>     <type name=“MagentoCheckoutModelGuestPaymentInformationManagement”>         <plugin name=“guest_set_payment_data_before_save”                 type=“VendorModulePluginModelGuestSavePaymentPlugin” sortOrder=“10”/>     </type>

9. Create SavePaymentPlugin.php at VendorModulePluginModel
   
   <?php namespace VendorModulePluginModel; use MagentoCheckoutModelPaymentInformationManagement;<br /> use MagentoQuoteApiDataAddressInterface;<br /> use MagentoQuoteApiDataPaymentInterface; class SavePaymentPlugin<br /> { protected $quoteRepository; public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject, $cartId, PaymentInterface $paymentMethod, AddressInterface $billingAddress = null) { $orderCustom = $paymentMethod->getExtensionAttributes(); $objectManager = MagentoFrameworkAppObjectManager::getInstance(); $quoteRepository = $objectManager->create(‘MagentoQuoteApiCartRepositoryInterface’); $quote = $quoteRepository->getActive($cartId); $custom = $orderComment->getCustom(); $quote->setCustom(custom); $quote->save(); }<br /> }

   namespace VendorModulePluginModel; use MagentoCheckoutModelPaymentInformationManagement; use MagentoQuoteApiDataAddressInterface; use MagentoQuoteApiDataPaymentInterface; class SavePaymentPlugin     protected $quoteRepository;     public function beforeSavePaymentInformationAndPlaceOrder(PaymentInformationManagement $subject,                                                               $cartId, PaymentInterface $paymentMethod,                                                               AddressInterface $billingAddress = null)         $orderCustom = $paymentMethod->getExtensionAttributes();         $objectManager = MagentoFrameworkAppObjectManager::getInstance();         $quoteRepository = $objectManager->create(‘MagentoQuoteApiCartRepositoryInterface’);         $quote = $quoteRepository->getActive($cartId);         $custom = $orderComment->getCustom();         $quote->setCustom(custom);         $quote->save();

10. Create GuestSavePaymentPlugin.php at VendorModulePluginModel
    
    <?php namespace VendorModulePluginModel; use MagentoCheckoutModelPaymentInformationManagement;<br /> use MagentoQuoteApiDataAddressInterface;<br /> use MagentoQuoteApiDataPaymentInterface; class GuestSavePaymentPlugin<br /> { 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 = MagentoFrameworkAppObjectManager::getInstance(); $quoteRepository = $objectManager->create(‘MagentoQuoteApiCartRepositoryInterface’); $quote = $quoteRepository->get($quoteId); $custom = $orderComment->getCustom(); $quote->setCustom(custom); $quote->save(); }<br /> }

    namespace VendorModulePluginModel; use MagentoCheckoutModelPaymentInformationManagement; use MagentoQuoteApiDataAddressInterface; use MagentoQuoteApiDataPaymentInterface; 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 = MagentoFrameworkAppObjectManager::getInstance();         $quoteRepository = $objectManager->create(‘MagentoQuoteApiCartRepositoryInterface’);         $quote = $quoteRepository->get($quoteId);         $custom = $orderComment->getCustom();         $quote->setCustom(custom);         $quote->save();

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 solution is the method to use payment extension attributes in Magento 2 that allows saving the custom field values in the database.
The below method shows the same:
Something went wrong.
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.
I would be glad to help.

/**/

/*.mfp-bg{background:#000000d4}
/*]]>*/

/*.mfp-bg.mfp-ready{opacity:.6}
/*]]>*/