How to connect to external API before/during checkout and get the response for validation

[aih_kimg]

Hi,

I need help on how to implement sending a request to an external API/web service (our company’s web service of customer account) and getting the response data to use in validation before/during checkout. It is about getting a member’s status from an external webservice/API before checking out. If a particular response or value is returned, for example Account’s VIP Flag is false on the time of checkout, checkout should be disabled, or an error message should be displayed. I am very new to Shopify and searched that in order for me to do this, I need to create a custom app. I already created custom apps (1 for cart-checkout-validation, and 1 for checkout-ui). But I can’t seem to work it. Maybe my idea was incorrect? Do you have sample code the same problem I have? Or is there a detailed guide on how to do this?

[MandasaTech]

Hi! @aih_kimg

integrating external API validation during checkout is a more advanced task in Shopify, and you’re correct that it typically involves a custom Shopify app, especially now that checkout customisations are limited to Shopify Plus stores using Checkout UI Extensions or Functions.

Here’s a clearer breakdown of how to approach this:## What You Want to Do:- Before a customer completes checkout, send a request to your company’s API to validate the account (e.g., check VIP flag).

• If the API returns a specific value (e.g., VIP = false), block or restrict checkout or show a message.

What’s Required:### 1. Shopify Plus Plan- Only Shopify Plus stores support checkout customisations using Checkout UI Extensions.

• If you’re not on Shopify Plus, unfortunately you cannot block checkout in this way — Shopify restricts access to the checkout logic for lower-tier plans.

2. Checkout UI Extension (for Plus)

You’re already creating the right components:

• cart-checkout-validation app – this will handle the backend validation

• checkout-ui extension – this adds logic and UI elements inside the checkout

General Flow:

Customer goes to checkout
↓
Checkout UI Extension runs
↓
Sends customer identifier (email or ID) to your external API
↓
Receives response (e.g., VIP: true/false)
↓
If VIP is false, show error or block submission

Sample Code Outline (Pseudo + Real):### In your checkout-ui extension (React):

import {
  useApi,
  useExtensionApi,
  reactExtension,
  Banner,
} from '@shopify/checkout-ui-extensions-react';

export default reactExtension('Checkout::Dynamic::Render', () => {
  const { checkout } = useExtensionApi();

  const customerEmail = checkout?.email;

  const [isVIP, setIsVIP] = useState(true);

  useEffect(() => {
    async function validateVIP() {
      const response = await fetch('https://your-api.com/check-vip', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: customerEmail }),
      });
      const data = await response.json();
      if (!data.vipStatus) {
        setIsVIP(false);
      }
    }

    if (customerEmail) {
      validateVIP();
    }
  }, [customerEmail]);

  if (!isVIP) {
    return (
      <Banner status="critical">
        Your account does not meet the VIP requirement to proceed with checkout.
      </Banner>
    );
  }

  return null;
});

In your backend app (Node.js/Express, example):

app.post('/check-vip', async (req, res) => {
  const { email } = req.body;

  // Call your internal API or DB
  const customer = await fetch(`https://yourcompanyapi.com/vip-check?email=${email}`);
  const result = await customer.json();

  res.json({ vipStatus: result.isVIP });
});

Notes:- Your backend app must be hosted on HTTPS and accept CORS requests from Shopify’s domain.

• You can’t completely block the checkout submission, but you can warn the user or hide the payment button using Shopify Functions (only available on Plus).

Resources:- Shopify Checkout UI Extensions docs

• Shopify Functions Overview

• Official Tutorial – Validate Checkout Fields

Let me know if you’d like help debugging your existing custom app or want me to review some code — happy to help!

[Small_Task_Help]

Hi,

Do you have Shopify plus store ?

[aih_kimg]

Hi @MandasaTech

Thank you for your reply and the sample code. I appreciate it.
We are not yet on Shopify Plus but I will try this once we upgrade. And I think I can now in preview.

If ever I run into blocker, I will ask for your help again.

Thank you again!

[aih_kimg]

Hi @Small_Task_Help

Thank you for your reply.
We are not yet on Shopify Plus but planning to upgrade.
I am currently using the preview of the checkout extensions and was trying the checkout-ui and cart-checkout-validation but I got lost along the way since I am new.

But it really seems like I need to be in Shopify Plus. Thank you again for the idea.

[aih_kimg]

Hi @MandasaTech

I am back to coding this and I would like to ask for your technical help again.
Please bear with me as I am still navigating my way to Shopify coding.

Steps done:

1. Create a Checkout UI Extension. I just used this template without editing much.

2. I created an app bridge or backend. I created a folder app then another sub folder api. So it is “root folder/app/api”

Editable code: root folder/app/api/call-aws.jsx"

import { json } from "@remix-run/node";
import axios from "axios";

/**
 * Handles POST requests to /api/call-aws
 */

  console.log('call-aws.jsx');
export async function action({ request }) {
  try {
    const body = await request.json(); // read POST body if needed
  

    /*const awsResponse = await axios.post(
      "https://p76bax7vvb.execute-api.ap-southeast-2.amazonaws.com/get",
      {
        key: "value", // optional: use `body.key` or similar
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.AWS_API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );*/

    const awsResponse = await axios.post( "https://p76bax7vvb.execute-api.ap-southeast-2.amazonaws.com/get");

    return json(awsResponse.data);
  } catch (error) {
    console.error("Error calling AWS:", error);
    return json({ error: "Failed to call AWS API" }, { status: 500 });
  }
}

3. code from "extensions/checkout-ui-052025/src/Checkout.jsx

import {
  reactExtension,
  Banner,
  BlockStack,
  Checkbox,
  Text,
  useApi,
  useApplyAttributeChange,
  useInstructions,
  useTranslate,
  Button
} from "@shopify/ui-extensions-react/checkout";

// 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (
  

4. I use "shopify app dev --use-localhost" because I cloudflare and ngrok are blocked.

5. Network access is allowed in my Shopify Partner API access settings:

![aih_kimg_1-1747890169468.png|701x215](upload://dhtImUv7PWJnXfvuKIPsfb2MFKH.png)

6. This is the error I get when I do console.log:

![aih_kimg_2-1747890531682.png|1811x354](upload://idTQwLFCLTfio28P1PseGWjGfba.png)

The output of the API should be:

{
"hello": "Hello from Lambda"
}

My questions:
1. Can this code really call the API from app/api/call-aws.jsx?

2. Is the way I code the right way?

Thank you.

[MandasaTech]

Hello @aih_kimg

have you opt Shopify plus Plan? please confirm

[aih_kimg]

Hi @MandasaTech

Not yet, but I am using the Checkout UI Extension developer preview, so I can test out first.