Storefront API Cart returns cart after completed order

[malthemilthers]

Hi,

Im experiencing a problem with the storefront api. Specifically the Cart mutations. I have a custom storefront which checks if a cart ID exists in localstorage. If it doesnt, a new cart is created. If it does I retrieve that cart, so that the user can continue shopping with the same items they left in the cart. All of this works as expected. 

But once the customer completes the order, that cart is still available, as if it hadnt been completed. I was expecting the Cart call to return null, but I still get back all the line items. So the customer will still see all the same items in their cart, as they where before they went through checkout. 

Have anyone else had this issue? And does anyone know how this is suppose to work? How am I suppose to be able to clear the cart after the customer goes through checkout? 

Thanks!

[ollebergkvist]

I'm having the same issue.

The issue is that the checkout flow lives on another domain, and you are setting the localstorage on the custom frontend that you've built.

I would say that Shopify needs to extend their Storefront API, so that there's a way to query to check if a checkout with a given id has completed the full checkout flow. This way you would be able to call this endpoint from your custom frontend and if the checkout for a given cart id is marked as completed, you simply unset the localstorage.

I find it weird that this scenario has not been considered by the Shopify Storefront devs...

I'm not sure if there's a workaround meanwhile, trying to think about a solution...

[malthemilthers · Accepted solution]

Hi Olle - thanks, but I actually discovered that the issue had to do with the third party payment provider. They had some error on the "thank you" page, which resulted in the cart not being completed. We switched payment provider, and the API behaved as i expected, returning null on completed orders. 

[KfDev]

Hi, we also encounter the same problem. Could you tell us what payment provider to be used, to fix it? currently and how you do it? currently our step to checkout is as follow
- Create cart
- Associate Cart with user
- Add Items
- Using checkoutURL given from cart object to Finish payment

I think that was a normal step. but our cart is still there, and the line items are still existed. seriously tho if only the oder object has cart id associated with it we could probably handle this, but sadly the order doesn't give us any hint to where the order come from too. we also have used almost the same workaround as Olle. But using deeplink instead, by putting script in the checkout page. but all of it could only happens if customer succeeded in going to thank you page. what if user do a go back or there is post-purchase page before the thank you page?

[malthemilthers]

Hi - we switched from ePay to Quickpay and Shopify payments. And that worked for us without custom scripts on the checkout page.

[ollebergkvist]

Here's a solution while we wait for Shopify to add this basic feature to their API...

1. Replace localStorage with cookies (in order to be able to remove cookies server-side).
2. Create an API endpoint in your Next application where you simply delete the cookie you set on the client side, and then create a redirect to the home route of your custom frontend
3. Enter the Shopify dashboard and go to Settings -> Checkout 
4. Add a script with a couple of seconds delay to redirect the client from the order confirmation page to your API route.
5. Cookie with cart items is now deleted and the user is back on your custom frontend 🙂

It's not the best UX, but it works... 

If someone else can think of a better solution I would love to hear it ✌️