Ecommerce Shopify WordPress Discussion

How to inject 3rd Party Service Into The New Shopify Extensibility Checkout

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: Users create an account within the service. They then inject their generated script tag with a link to the JavaScript library (containing all the necessary logic and CSS styles). Users set the HTML selectors for the input fields to which they want to apply the service. From the visitor's perspective: The visitor navigates to the checkout page. He begins entering information, such as his address into the corresponding input field that matches the configured HTML selector, and the JavaScript library triggers and sends an API call to the service. The service returns suggestions for autocompletion, which are displayed as a list. When a visitor clicks on a list item, the input is corrected directly within the input field. Additionally, the input border and label change colors based on the current validation status (valid/invalid/semi-valid). 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? I appreciate any assistance as I am very new to Shopify development. Many thanks!
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.