On checkout completion perform action

Shopify Apps

Topic summary

A developer built a checkout extension with two metafields and wants to trigger an API call when checkout completes, without using webhooks.

Suggested approaches:

  • Use the ScriptTag API (injects a JavaScript file into the storefront) to send API requests; scripts are auto-removed on app uninstall. Documentation link was provided.
  • Host the JS in the theme’s assets and include it via Liquid: {{ ‘filename.js’ | asset_url | script_tag }} to obtain a Shopify CDN URL, though link longevity is uncertain.
  • On the order status/completed page, access the global Shopify object in JavaScript to detect completion and call the API; test via the browser console.

Preferred/ideal method mentioned:

  • Customer Events via the Web Pixels API, using analytics.subscribe(‘checkout_completed’) to run logic when an order completes. References provided, but the responder is unsure how to implement this within a Shopify app.

Key terms:

  • ScriptTag API: Admin REST API to add external JS to a storefront.
  • Liquid: Shopify’s templating language for rendering assets.
  • Web Pixels API/Customer Events: Client-side event framework; checkout_completed fires after purchase.

Outcome: Guidance shared, but no definitive, app-level solution. The question about specific functions within the checkout extension remains open.

Summarized with AI on December 19. AI used: gpt-5.
1

I have created a custom extension for checkout where I have 2 meta fields and now I want the user completes the checkout, I want to hit an API. What is the correct way to do this without the use of webhooks.

Thanks

2

You can use the script tags api, which will add your script js file to the website, and you can add any custom js code inside it to trigger any further api request.

Good thing is, the scripts will automatically be removed on plugin unistallation

Here is the documentation for this :

https://shopify.dev/docs/api/admin-rest/2024-07/resources/scripttag

3

@rockstar08 we have to keep the shopify scripts on some other server I want to do everything from my store only. How is that possible if you have any idea please help.
Thanks

4

Drop your js files into assets folder of your dev shopify or any shopify store you have, and use this liquid code to render the shopify js url:

{{ ‘filename.js’ | asset_url | script_tag }}

Replace filename.js with your own file name, either add this code in your theme.liquid or header.liquid , once added, you can get the script url from shopify cdn, you can use that url, and remove the code you added to get the dynamic js link.

Try this, I am not sure, if those dynamic links work for long time time or might discontinue, you can try it..
Ref to the code : https://shopify.dev/docs/api/liquid/filters/asset_url

5

@rockstar08 Okay thanks, Also do you have any idea regarding checkout extension. There I have created 2 custom fields using metafields and now i want to hit an api after checkout what functions I can use in the script.

If you have any idea then please let me know.

Thanks

6

@rockstar08 Okay thanks, Also do you have any idea regarding checkout extension. There I have created 2 custom fields using metafields and now i want to hit an api after checkout what functions I can use in the script.

If you have any idea then please let me know.

Thanks

7

@rockstar08 Okay thanks, Also do you have any idea regarding checkout extension. There I have created 2 custom fields using meta fields and now I want to hit an API after checkout what functions I can use in the script.

If you have any idea then please let me know.

Thanks

8

@rockstar08 Okay thanks, Also do you have any idea regarding checkout extension. There I have created 2 custom fields using meta fields and now I want to hit an API after checkout what functions I can use in the script.

If you have any idea then please let me know.

Thanks

9

@rockstar08 Okay thanks, also do you have any idea regarding checkout extension. There I have created 2 custom fields using meta fields and now I want to hit an API after checkout what functions I can use in the script.

If you have any idea, then please let me know.

Thanks

10

in your js script, access the Shopify object, its availaible on the checkout page, and check out for some attributes within that object, if those are available you can hit your api.. to play with the object, enter Shopify in browser console, while you are on the order status completed page.. you can test your code in console before adding to your js…

The best way ideally is placing your code in the Customer Events, using the analytics.subscribe event [https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed].

I am not sure how to aceheive this with shopify app. Any logic you place here, will be triggered by shopify on order completion. Ref : https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/manage