Question regarding headless storefront and checkout

[Contango]

Hello we are using a headless implementation of Shopify using Next.js , when a customer tries to check out from our headless store they are redirected to a completely different domain which looks like its part of shopify template store to finalize the payment. Is there a way to keep checkout native and on the domain thats connected to the headless storefront?

TLDR;

Customer visits ourheadlessstore.com

Custom adds item to cart
When customer presses Checkout button customer redirected to  blahblahblah-3.myshopify/checkouts/ 

Any clues on how to keep checkout native on the headless storefront? What am I missing?

[jassyyy · Accepted solution]

Yes, it is possible to keep the checkout process native and on the same domain as your headless Shopify store. This can be achieved through the use of Shopify's Checkout API.

The Checkout API allows you to build custom checkout experiences for your customers. It provides access to the same checkout data and functions as the default Shopify checkout, but with the added flexibility of allowing you to fully customize the checkout process within your own website.

[ruzdic]

You are wrong. It is NOT possible unless you create a Sales Channel which is not practical. This is Shopify's biggest pitfall and reason we don't recommend it.

[leyre]

Even a sales channel can not use a native checkout, I have researched and talked with Shopify employees about this, as a sales channel YOU ARE FORCED to use cart permalinks, even though the documentation says that there is a way to use native checkout this is not possible and the documentation is wrong because it is not updated.  That's why there is no single app (apart of Shop) that has a native checkout for Shopify stores. It is not possible to solve this problem even if you become a marketplace (Faire/Amazon/Ebay) because Shopify does not allow you to use their website or store to redirect the checkout to other website. It seems that this is a strategic move from Shopify. 

[Liquidator3358]

Yeah, unfortunately, this is not correct.  When it comes to your domain, if you point it to your headless application (which we all will), the checkout will be set to default my-store.shopify.com.  This means all links (for instance, the logo on the checkout page) will go back to the default templated store and not your headless application.  I have went around this by forwarding EVERYTHING with my-store.shopify to my headless, but unfortunately, the biggest hurdle is having to deal with a checkout that loses continuity from the main app.  It works for us but it looks tacky, and feels tacky.

[autonize_it]

Definitely incorrect.

We spent a great deal of time building out a custom checkout via the Checkout API only to be informed (after many painful discussions with support) that the documentation is outdated and this is no longer possible

[Technologic]

"Regardless of whether you're using the online store or Hydrogen, customers are always directed back to a Shopify-hosted checkout. Traditionally, a checkout URL might look something like {shop}.myshopify.com/123456/checkouts…."

https://shopify.dev/docs/storefronts/headless/hydrogen/migrate#subdomain-for-checkout