Magento2: mini-cart not empty after programmatically placing an order on success page

Question

I have a custom payment gateway module.
When you click on the Place Order button on checkout, it redirects you to an external payment page & after that you return to a custom controller on that module.
This controller handles the payment response & if it's all good - it converts the current quote to an order using placeOrder() from Magento\Quote\Api\CartManagementInterface. Then it redirects you to the normal success page ('checkout/onepage/success/').
The problem is, although the order has been placed & it all worked as it should - the minicart on the header is not empty (You get to the success page, see a link to the order details, but the mini cart stays full).
I tested other payment methods like checkmo, etc... & they always clear the carts somehow, it only happens with this payment method.
*I know that I can use customerData.invalidate(['cart']); on the success page as a workaround (that's my current solution actually, and it works), but I don't like it. I assume that there's something that happens on the other methods/flows that triggers the minicart refresh.
What am I missng here?
Any idea?

Answer 1

Try to add below script in the vendor\magento\module-checkout\view\frontend\templates\success.phtml

<script>
     require([
         'Magento_Customer/js/customer-data'
     ], function (customerData) {
         var sections = ['cart'];
         customerData.invalidate(sections);
         customerData.reload(sections, true);
     });
 </script>

Answer 2

For anyone else who stumbles across this same problem. The issue seems to be that you need to invalidate the cart local storage on the success callback of the place order function in checkout. There are two ways to accomplish this.

1. Manually with in your javascript success callback from a successful place order operation:

customerData.invalidate(['cart']);

2. Using the sections.xml like so:

<action name="rest/*/V1/guest-carts/*/payment-information">
    <section name="cart"/>
</action>

Basically, built in mage code (customer-data.js) monitors for post or put requests to the URL supplied in the name attribute and invalidates the cart or whatever customerData section key you supply here. See the core codebase for examples of how this gets used. More information explaining the second method here: https://alanstorm.com/understanding-the-limitations-of-sectionsxml/

Most built in methods seem to use the sections.xml. I noticed a bug in the built in amazon pay module that would result in a stale minicart after a successful checkcout. Attempting to resolve this, I was unable to get the sections.xml method to work properly because of the way that payment flow works. I used the first method invalidating the customerData storage on the place order success callback to resolve the issue.