How do I use the AJAX API in a headless Shopify + React store?

Solved
Highlighted
Tourist
5 0 1

Hi all!

 

I'm currently building a custom front-end for a Shopify site. I'm using React/Gatsby, which relies on Shopify's Buy SDK and Storefront API.

 

Long story short, I need to access the AJAX API somehow on this site, too. Why? I need to access the cart token, and the only way to get that is from the AJAX API. 

 

I need the cart token in order to redirect users to a custom Carthook checkout. It seems like, on a regular Shopify site, all you need to do to get the cart token is call this:

 

const { token } = async fetch('/cart.js').then(r => r.json())

That's super easy!

 

However, if I try to use the AJAX API on my headless site in development, I get CORS errors. And so, my question is, how can I use the AJAX API from a headless site? When I change the website's main domain to point to my custom React deployment (instead of to the Shopify store), will the AJAX api even work anymore?

 

I tried creating a public Shopify app with a proxy that points to my headless site. However, this requires me to submit the app for Shopify review, and that doesn't make much sense since it's only for one store. Meanwhile, private apps don't allow proxies.

 

Any ideas?

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 103 124

Hi @fernandorojo ,

 

You cannot use the Shopify AJAX API on Headless Shopify storefront. The purpose of the Shopify AJAX API is to allow developers to build creative, interactive buying experiences on Shopify themes - so if you are not using a Shopify theme but instead building your own custom storefront, this API will be unavailable to you. Also, the `cart` attribute that this API can update and add to exists as a cookie that lives on the {store-name}.myshopify.com domain - so if customers are never visit the {store-name}.myshopify.com domain (and instead go to your Headless storefront) this cookie will never be set so there will be no cart to fetch. Also trying to use the AJAX API from a non-Shopify domain to update this cookie that lives on {store-name}.myshopify.com will definitely result in a CORS error, there's no way around that.

 

For your Headless store, you need to leverage the Shopify Storefront API. There is no "cart" property in this API, so instead you will need to create a "checkout" object to act as the store's cart. So as customers are adding or removing items they want to purchase, those line items will be added and removed from the customer's "checkout" object. Then when the customer is read to pay, you need to redirect them to the "webUrl" property of the 'checkout' object.

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Tourist
5 0 1
Thanks so much for your through response.

I am currently using the webUrl field from the Shopify Storefront API.
However, Carthook requires a cart_token field to check out, so I’m not able
to send users to the carthook checkout without a cart token.

I understand that the AJAX API uses a cookie from the shopify store site.
That said, is there any other way to obtain a cart token?

If not, final question — if my URL points to a custom headless site, will
the AJAX API still live on store.myshopify.com/cart.js? I’m wondering if
there is a work-around where users are sent to that link temporarily as a
redirect before going to Carthook checkout.

Thanks again!
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 103 124

This is an accepted solution.

@fernandorojo ,

 

No problem! Happy I could help!

 

I am currently using the webUrl field from the Shopify Storefront API.
However, Carthook requires a cart_token field to check out, so I’m not able
to send users to the carthook checkout without a cart token.

This is probably something you need to speak with the Carthook team on how best to proceed here. Perhaps maybe for Headless stores Carthook can accept the ID or the "webURL" from the Storefront API "checkout" object instead of the Cart Token? 

 

I understand that the AJAX API uses a cookie from the shopify store site.
That said, is there any other way to obtain a cart token?

I do not believe so, no.

 

If not, final question — if my URL points to a custom headless site, will
the AJAX API still live on store.myshopify.com/cart.js? I’m wondering if
there is a work-around where users are sent to that link temporarily as a
redirect before going to Carthook checkout.

That sounds like that could be feasible. I would recommend testing this out on a test store to verify that this indeed works before implementing it on your production store. One thing to keep in mind is that making the customer redirect from your Headless site --> Shopify storefront --> Carthook when the try to checkout may hurt the user experience and reduce conversions.

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Tourist
5 0 1

@hassain 

 

That sounds like that could be feasible. I would recommend testing this out on a test store to verify that this indeed works before implementing it on your production store. One thing to keep in mind is that making the customer redirect from your Headless site --> Shopify storefront --> Carthook when the try to checkout may hurt the user experience and reduce conversions.

Good to know. I share this concern for the UX here. Do you know of anyone who has implemented this step server-side? I guess it probably isn't possible without the cookie, right?

 

0 Likes
Highlighted
New Member
2 0 0

Hey @fernandorojo thanks for asking this question and for thoroughly unpacking it @hassain  — I'm trying to do exactly the same thing. I've got a React / Gatsby site I'm building with the Storefront API, which will also need to integrate ReCharge and then run through a Carthook checkout.

I'm curious what solution you ended up going with, and how the experience has been?

 

0 Likes