Storefront API Checkout URL not working

[endigo9740]

Hi everyone, I'm the creator and core maintainer for the Skeleton UI library 👋

I'm in the process of building a new storefront that will sell premium assets for Skeleton, such as website templates. I've been very much enjoying Shopify and it's features, and we've managed to implement the majority of our store using the Storefront API. I've been able to query collections, products, create a cart, etc.

Unfortunately I've been hitting a wall when it comes to the checkoutUrl provided by the createCart mutator. Here's what I'm trying:

Reference: https://shopify.dev/docs/api/storefront/2023-04/mutations/cartCreate

mutation cartCreate {
  cartCreate {
    cart {
      id
      checkoutUrl
    }
    userErrors {
      field
      message
    }
  }
}

This works and does provide a checkout URL as expected:

Unfortunately no matter how many times I try this, the URL provided does not work as expected. Instead we're always rerouted to the homepage of our Shopify hosted template store. I've recorded a quick video showing this:

Kapture_2023-07-05_at_11.03.59.mp4

You'll note I'm logging the checkoutUrl in the console, which is shown very briefly before the redirect occurs. Post redirect, we land on the homepage, which has the default store theme with the following console error repeated several times:

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL at M (content.bundle.js:2:25815)

It feels like it's trying to redirect to a particular route that doesn't exist or is not accessible, so we're getting dumped back on the homepage.

However if I try to go through the checkout process on the hosted site, I do end up on the checkout page as expected as shown here:

Kapture.2023-07-05.at.14.55.15.mp4

The only difference I've noted is the structure of the URLs differ:

• From the Storefrom API: https://4138c8-2.myshopify.com/cart/c/c1-89ab99927ad41a361f18a4cc5925bb5e
• From the Hosted Store: https://4138c8-2.myshopify.com/checkouts/c/cda28b1e811e9a7791ff3193da4687cb/information

Any ideas what I'm doing wrong here? Is there maybe a store permission or flag I need to toggle in our admin to enable this to work? We're currently using the Basic plan if that matters.

Thanks for any help you can provide!

[endigo9740]

Hey @johncraigcole I apologize for pinging you directly on this one, but you seem like one of the few active folks in threads here.

I've reached out to the Shopify live chat support, the forums, the Shopify Dev Discord, and now here. We've been roadblocked on this issue for a couple days - if you can't help us directly is there any way you could send us in the right direction for where we might be able to get some assistance on this issue?

We're on a tight deadline to get this store up and running, so again I apologize for being impatient. Thanks for any help you can provide. If I can provide any additional information to help please just let me know.

[johncraigcole]

@endigo9740 I'll take a quick look.

[johncraigcole]

@endigo9740 can you share the ticket # with support?

Is this still happening? We did have an issue relating to this where I believe a fix hit production after the time you initially observed the behavior with the cart you shared above. Could you try with a new call to cartCreate and let me know if the issue is still happening? If it is, please share the cart id.

[endigo9740]

@johncraigcole thanks for taking a look. I just tested in the GraphQL client and I'm seeing the same results:

{
  "data": {
    "cartCreate": {
      "cart": {
        "id": "gid://shopify/Cart/c1-b397a47c6c91b5b036a511fa303164a3",
        "checkoutUrl": "https://4138c8-2.myshopify.com/cart/c/c1-b397a47c6c91b5b036a511fa303164a3"
      },
      "userErrors": []
    }
  }
}

can you share the ticket # with support?

Not sure I follow. I've only contacted support directly through a live chat and no ID was provided for that. The rep I spoke with didn't seem to understand technical API issues and suggested I used the Shopify forums.

Here's the Discord thread I made - one user responded there with a similar reply (saying a similar issue had already been resolved):
https://discord.com/channels/842813079926603828/1126032954414600303

We had critical issue with the checkoutUrl of cartCreate mutation since last saturday. None of our customers checkout worked correctly. It seems that Shopify tech team pushed a fix on their API, now everything is working as before. Could you try again ?
And to answer some of your question, the cartCreate mutation works perfectly with basic plan, I already tested it on simple dev store.

[johncraigcole]

@endigo9740 your second example might be because the cart is empty?

Checkout can't be started without any line items, so it redirects to the online store cart page. In a custom storefront build on Shopify, typically a developer would add a JS client side redirect to theme.liquid which redirects traffic back to the custom storefront. The redirect piece is documented here. While the docs are for Hydrogen and Oxygen, it's applicable to any custom storefront with a Shopify hosted checkout.

[endigo9740]

Checkout can't be started without any line items, so it redirects to the online store cart page.

Gotcha. I had concerns about the cart being empty in the GraphQL tests, but in our actual app we are appending items to the cart, but the result is basically the same. We end up on the homepage (not cart page). You can see this demonstrated in the video shared in my original post above.

It's getting late here, but I'll implement some additional testing tomorrow to confirm the the items are making it to the cart before we redirect.

In a custom storefront build on Shopify, typically a developer would add a JS client side redirect to theme.liquid which redirects traffic back to the custom storefront. The redirect piece is documented here. While the docs are for Hydrogen and Oxygen, it's applicable to any custom storefront with a Shopify hosted checkout.

Good to know! We definitely want a redirect before our store goes live - but haven't done any of that right now things are still in development. I didn't want to further complicate things while we resolve the issue at hand. But we will definitely do that soon.

[johncraigcole]

Sounds good. Like I said, around the time of your original example we did have an issue that was later resolved on the same day. I'm optimistic that a new cart with line items should see the user stay in checkout and not be redirected to online store.

[endigo9740]

Hey @johncraigcole I'm happy to report I've managed to get this working!

So there ended up being a few issues here:

1. Generating the cart without line items just fails outright - as you alerted us to
2. I'm building this in SvelteKit, so we're using this example by the Vercel team as reference. Unfortunately it's fairly dated and using the GraphQL API version /2021-10/
3. I opted to update to the latest API version, but addToCart mutation was failing because the product keys have changes from variantID to merchandiseId

Resolving all that I've now successfully reached the checkout screen with a product in place. I have one more minor issues where only one of the two products in my cart are making it to checkout, but I have a good idea of why that's happening. (fix this as well!)

Thank you so much for your help - if you don't mind some constructive feedback from a user, I'd suggest plastering that an empty cart will create a URL that will not work all over the place in your docs heh. It should be obvious, but sometimes being explicit can help dumb users like myself :)

Thanks again!

[miksony]

Hi @johncraigcole,

I followed this discussion since we stepped into a similar problem and got it easily resolved with your answers.

We are building multiple custom storefronts that are related to the same Shopify store.
As in this example we are only using Shopify checkout for both guest customers and logged-in customers (with Multipass).

Is there a way to somehow inject a redirect URL after checkout? Keep in mind that we have multiple storefronts so it needs to know where to return.

I have checked the documentation and tried something with additional scripts on the "post-purchase" and "order status" pages but nothing worked, my custom query param is always deleted on those pages.

Thanks in advance.

[perchlong]

hello,my local shopify hygroden project can use "npm run dev" to run,but it has a problem "Failed to fetch Hydrogen changelog "
,i guess because in cn there is some limit,i need help

[johncraigcole]

Hey @perchlong 👋 thanks for moving this over to the Hydrogen repo. 👍

[fredericbrass]

@johncraigcole Apologies for DMing you on this thread, but I cant find anyone active that might be able to help with an similar issue.

I'm using the hydrogen-react package, I'm managing to update my cart with the perfectly fine, and I can see lineItems being added to my cart correctly. However it seems the checkoutUrl is wrong, redirecting is not working as expected when using the

The checkoutUrl is: http://storedomain.com/cart/c/(token) Looking at other examples of using hydrogen-react I'd expect my checkout url to be something similar to: https://storedomain.myshopify.com/checkouts/cn/(token) Has anyone experienced this before?

For reference, I am moving away from using the js-buy-sdk package as it does not support subscriptions (checkout api versus storefront api) - however in my live app using this package, the checkout url is https://storedomain.myshopify.com/checkouts/cn/(token)

For reference I am giving the storeDomain as 'storedomain.myshopify.com'.

[johncraigcole]

Hey @fredericbrass the Storefront API cart checkoutUrl should have the primary domain on the Shopify store (that could be the myshopify.com domain or a domain you've added) and /cart/c/sometoken?key=somevalue. If that's what you're getting and when following the Storefront API cart checkoutUrl it doesn't work, I would follow up with support so you can be authenticated and direct the request to the appropriate team.

It's expected that the webUrl of the Storefront API checkout object (now marked for depreciation) is using a checkout route instead of a cart route.

[fredericbrass]

Thanks @johncraigcole Appreicate the response!! I'll check in with the things you've mentioned here

[fredericbrass]

Hi @johncraigcole, Thanks for your earlier reply - And I'm sorry to come back to you, but I'm a little stuck after going to Support for help.

There reccomendation is to follow this https://shopify.dev/docs/storefronts/headless/hydrogen/migrate/redirect-traffic sepcifically

Direct checkout traffic to the subdomain (https://shopify.dev/docs/storefronts/headless/hydrogen/migrate/redirect-traffic#direct-checkout-traffic-to-the-subdomain)

• From the Shopify admin, click Settings > Domains.
• For the Subdomain that you connected to Shopify, change the Target to Online Store.
• Set the domain type to Primary.

The issue I have with this is adding a subdomain www.checkout.storedomain.com and changing domain type to Primary means that all other domains then redirect to the domain. So it then will make my www.storedomain.com redirect to www.checkout.storedomain.com

Is there anything you can recommend to solve this issue? Again apologies - I'm just urgently trying to get new functionality working for a client.

[johncraigcole]

Hey @fredericbrass what's been communicated is correct. With Headless commerce on Shopify the www subdomain is typically pointed at the Cloud Provider (3rd party or Shopify if using Hydrogen & Oxygen) that is hosting the headless storefront. Checkout is powered by Shopify and because of this needs to be hosted on a different sub domain from the headless storefront, like checkout.storedomain.com as the www subdomain has been allocated to the headless storefront.

In your example, the headless storefront I suspect would be mapped to www.storedomain.com and because this is not a Shopify Online Liquid Storefront no redirect should happen. Because the checkout subdomain becomes the primary domain for the online store liquid storefront, the redirect is there to cover the event that someone is trying to browse the Shopify liquid storefront or any place where the primary liquid storefront domain is used. For example, a discount promotion link was generated from Shopify. In this instance you would have a domain of checkout.storedomain.com, and more than likely you'd want that discount link to be redirected to your headless storefront.

[PhilipKazmeier]

@johncraigcole sorry for also asking questions here, but you seem to really understand what you are doing.
We have a shop running that uses Shopify only for the cart handling. The shop is running as and is built upon NUXT.

We are currently migrating from the checkout API to the cart API and are facing some issues with the checkoutUrl of the cart API.

With the checkout API we always got back an URL in the following format: https://<SHOPNAME>.myshopify.com/checkouts/co/<ID>
With the cart API we get back an URL like https://<SHOPDOMAIN>/cart/c/<ID>?key=<KEY>

We now face the issue that with the old checkout URL the use got send to the checkout page of Shopify. However, with the URL from the cart API, the user is of course only send to our website that does not have the handling for cart endpoint. I tried changing the URL ton https://.myshopify.com/cart/c/?key=, however that just redirect to our again.

How can we achieve the same behavior that we had with the URL from the checkout API also with the URL from the cart API?

[PhilipKazmeier]

One in my opinion "dirty" solution would be to change the URL and then use something like https://github.com/instantcommerce/shopify-headless-theme to redirect all requests except for the checkout

[johncraigcole]

Hey @PhilipKazmeier your understanding of the Storefront API cart checkoutUrl is correct. The entry into checkout from the Storefront API cart is a cart route not checkout.

As per your question about redirect and domain. Since the root/apex domain is likely pointing to you your headless storefront (either with Shopify on Hydrogen & Oxygen, or external) the recommended approach is that a checkout or shop domain is used as primary.

You're also correct that this means a discount promotion link or email notifications would be by default be using that checkout or shop subdomain. While it resides within our Hydrogen documentation we recommend adding a JS client side redirect to theme.liquid or a meta refresh using http-equiv. With that in place requests to non checkout resources like a discount promotion link the JS redirect could forward the necessary parameters to your headless site.

[johncraigcole]

In a transition where you might have some carts tied to a Storefront API checkout object you might need to think about expiring these before the deprecation of the Storefront API checkout object, and or optionally if the headless site has a checkout object for given user session auto migrate it to the Storefront API cart.

[PhilipKazmeier]

Hey, thanks for the explanation. Is there any benefit in using the hyrdogen redirect in favor of the shopify-headless-theme (https://github.com/instantcommerce/shopify-headless-theme)?

[johncraigcole]

The Hydrogen redirect theme one has handling for bot protection (via template) which would be important if ever turned on for a plus store.