Magento 2 : Implement update functionality of new customer billing address on place order button in checkout page

Question

I want to remove the "update" button under the customer billing address section and implement the update functionality on the "place order" button in checkout page.

Successfully completed a half portion by combining billing-address.js with default.js and billing-address.html with checkout.html files.

File paths:

_vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js _vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js _vendor/magento/module-checkout/view/frontend/web/template/billing-address.html _vendor/magento/module-offline-payments/view/frontend/web/template/payment/checkmo.html

The scenario i followed:

First, rewrite the placeOrder databind code for multiple bindings on click event in checkout.html. Copy all code from billing-address.html and pasted into the checkout.html page where the place order button is placed. Erase the update & cancel button code and wrote the placeOrder button code instead of that.

Then wrote the update function in default.js and copy all the codes need to work this from billing-address.js.

Result:

When unchecked the box, a drop-down shows all the current addresses along with a new address option. Now, we can choose any of the address from the list and place the order. The address will be updated.

But when i choose the new address option from the drop-down list it didn't shows the address form.

Answer 1

Solved the above issue. If you want to avoid the update and cancel button under the billing address and implement the update functionality when click on place order button, no need to go through the above way.

File path: _vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js

First copy this file and place in your theme folder. Then, just replace this below code with the placeOrder function and hide the update and cancel button using css- display:none;

 placeOrder: function (data, event)
 {
 if($('.billing-address-form:visible').length == 0)
 {
 $('.action-update').click();
 var self = this;
 if (event) {
 event.preventDefault();
 }
 if (this.validate() && additionalValidators.validate()) {
 this.isPlaceOrderActionAllowed(false);
 this.getPlaceOrderDeferredObject()
 .fail(
 function () {
 self.isPlaceOrderActionAllowed(true);
 }
 ).done(
 function () {
 self.afterPlaceOrder();
 if (self.redirectAfterPlaceOrder) {
 redirectOnSuccessAction.execute();
 }
 }
 );
 return true;
 }
 return false;
 }
 else
 {
 var firstname = $("input[name=firstname]").val();
 var lastname = $("input[name=lastname]").val();
 var street = $("input[name='street[0]']").val();
 var city = $("input[name=city]").val();
 var regionid = $("input[name=region_id]").val();
 var postcode = $("input[name=postcode]").val();
 var countryid = $("input[name=country_id]").val();
 var telephone = $("input[name=telephone]").val();
 if((firstname == '') || (lastname == '') || (street = '') || (city == '') || (regionid = '') || (postcode = '') || (countryid == '') || (telephone = ''))
 {
 $('.action-update').click();
 }
 }
 },

• DevAnd: Not working on mine. Any ideas? I basically want to hide the cancel button and update button under billing address and have it update once a user clicks on place order. @ritajose
• Dominic Pixie: I used the above as inspiration for my solution github.com/DominicWatts/Checkout

Answer 2

Not working on mine. Any ideas? I basically want to hide the cancel button and update button under billing address and have it update once a user clicks on place order. @ritajose

define(
 [
 'ko',
 'jquery',
 'uiComponent',
 'Magento_Checkout/js/action/place-order',
 'Magento_Checkout/js/action/select-payment-method',
 'Magento_Checkout/js/model/quote',
 'Magento_Customer/js/model/customer',
 'Magento_Checkout/js/model/payment-service',
 'Magento_Checkout/js/checkout-data',
 'Magento_Checkout/js/model/checkout-data-resolver',
 'uiRegistry',
 'Magento_Checkout/js/model/payment/additional-validators',
 'Magento_Ui/js/model/messages',
 'uiLayout',
 'Magento_Checkout/js/action/redirect-on-success'
 ],
 function (
 ko,
 ,ドル
 Component,
 placeOrderAction,
 selectPaymentMethodAction,
 quote,
 customer,
 paymentService,
 checkoutData,
 checkoutDataResolver,
 registry,
 additionalValidators,
 Messages,
 layout,
 redirectOnSuccessAction
 ) {
 'use strict';
 return Component.extend({
 redirectAfterPlaceOrder: true,
 isPlaceOrderActionAllowed: ko.observable(quote.billingAddress() != null),
 /**
 * After place order callback
 */
 afterPlaceOrder: function () {
 // Override this function and put after place order logic here
 },
 /**
 * Initialize view.
 *
 * @return {exports}
 */
 initialize: function () {
 var billingAddressCode,
 billingAddressData,
 defaultAddressData;
 this._super().initChildren();
 quote.billingAddress.subscribe(function (address) {
 this.isPlaceOrderActionAllowed(address !== null);
 }, this);
 checkoutDataResolver.resolveBillingAddress();
 billingAddressCode = 'billingAddress' + this.getCode();
 registry.async('checkoutProvider')(function (checkoutProvider) {
 defaultAddressData = checkoutProvider.get(billingAddressCode);
 if (defaultAddressData === undefined) {
 // Skip if payment does not have a billing address form
 return;
 }
 billingAddressData = checkoutData.getBillingAddressFromData();
 if (billingAddressData) {
 checkoutProvider.set(
 billingAddressCode,
 $.extend(true, {}, defaultAddressData, billingAddressData)
 );
 }
 checkoutProvider.on(billingAddressCode, function (providerBillingAddressData) {
 checkoutData.setBillingAddressFromData(providerBillingAddressData);
 }, billingAddressCode);
 });
 return this;
 },
 /**
 * Initialize child elements
 *
 * @returns {Component} Chainable.
 */
 initChildren: function () {
 this.messageContainer = new Messages();
 this.createMessagesComponent();
 return this;
 },
 /**
 * Create child message renderer component
 *
 * @returns {Component} Chainable.
 */
 createMessagesComponent: function () {
 var messagesComponent = {
 parent: this.name,
 name: this.name + '.messages',
 displayArea: 'messages',
 component: 'Magento_Ui/js/view/messages',
 config: {
 messageContainer: this.messageContainer
 }
 };
 layout([messagesComponent]);
 return this;
 },
 /**
 * Place order.
 */
 placeOrder: function (data, event) {
 var self = this;
 if (event) {
 event.preventDefault();
 }
 if (this.validate() && additionalValidators.validate()) {
 this.isPlaceOrderActionAllowed(false);
 this.getPlaceOrderDeferredObject()
 .fail(
 function () {
 self.isPlaceOrderActionAllowed(true);
 }
 ).done(
 function () {
 self.afterPlaceOrder();
 if (self.redirectAfterPlaceOrder) {
 redirectOnSuccessAction.execute();
 }
 }
 );
 return true;
 }
 return false;
 },
 getPlaceOrderDeferredObject: function () {
 return $.when(
 placeOrderAction(this.getData(), this.messageContainer)
 );
 },
 /**
 * @return {Boolean}
 */
 selectPaymentMethod: function () {
 selectPaymentMethodAction(this.getData());
 checkoutData.setSelectedPaymentMethod(this.item.method);
 return true;
 },
 isChecked: ko.computed(function () {
 return quote.paymentMethod() ? quote.paymentMethod().method : null;
 }),
 isRadioButtonVisible: ko.computed(function () {
 return paymentService.getAvailablePaymentMethods().length !== 1;
 }),
 /**
 * Get payment method data
 */
 getData: function () {
 return {
 'method': this.item.method,
 'po_number': null,
 'additional_data': null
 };
 },
 /**
 * Get payment method type.
 */
 getTitle: function () {
 return this.item.title;
 },
 /**
 * Get payment method code.
 */
 getCode: function () {
 return this.item.method;
 },
 /**
 * @return {Boolean}
 */
 validate: function () {
 return true;
 },
 /**
 * @return {String}
 */
 getBillingAddressFormName: function () {
 return 'billing-address-form-' + this.item.method;
 },
 /**
 * Dispose billing address subscriptions
 */
 disposeSubscriptions: function () {
 // dispose all active subscriptions
 var billingAddressCode = 'billingAddress' + this.getCode();
 registry.async('checkoutProvider')(function (checkoutProvider) {
 checkoutProvider.off(billingAddressCode);
 });
 }
 });
 }
);

• coding mv: did you find any solution please? , i need the same