I am currently developing a service that is typically integrated into a client's website using a script tag or Google Tag Manager.
The main purpose of this service is to validate user input in various input fields, provide autocomplete suggestions, and correct erroneous entries.
Here is a breakdown of how the service operates:
From the visitor's perspective:
Now, I am facing a challenge with the new Checkout extensibility system, as there is no longer an option to include a script tag. When attempting to use WebPixels to inject my script, it was encapsulated in an iframe, preventing the script from accessing the DOM for modifications.
I've realized that creating a Shopify integration might be the only solution, but I am uncertain about the approach. Ideally, I would like to import the service's JS library within the Shopify integration to avoid rewriting the entire logic. Is this possible, or do I need to build the entire logic from scratch? If the latter is the case, what type of extension should I choose as the base building block — Theme extension, Checkout UI, or Cart and Checkout validation?
Here is the screenshot of how the service basically looks:
I appreciate any assistance as I am very new to Shopify development.