Injecting 3rd party service into the new Shopify Extensibility Checkout

DooMxDD
Shopify Partner
1 0 1

 

 

Hello everyone,

 

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:

  1. Users create an account within the service.
  2. They then inject their generated script tag with a link to the JavaScript library (containing all the necessary logic and CSS styles).
  3. Users set the HTML selectors for the input fields to which they want to apply the service.

From the visitor's perspective:

  1. The visitor navigates to the checkout page.
  2. 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.
  3. 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?

 

Here is the screenshot of how the service basically looks:

DooMxDD_1-1703878732865.png

 

 

I appreciate any assistance as I am very new to Shopify development.

Many thanks!

Reply 1 (1)

ecbLR
Tourist
9 0 1