Magento 2 how to remove update button from checkout billing address

Question

We have 2.4.5 magento version.

how can we remove "update" button from billing address and allow to placer order. we have virtual product so in virtual product we do not need to add shipping address we just need to add billing address but client want to remove "update" button for update billing address.so they want to update billing address without click on update button.

Thanks

Answer 1

It will depend on which Payment Method you are using on the website, below is an example of how it can be done for Braintree:

app/code/Namespace/Module/view/frontend/web/js/hosted-fields-mixin.js

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

    var mixin = {
        placeOrderClick: function () {
            uiRegistry.get('checkout.steps.billing-step.payment.payments-list.braintree-form').updateAddress().then(this._super());
        },
    };

    return function (target) {
        return target.extend(mixin);
    };
});

var config = {
    config: {
        mixins: {
            'PayPal_Braintree/js/view/payment/method-renderer/hosted-fields': {
                'Namespace_Module/js/hosted-fields-mixin': true
            }
        }
    }
};

The JS mixin changes how the Place Order button works, so that when you click it, it first updates and saves the billing address before placing the order.

The code will need to be adjusted depending on the Payment method used by your website. You will also need to hide the "Update" button by either updating the billing address template or using CSS.

Answer 2

Andrew's answer helped me out a lot. I wanted to share the code I ended up using for the stripe payment method:

app/code/Namespace/Module/view/frontend/web/js/stripe_payments_mixin.js

define([
    'uiRegistry',
    'Magento_Checkout/js/model/quote',
    'mage/translate',
], function (uiRegistry,quote, $t) {
    'use strict';

    var mixin = {
        placeOrder: function () {
            uiRegistry.get('checkout.steps.billing-step.payment.payments-list.stripe_payments-form').updateAddress();
            if ( quote.billingAddress() && quote.billingAddress().canUseForBilling() ) {
                return this._super();
            } else {
                return this.showError($t('Please complete your billing address.'));
            }
        },
        isBillingAddressSet: function () {
            return true;
        },
    };

    return function (target) {
        return target.extend(mixin);
    };
});

app/code/Namespace/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: 
            'StripeIntegration_Payments/js/view/payment/method-renderer/stripe_payments': {
                'Namespace_Module/js/stripe_payments_mixin': true
            }
        }
    }
};

In Stripe's case isBillingAddressSet needed modified to so the Place Order button would not be disabled.