Better Checkout Error Message Magento 2

Question

It seems for many people, the error message on checkout is out of their screen view and the message rapidly disappeas, so most of the time the error occurs the customer has no idea and just continues to hit the place order button over and over. This is for AVS errors and when cards are declined or any other error.

Is there a way to change the error to show in a modal pop-up that would show on the users screen and require the user to close the error message? Or make the error message more visible and persistent?

Answer 1

You can stop the message from hiding with the following.

Copy from:

vendor/magento/module-ui/view/frontend/web/template/messages.html

Paste to:

app/design/frontend/YourPackage/YourTheme/Magento_Ui/web/template/messages.html

Remove the visible binding. Change:

<div data-role="checkout-messages" class="messages" data-bind="visible: isVisible(), click: removeAll">

to:

<div data-role="checkout-messages" class="messages" data-bind="click: removeAll">

The visible binding starts the timer that hides the message after five seconds. Remove that, but keep the "click" binding so customers can hide the message by clicking on it.

Clear your cache and re-deploy the static content:

bin/magento setup:upgrade
bin/magento setup:static-content:deploy

Answer 2

we can do it from js mixin

in you custom module view/frontend/requirejs-config.js

var config = {
config: {
        mixins: {
            'Magento_Ui/js/view/messages': {
                'NameSpace_Module/js/messages-mixin': true
            }
        }
    }
};

messages-mixin.js

define([
    'jquery'
], function($) {
    'use strict';
    return function(targetModule) {
        return targetModule.extend({
            onHiddenChange: function (isHidden) {
            var self = this;

            // Hide message block if needed
//            if (isHidden) {
//                setTimeout(function () { 
//                    $(self.selector).hide('blind', {}, 500);
//                }, 30000);                
//            }
            }
        });
    };

});