Unintended headless checkout redirect on Partner development store

Technical Q&A
,
1

Hey Shopify team,

I’m working on a Partner development store to demonstrate a headless checkout using the Vercel Commerce starter (https://github.com/vercel/commerce) and am running into an issue that I can’t proceed to checkout.

I see that Partner development stores must have a storefront password set on them. When I checkout on my headless storefront deployed on Vercel (here: https://ninetailed-ecommerce-demo-site.vercel.app/), I experience the following behaviour:

  • I see the browser trying to direct me to the checkout, with a URL of format: https://ninetailed-demo.myshopify.com/[number]/checkouts/[hash]

  • I then see the query parameter “no_cookies_from_redirect=1” appended to the URL. I am redirected to the Shopify theme on the store to enter the storefront password that must be set. After doing so, I am directed to the home page of the Shopify store (not the headless storefront).

  • I navigate back to the headless site and try to checkout again.

  • I am similarly redirected, this time to a blank cart page on the Shopify storefront.

How can I instead proceed to the checkout on this development store? If I recall correctly, I was able to do so as recently as December 2022.

I’ve reproduced the error in this Loom: https://www.loom.com/share/3fbcba6745504f30b5658c4231776c85

2

Resolved! The issue had to do with the Vercel Commerce starter. It was storing and retrieving the Storefront-API created checkout URL in cookies using some characters that can be unsafe in cookies, notably, =. This caused the retrieval of the checkout URL to remove the value of the key query parameter, and so the checkout URL was invalid, which then caused the redirect on Shopify’s side.

3

How did you resolve this? is there a public pr i can look at? currently getting 404 on checkout attempt with vercel commerce.

Thanks

2 Likes
4

Hello, I found the solution for the vercel ecommerce starter and wrote an article to solve it, go to my medium: Sejiux and the title of the article is How to resolve checkout redirection in shopify headless.