Load cart via key for headless and mobile apps

[scottopolis]

The Store API cart cannot be used in a headless app because it relies on cookies. Cookies cannot be accessed in cross-domain or headless environments.

What happens is you can add an item to the cart, but when you make another request, the cart is always empty. This is using the proper nonce authentication.

To make the cart work, you would need to send a cart or session key in the API response, not in a cookie header. Then allow loading a cart with that key with a header or url parameter. CoCart takes this approach as an example: https://docs.cocart.xyz/#cart-get-cart-for-guest-customers

Would you be open to supporting this?

[mikejolley]

@senadir you found a way to utilise cookies in your headless experiment, correct?

[github-actions[bot]]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[anthonymf]

Adding a header as shown in #5953 would resolve this but does it strictly need to use JWT?

[scottopolis]

Hi @anthonymf, no it could work with basic auth headers as well, it just can't use nonces or cookies.

[wavvves]

@anthonymf @scottopolis I think JWT would be a more standard, modern, and robust way of transporting a Cart Token as opposed to implementing the Basic Auth header as per RFC 7617.

I replaced the third-party JWT library with a specific HS256 JWT utility class we can maintain, re-use, and extend in the future, have a look here and tell what are your thoughts about keeping JWT 🙂

[anthonymf]

@wavvves Personally speaking, I was only really concerned about JWT due to the external dependency. So I think you propose a sensible way forward but I'd be out of my depth if I were to comment on the implementation details 😄

[github-actions[bot]]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[pixlaverse]

I've tried following along but I'm still confused.. How can we get the cart token from the api call in react after adding to the cart?

const resp = await axios(config).then((response) => {
    console.log(response.data)
  })

[senadir]

This was closed by mistake, we will merge and release the cart token work soon.

[jolebrahim]

This was closed by mistake, we will merge and release the cart token work soon.

Hello, Do you have a release date for the fix for this issue?

[wavvves]

Hello, Do you have a release date for the fix for this issue?

Hi @jolebrahim, there is currently a bug loading cart states created solely via API being fixed. The estimated release will be along 8.7.0 scheduled for Oct 10.

[Amir-moradnejad]

when you fetch " domain.com//wp-json/wc/store/v1/cart/items" in this request response you get basket Items and also you can access to the "cart-token" in the response header. you can use response.headers.get("cart-token") and save it in local storage and when you want to add items in basket set it in request header.

before i fetch " domain.com//wp-json/wc/store/v1/cart/items" , I check the local storage and if "cart-token" has saved in it i use it in request header and if not( in first request i get it and save in local storage) .

if you have any problem i can explain more. @scottopolis