Checkout Extension: Unable to make fetch calls to external API endpoint

Extensions
1

Hi community,

I’m building a checkout extension for my store that adds a post-purchase survey to the thank you page. The goal is to collect referral source data from customers and send it to my backend server at app.artface.club.

I’ve run into a confusing issue with making API calls:

  1. When I use a relative URL (“/api/v1/referral_source”), the code runs but fails because it’s an incomplete URL.
  2. When I use the full URL (“https://app.artface.club/api/v1/referral_sources”), the extension fails to deploy silently - it shows “Draft updated successfully” but keeps the old version.

I’ve configured everything I can think of:

  • Enabled network access in the Shopify partner dashboard
  • Set network_access = true in the TOML
  • Verified the application_url in shopify.app.toml

Here’s my extension configuration:

[extensions.capabilities]
api_access = true
network_access = true

And here’s the fetch code that’s causing issues:

async function handleSubmit() {
  setLoading(true);
  try {
    console.log('Attempting to submit to API...');
    const response = await fetch('https://app.artface.club/api/v1/referral_sources', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        referral_source: {
          source: 'ad',
          detail: 'test'
        }
      })
    });
    // ... rest of the function
  } catch (error) {
    console.error('Error submitting to API:', error);
    setLoading(false);
  }
}

I expected the extension to either:

  1. Automatically prepend the application_url to relative URLs, or
  2. Allow the full URL since I’ve enabled network access

What is the correct way to configure and make API calls to an external server from a checkout extension? Has anyone successfully implemented this pattern?

Thanks in advance for any help!

2

In your shopify.extension.toml file, make sure you have api_access and network_access set to true:

[extensions.capabilities]
api_access = true
network_access = true

Soruce: Configuration

3

Hey Drew,

Thanks for your reply! That ended up not being the problem, as I had already set both of the capabilities to true. For anyone in the future having trouble, the issue was that I did not include my server URL as an approved URL in shopify.extension.toml

[extensions.network_access]
allowed_urls = [“https://app.example.com”]

For any Shopify Devs reading this… please improve the error feedback for this CLI tool. The fact that these extensions will report a successful deploy, but fail some sort of internal validation silently and not get deployed is truly crazy making!