Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Readiness of "checkout.order.financial_status" and "checkout.line_items" in 'Thank You' page

Readiness of "checkout.order.financial_status" and "checkout.line_items" in 'Thank You' page

Thomasemarsys
Visitor
3 0 0

This is the first time I dropped message in Shopify Community.

We need to capture purchase result and line items for web bahavior tracking in 'Thank You' page, when customers complete the payment successfully.


In the "Additional scripts" of checkout setting page (Shopify admin page),
we added our code to check "checkout.order.financial_status". (Shopify object)


If the financial status is 'paid' or 'authorized',
we can run our JS code to retrieve "checkout.order_id" and detail of "checkout.line_items" for behavior tracking.


However, for some cases, "checkout.order.financial_status" is not in 'paid' or 'authorized' status when the 'Thank you' page is loaded. (however, it maybe empty or 'pending')

Under this situation, "checkout.line_items" object has not yet been ready as well, which we cannot retrieve enough information for bahavior tracking.


Appreciate for anyone who can help, if it is possible to avoid readiness issue of "checkout.order.financial_status" and "checkout.order_id/checkout.line_items" when the 'Thank you' page is loaded after payment completion.

 

Thanks a lot

Replies 2 (2)

Liam
Community Manager
3108 342 884

Hi Thomasemarsys,

 

The "Additional Scripts" box in the Shopify admin allows you to add custom JavaScript code that runs on the order status/ Thank You page after a customer completes their checkout. The checkout object is available on this page and contains information about the customer's order.

 

However, the checkout object's `order` property, which includes the `financial_status` field, is only accesible if the order was processed successfully. If the order is still being processed when the order status page loads, the `order` property might not be available, and the `financial_status` field might be `null` or `'pending'`.

 

Unfortunately, there's no built-in way to delay the loading of the order status page until the order processing is complete. The order status page loads as soon as the customer completes their checkout, and the order processing happens asynchronously in the background.

 

One possible workaround is to use JavaScript to periodically check the financial_status field and delay the execution of your tracking code until the financial_status is 'paid' or 'authorized'. You could do this using the setInterval function to create a loop that checks the financial_status field every few seconds. 

 

Another option could be to use webhooks - you can create a webhook for the `orders/paid` event which will be triggered when an order is paid. The webhook payload will include all the order details including the `order_id` and `line_items`.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Thomasemarsys
Visitor
3 0 0

Hi Liam,

 

Thanks for your advise.

 

I have tried setInterval function (Javascript) to create a loop that checks the financial_status field every few seconds.
However, it seems not working.
As per my observation, "checkout.order.financial_status" is variable in liquid code (e.g. similar to PHP variable in server side). Once the HTML is generated by liquid code, the "checkout.order.financial_status" value is fixed in the HTML.
Even the setInterval function (Javascript code) in client side loops again and again, the "checkout.order.financial_status" value will not change.

 

Sorry, if I misunderstand the concept, please correct me.

 

To have a updated "checkout.order.financial_status" value, it needs to reload the HTML page.
However, to reload the HTML page by program or have a popup page 5 seconds later. (i.e. simulation to reload the HTML page with updated "checkout.order.financial_status" value)
it may affect customer user experience.

 

Appreciate if you may share your opinion.

 

Thanks & regards,

 

Thomas