Magento – Magento 2 payment Checkout page keep showing loader

checkoutmagento-2.1payment-methods

Magento 2 payment Checkout page keep showing loader. without showing any error on console or in terminal.

Best Answer

It's because none of the payment options will be enabled by default. You can enable with Stores->configuration-> Sales->Payment Methods-> Cash On Delivery Payment. So for testing purpose, you can enable 'Cash on Delivery' option from admin panel. Flush the cache and then try again.

Workaround:

Override vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js into your theme

magento/app/design/frontend/Vendor/Theme/Magento_Checkout/web/js/model/shipping-save-processor/default.js

Inside this file you will find fullScreenLoader.stopLoader(); called on done and fail methods

So you need to replace them with fullScreenLoader.stopLoader(true); which will force stop the loader and resolve the issue.

stopLoader() method is defined in vendor/magento/module-checkout/view/frontend/web/js/model/full-screen-loader.js

Edit: I assume that some component fails on the checkout and trigger .fail() method but the error processor is not handling errors correctly and display errors and hides the loader.

Magento 2 – How to Continue Showing Loader on Checkout

I found a solution.

Open vendor/magento/module-checkout/view/frontend/web/js/action/set-payment-information.js and find:

return storage.post(
    serviceUrl, JSON.stringify(payload)
).fail(
    function (response) {
        errorProcessor.process(response, messageContainer);
    }
).always(
    function () {
        fullScreenLoader.stopLoader(); // you need remove this
    }
);

For replace code you can create "preference" for this file in your theme in requirejs-config.js.

Best Answer

Related Solutions

Magento2 Checkout – Checkout Stuck at Step 2 (Payment)

Workaround:

Magento 2 – How to Continue Showing Loader on Checkout

Related Topic