[BUG] 'Continue to checkout' redirects to un-customisable liquid page instead of Hydrogen

[sid2364]

Describe the bug Continue to checkout redirects to un-customizable liquid page instead of Hydrogen

To Reproduce

→ Navigate to https://nosto-hydrogen.herokuapp.com/ → Add product to cart → Click on 'Continue to checkout' → Redirected to https://nosto-hydrogen.myshopify.com/...

Expected behaviour This should be a native Hydrogen page, instead of a liquid one. For Nosto's use case, we want to track users' orders. But we cannot interact with the Shopify server since we are redirected away from the main app. We cannot track what orders are being sent by the user until they navigate back to the website (and then we retrieve order details from Shopify), but this is a flawed workflow since the user has no reason to come back to the website once he's placed an order and navigated away.

Screenshots

Additional context The useCart() hook returns a checkoutUrl which does this redirect. This should really be a page that merchants can customise. For use cases where we want to show other content on the checkout page (like a quick "Add to cart" functionality for "Items bought together frequently").

• Hydrogen version
• Node version
• Device details

[sid2364]

The checkoutURL returned here: https://shopify.dev/api/hydrogen/hooks/cart/usecart#related-components should be a Hydrogen page, not a liquid one.

[davidhousedev]

Hey @sid2364 I'm not a Shopify employee but I can safely say that this is working as intended and is not a bug. Shopify is doing a lot of work on checkout right now to make it customizable while preserving support for Liquid-based storefronts (of which there are many!). If you're curious which customizations are available in the new checkout architecture, take a look at the documentation for Checkout Extensibility: https://shopify.dev/apps/checkout

Based on my personal perspective having maintained a checkout flow myself in a headless e-commerce app for multiple years, having Shopify maintain the checkout flow is a benefit of using Shopify and Hydrogen. While Checkout Extensibility is in its early stages, there's a lot of great work being done there to allow you to customize checkout using a library of React components.

[sid2364]

That clears it up a lot! Thank you so much @davidhousedev. I was under the impression that all pages should be customisable, but it was also pointed out to me that this is done for security reasons as well.

Cheers! 🙌🏽

[shopify[bot]]

Oxygen deployed a preview of your shopify-setup-oxygen-workflow-76j2 branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 17, 2024 5:57 PM

Learn more about Hydrogen's GitHub integration.