you need to create a plugin in your custom module ( the one that you used to create the custom attribute ), and have the code something like the following one:
namespace Package\Name\Plugin\Checkout;
class LayoutProcessor
{
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
// Loop all payment methods (because billing address is appended to the payments)
$configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
foreach ($configuration as $paymentGroup => $groupConfig) {
if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['custom_attribute_code'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'id' => 'custom_attribute_id',
],
'dataScope' => $groupConfig['dataScopePrefix'] . '.custom_attribute_id',
'label' => __('Custom attribute label'),
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [
'required-entry' => true,
'min_text_length' => 0,
],
'sortOrder' => 300,
'id' => 'custom_attribute_id'
];
}
}
return $jsLayout;
}
}
Hope this helps
Based on your question I'm under the assumption you already have your extension attributes set up. I have carried out a similar modification and hopefully my answer helps.
In your Custom module create a requirejs-config file to extend the default shipping processor/default
Namespace/CustomModule/view/frontend/requirejs-config.js
var config = {
"map": {
"*": {
'Magento_Checkout/js/model/shipping-save-processor/default': 'Namespace_CustomModule/js/model/shipping-save-processor/default'
}
}
};
Add your extension attribute to the payload.
/*global define,alert*/
define(
[
'jquery',
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address'
],
function (
$,
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction
) {
'use strict';
return {
saveShippingInformation: function () {
var payload;
if (!quote.billingAddress()) {
selectBillingAddressAction(quote.shippingAddress());
}
//Adding the extension attributes to your shipping address
payload = {
addressInformation: {
shipping_address: quote.shippingAddress(),
billing_address: quote.billingAddress(),
shipping_method_code: quote.shippingMethod().method_code,
shipping_carrier_code: quote.shippingMethod().carrier_code,
extension_attributes:{
custom_field: $('#custom_field').val(),
}
}
};
fullScreenLoader.startLoader();
return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response.payment_methods));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
}
);
Save the Attribute to your Quote with a plugin (Not sure if you could use an observer here I have not checked).
di.xml
<?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\ShippingInformationManagement">
<plugin name="Namespace_CustomModule_save_delivery_date_in_quote" type="Namespace\CustomModule\Plugin\Checkout\SaveAddressInformation" />
</type>
</config>
SaveAddressInformation.php
class SaveAddressInformation
{
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,
$cartId,
\Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
) {
$extensionAttributes = $addressInformation->getExtensionAttributes();
$customField = $extensionAttributes->getCustomField();
$quote = $this->quoteRepository->getActive($cartId);
$quote->setCustomField($customField);
}
}
Save the Attribute to your order with an Observer
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="unique_observer_name" instance="Namespace\CustomModule\Observer\SaveCustomFieldToOrder"/>
</event>
</config>
SaveCustomFieldToOrder.php
class SaveCustomFieldToOrder implements ObserverInterface
{
/**
* @var \Magento\Framework\ObjectManagerInterface
*/
protected $_objectManager;
/**
* @param \Magento\Framework\ObjectManagerInterface $objectmanager
*/
public function __construct(\Magento\Framework\ObjectManagerInterface $objectmanager)
{
$this->_objectManager = $objectmanager;
}
public function execute(EventObserver $observer)
{
$order = $observer->getOrder();
$quoteRepository = $this->_objectManager->create('Magento\Quote\Model\QuoteRepository');
/** @var \Magento\Quote\Model\Quote $quote */
$quote = $quoteRepository->get($order->getQuoteId());
$order->setCustomField( $quote->getCustomField() );
return $this;
}
}
Best Answer
app/code/SR/MagentoStackExchange/view/frontend/requirejs-config.js
app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-mixin.js
Here you need to add your custom message to shipping method object. So change shippingMethod.custom_text = 'Custom Message'; your way.
app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-information-mixin.js
app/code/SR/MagentoStackExchange/view/frontend/web/template/shipping-information.html