Migrating a Checkout Link from Liquid to Checkout Extensibility
We recently set about replacing what was a very simple link displayed once the user had completed a purchase. The code for this link was in the checkout.liquid file. We wanted the same functionality using Checkout Extensibility because the checkout.liquid file was being deprecated.
Accessing the Order ID in Checkout Extensibility
The first piece of information we needed was the order ID for the order that was just placed. Previously, in checkout.liquid, we would have used order.id, but the approach is a little different in a Checkout UI Extension.
Shopify lists some limitations about the information available to the 'Thank You' page, which is displayed immediately following payment:
Note that for extensions on the Thank You page (target purchase.thank-you), the order is not yet created when these extensions are displayed. However, the order ID is available. You can use OrderConfirmationApi to obtain the order confirmation number or the order ID. Use the order ID to uniquely identify the order and fetch additional information using the GraphQL API after order creation is complete.
We know that we can access the order ID through the OrderConfirmation API, which only returns the order ID and number:
Accessing the Customer ID
The second piece of information we needed was the customer ID, and this proved to be slightly more complex because the documentation doesn't directly explain how you can access customer information on the Thank You page, even in the context of limitations.
Let’s step back slightly to understand how the Thank You page has changed in Checkout Extensibility. Previously, in checkout.liquid, the Thank You page also doubled as the order status page, which caused confusion around attribution and tracking because you needed to count only the first time this page was viewed.
With Checkout Extensibility, the Thank You page is displayed (or can be viewed) once and once only. If a user bookmarks the page URL and revisits it a second time (or simply refreshes the page), they are redirected to the order status page instead.
Logged-In vs Logged-Out States
The key takeaway is that both the Thank You and order status pages can exist in two states: either logged in or logged out. In the old checkout.liquid approach, this distinction didn’t matter—we always had access to the customer ID. Now, however, all customer information is only available if the user is logged in, except for the order ID (and name).
Another challenge, where Shopify's documentation was unexpectedly unhelpful, was understanding if, how, and where customer information could be accessed. As soon as you try to access customer data, you’ll encounter the fact that it is protected. We were building a custom app that we’d only install on specific stores rather than releasing it on the app store. Since our app was custom, we had access to the customer data without needing to request permission as listed (this was confirmed via Plus support—let me know if you find this mentioned in the docs!).
New vs Classic Customer Accounts
The final point worth mentioning, but not delving into deeply here, is the difference between 'New' and 'Classic' customer accounts. I learned that there is even an API to identify which type of customer accounts a store is using, which presumably helps app developers understand which functionalities are available to which stores.
A feature comparison between the two account types is useful for an overview, but the headline is that the new version uses a similar extensible approach as the checkout—customising the customer account section via UI extensions instead of using liquid theme files. This is relevant because the order status page will be accessible to the user through their 'profile' section within their account if they are logged in, or via the order confirmation email or Thank You pages if they are not.
Final Thoughts
There are plenty of other APIs I haven't mentioned here, as well as the intricacies of displaying the information once you have it via the many target blocks. While these areas can be confusing at times, they are generally well-documented with code examples to help you get started.