How to checkout JS is compatible with storefornt API or not?

Shopify Plus
,

Topic summary

Ensuring custom JavaScript compatibility with a Shopify Plus mobile app checkout that uses the Storefront API (Shopify’s GraphQL API for storefronts) is the core issue. The goal is to display custom code in the mobile checkout; JS loads but a dropdown does not appear on the payment page, with no visible errors.

Suggested validation steps and tools:

  • Check the JS library’s documentation for explicit Storefront API compatibility.
  • Integrate and test basic Storefront API operations (e.g., product fetch, add to cart) to confirm interoperability; monitor for errors.
  • Use a compatibility tool (e.g., “Shopify Compatibility Tool,” as mentioned) to evaluate the JS file.
  • Retrieve the checkout ID (via network inspection), query checkout via the Storefront API (GraphQL) for required data, then integrate custom code in the app.
  • Test via Postman for API responses and Shopify App Bridge in a dev environment; follow app best practices and ensure proper permissions.

Current blocker: the dropdown is not rendering on the mobile checkout’s payment page despite JS loading and no errors. The poster seeks methods/tools to diagnose why it isn’t displayed. Status: unresolved and open for further guidance.

Summarized with AI on January 28. AI used: gpt-5.
1

We are trying to work for a Shopify Plus merchant, which is using a Mobile App. Who is using Store Front API to fetch the checkout?

So, we would like to display our custom code in the same checkout Mobile app for the merchant, so we are looking to test if our JS is compatible with StoreFront API or not.

Also, what are the steps to check it on our end? If we can get input on this, then that will be really helpful :slightly_smiling_face:

2

To check if a JavaScript library is compatible with the Storefront API, you can follow these steps:

  1. Check the documentation: Check the documentation of the JavaScript library to see if it mentions compatibility with the Storefront API. If the library explicitly states that it is compatible with the Storefront API, then you can be confident that it will work.
  2. Test it: You can test the library by integrating it with the Storefront API and running some basic functions to see if it works as expected. For example, you can try retrieving product information or adding a product to the cart using the library.
  3. Check for errors: If you encounter any errors or issues while testing the library, check the documentation or contact the library’s support team to see if they can help resolve the issue. If the library is not compatible with the Storefront API, you may need to find an alternative library or consider developing your own solution.
  4. Use a compatibility tool: There are some tools available online that can help you check the compatibility of JavaScript libraries with the Storefront API. One such tool is the Shopify Compatibility Tool, which allows you to enter the URL of a JavaScript file and see if it is compatible with the Storefront API.

Solution

If the mobile app is using the Storefront API to fetch the checkout, you can use the Storefront API to fetch the checkout information and display your custom code in the mobile app. To do this, you can follow these steps:

  1. Retrieve the checkout ID: You can retrieve the checkout ID from the mobile app by inspecting the network requests that are made when the checkout is loaded. The checkout ID is typically included in the URL of the checkout page or in the response body of the Storefront API request.
  2. Use the Storefront API: Once you have the checkout ID, you can use the Storefront API to fetch the checkout information. You can use the GraphQL endpoint of the Storefront API to query the checkout object and retrieve the necessary information such as line items, shipping address, and payment information.
  3. Integrate your custom code: Once you have the checkout information, you can integrate your custom code into the mobile app. Depending on the type of custom code you are working with, you may need to modify the mobile app code to add the custom functionality.

To test your integration, you can use a tool such as Postman to make requests to the Storefront API and verify that you are able to retrieve the checkout information. You can also use the Shopify App Bridge to test the integration in a development environment before deploying it to the live app.

It’s important to note that if you are modifying the mobile app code, you should make sure that you are following best practices for mobile app development and that you have the necessary permissions and access to modify the code.

3

Thank you for your response :slightly_smiling_face:

What actually, we are looking at is our JS is already working fine in web view but the mobile app is using a storefront API for fetching the checkout in their app, and in their app, JS is perfectly loading but our dropdown is not displayed in checkout (payment page).

Is there any way we can test this? or else how we can identify why our dropdown is not displayed in the checkout(mobile app) so, that we can identify why the dropdown is not coming and no error occurred come-up.

Or any tools you suggest to us for check if our JS file is compatible with Storefront API or not it would be great for us .

If we can get input on this, then that will be really helpful :slightly_smiling_face: