Shipping Address Missing on Payment Page Refresh

Question

Has this happened to anyone?

When you get to the payment page in checkout and refresh the page, it removes your shipping address with the exception of the zip code and country.

Answer 1

Core file path: vendor/magento/module-checkout/view/frontend/web/js/checkout-data.js

Overwrite To: app/design/frontend/VendorName/ThemeName/Magento_Checkout/web/js/checkout-data.js

Copy below code and paste to overwrite file.

/**
 * Checkout adapter for customer data storage
 *
 * @api
 */

 define([
'jquery',
'Magento_Customer/js/customer-data',
'jquery/jquery-storageapi' //newly added
 ], function ($, storage) {

'use strict';

var cacheKey = 'checkout-data',

    /**
     * @param {Object} data
     */
    saveData = function (data) {
        storage.set(cacheKey, data);
    },

    /**
     * @return {*}
     */
    getData = function () {
        var data = storage.get(cacheKey)();

        if ($.isEmptyObject(data)) {
            data = $.initNamespaceStorage('mage-cache-storage').localStorage.get(cacheKey);//newly added
            if ($.isEmptyObject(data)) {//newly added
                data = {
                    'selectedShippingAddress': null, //Selected shipping address pulled from persistence storage
                    'shippingAddressFromData': null, //Shipping address pulled from persistence storage
                    'newCustomerShippingAddress': null, //Shipping address pulled from persistence storage for customer
                    'selectedShippingRate': null, //Shipping rate pulled from persistence storage
                    'selectedPaymentMethod': null, //Payment method pulled from persistence storage
                    'selectedBillingAddress': null, //Selected billing address pulled from persistence storage
                    'billingAddressFromData': null, //Billing address pulled from persistence storage
                    'newCustomerBillingAddress': null //Billing address pulled from persistence storage for new customer
                };
            }//newly added
            saveData(data);
        }

        return data;
    };

return {
    /**
     * Setting the selected shipping address pulled from persistence storage
     *
     * @param {Object} data
     */
    setSelectedShippingAddress: function (data) {
        var obj = getData();

        obj.selectedShippingAddress = data;
        saveData(obj);
    },

    /**
     * Pulling the selected shipping address from persistence storage
     *
     * @return {*}
     */
    getSelectedShippingAddress: function () {
        return getData().selectedShippingAddress;
    },

    /**
     * Setting the shipping address pulled from persistence storage
     *
     * @param {Object} data
     */
    setShippingAddressFromData: function (data) {
        var obj = getData();

        obj.shippingAddressFromData = data;
        saveData(obj);
    },

    /**
     * Pulling the shipping address from persistence storage
     *
     * @return {*}
     */
    getShippingAddressFromData: function () {
        return getData().shippingAddressFromData;
    },

    /**
     * Setting the shipping address pulled from persistence storage for new customer
     *
     * @param {Object} data
     */
    setNewCustomerShippingAddress: function (data) {
        var obj = getData();

        obj.newCustomerShippingAddress = data;
        saveData(obj);
    },

    /**
     * Pulling the shipping address from persistence storage for new customer
     *
     * @return {*}
     */
    getNewCustomerShippingAddress: function () {
        return getData().newCustomerShippingAddress;
    },

    /**
     * Setting the selected shipping rate pulled from persistence storage
     *
     * @param {Object} data
     */
    setSelectedShippingRate: function (data) {
        var obj = getData();

        obj.selectedShippingRate = data;
        saveData(obj);
    },

    /**
     * Pulling the selected shipping rate from local storage
     *
     * @return {*}
     */
    getSelectedShippingRate: function () {
        return getData().selectedShippingRate;
    },

    /**
     * Setting the selected payment method pulled from persistence storage
     *
     * @param {Object} data
     */
    setSelectedPaymentMethod: function (data) {
        var obj = getData();

        obj.selectedPaymentMethod = data;
        saveData(obj);
    },

    /**
     * Pulling the payment method from persistence storage
     *
     * @return {*}
     */
    getSelectedPaymentMethod: function () {
        return getData().selectedPaymentMethod;
    },

    /**
     * Setting the selected billing address pulled from persistence storage
     *
     * @param {Object} data
     */
    setSelectedBillingAddress: function (data) {
        var obj = getData();

        obj.selectedBillingAddress = data;
        saveData(obj);
    },

    /**
     * Pulling the selected billing address from persistence storage
     *
     * @return {*}
     */
    getSelectedBillingAddress: function () {
        return getData().selectedBillingAddress;
    },

    /**
     * Setting the billing address pulled from persistence storage
     *
     * @param {Object} data
     */
    setBillingAddressFromData: function (data) {
        var obj = getData();

        obj.billingAddressFromData = data;
        saveData(obj);
    },

    /**
     * Pulling the billing address from persistence storage
     *
     * @return {*}
     */
    getBillingAddressFromData: function () {
        return getData().billingAddressFromData;
    },

    /**
     * Setting the billing address pulled from persistence storage for new customer
     *
     * @param {Object} data
     */
    setNewCustomerBillingAddress: function (data) {
        var obj = getData();

        obj.newCustomerBillingAddress = data;
        saveData(obj);
    },

    /**
     * Pulling the billing address from persistence storage for new customer
     *
     * @return {*}
     */
    getNewCustomerBillingAddress: function () {
        return getData().newCustomerBillingAddress;
    },

    /**
     * Pulling the email address from persistence storage
     *
     * @return {*}
     */
    getValidatedEmailValue: function () {
        var obj = getData();

        return obj.validatedEmailValue ? obj.validatedEmailValue : '';
    },

    /**
     * Setting the email address pulled from persistence storage
     *
     * @param {String} email
     */
    setValidatedEmailValue: function (email) {
        var obj = getData();

        obj.validatedEmailValue = email;
        saveData(obj);
    },

    /**
     * Pulling the email input field value from persistence storage
     *
     * @return {*}
     */
    getInputFieldEmailValue: function () {
        var obj = getData();

        return obj.inputFieldEmailValue ? obj.inputFieldEmailValue : '';
    },

    /**
     * Setting the email input field value pulled from persistence storage
     *
     * @param {String} email
     */
    setInputFieldEmailValue: function (email) {
        var obj = getData();

        obj.inputFieldEmailValue = email;
        saveData(obj);
    },

    /**
     * Pulling the checked email value from persistence storage
     *
     * @return {*}
     */
    getCheckedEmailValue: function () {
        var obj = getData();

        return obj.checkedEmailValue ? obj.checkedEmailValue : '';
    },

    /**
     * Setting the checked email value pulled from persistence storage
     *
     * @param {String} email
     */
    setCheckedEmailValue: function (email) {
        var obj = getData();

        obj.checkedEmailValue = email;
        saveData(obj);
    }
};
});

After spent more time - finally i found this solution. Just try and thumps up.

Answer 2

Check if there is any custom or third-party module, which could send ajax request by POST protocol. POST request triggers refreshing of some cookies, then it causes empty customer data on checkout - empty address, email, first and last names.

Answer 3

I fixed this issue by disabling the persistent shoppingcart. Stores -> Configuration -> Customers -> Persistent Shopping Cart -> Enable Persistence

I found it by debugging this Observer: magento/module-persistent/Observer/CheckExpirePersistentQuoteObserver.php. This observer is triggered by controller_action_predispatch. In this file is are a few checks and if they pass they will expire the quote which will also remove mage-cache-sessid cookie. This results in triggering this function:

 /**
     * Invalidate Cache By Close Cookie Session
     */
    invalidateCacheByCloseCookieSession = function () {
        if (!$.cookieStorage.isSet('mage-cache-sessid')) {
            $.cookieStorage.set('mage-cache-sessid', true);
            storage.removeAll();
        }
    };

in the magento/module-customer/view/frontend/web/js/customer-data.js file. Here the storage.removeAll(); will empty the localstorage.

If you don't want to disable persistent shopping cart, you need take a look at the checks in the Observer: magento/module-persistent/Observer/CheckExpirePersistentQuoteObserver.php.

if ($this->_persistentData->isEnabled() &&
    !$this->_persistentSession->isPersistent() &&
    !$this->_customerSession->isLoggedIn() &&
    $this->_checkoutSession->getQuoteId() &&
    !$observer->getControllerAction() instanceof \Magento\Checkout\Controller\Onepage
    // persistent session does not expire on onepage checkout page to not spoil customer group id
    ) {
        $instance = $instance;
        $this->_eventManager->dispatch('persistent_session_expired');
        $this->quoteManager->expire();
        $this->_customerSession->setCustomerId(null)->setCustomerGroupId(null);
    }

With !$observer->getControllerAction() instanceof \Magento\Checkout\Controller\Onepage they try to prevent to lose the checkout data. But in my case I use custom modules like: PostNL which had their own controller actions in the checkout, so this check would pass and the localstorage was cleared.

PS. There is allready an upcoming fix: https://github.com/magento/magento2/commit/bcffc4161e4960713922506870e1a4b711c5ca9e#diff-ee3a4dc8a625074b5313aa7d915944fd where the check is based on the requestUri. A side note is that if you leave the checkout page the localstorage is also cleared.

----------- Update -----------

Since 2.2.6 the solution above is fixed, but if you are still having this issue take a look at this: https://github.com/magento/magento2/issues/12390 Probably a third party module is doing some post request. Custom post requests are causing magento to create a new cookie and this causes the invalidation of the localstorage

Answer 4

It seems to be a core issue also present in Magento 2.1.

Look at the Github issue for further explanations and possible fix.