Can we customize or perform validations first when customer clicks "Pay Now" button?

Technical Q&A
, ,

Topic summary

A developer asked about customizing the “Pay Now” button on a checkout page to perform validations before payment processing. They are using checkout UI extensions and need to:

Requirements:

  • Call an external/company API to determine whether to proceed
  • Query customer information (age, total monthly purchases)
  • Enforce purchase limits based on customer age

Solution Provided:
Use the useBuyerJourneyIntercept hook from Shopify’s checkout UI extensions API with the Checkout::Actions::BlockSubmission capability. The implementation involves:

  • Intercepting the checkout submission asynchronously
  • Fetching customer data and calling external validation APIs
  • Blocking or allowing the transaction based on API response
  • Displaying custom error messages when validation fails

A code example was shared demonstrating how to implement async validation that either rejects with an error message or resolves to allow checkout continuation.

Status: The original poster confirmed they will incorporate the suggested solution into their implementation.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to ask if we can edit the “Pay Now” button on the check checkout page?

aih_kimg_0-1748933183343.png
aih_kimg_0-1748933183343.png642×876 31.8 KB

Currently, I am customizing the checkout page using “checkout ui extension”.
I am also doing the validations on the page load of checkout page.

However, we need to implement the same validation also on the “Pay Now” button for security purpose.

This is what we would like to happen when we click the “Pay Now” button:

  1. Do validations of like “calling an external API/our company’s API” that returns something like proceed or not.

  2. Query customer information like age and total purchased amount per month. We need to limit a customer’s purchase amount per month depending on the age.

Is there any way to do this? I would love to hear your expertise.
Thank you.

2

Hi,

Hope this will work

  • Use the checkout_ui_extension API (Choose Checkout::Actions::BlockSubmission as a capability)
  • Add a blocker with async validation
    Code example
import {
  useExtensionApi,
  useBuyerJourneyIntercept
} from "@shopify/checkout-ui-extensions-react";

export default function CheckoutValidationExtension() {
  const { query } = useExtensionApi();

  useBuyerJourneyIntercept(async (intercept) => {
    // 1. Fetch customer info (email, name, etc.)
    const email = query?.email;

    // 2. Call your external API
    const response = await fetch("https://your-api.com/validate", {
      method: "POST",
      body: JSON.stringify({ email }),
      headers: {
        "Content-Type": "application/json",
      },
    });

    const result = await response.json();

    // 3. If API says "don't proceed"
    if (result.status === "block") {
      return intercept.reject({
        behavior: "block",
        reason: "Sorry, you can't proceed right now.",
        errors: [
          {
            message: result.message || "Validation failed",
          },
        ],
      });
    }

    // 4. If all okay, allow them to continue
    return intercept.resolve();
  });

  return null;
}
1 Like
3

Thank you for the idea about using useBuyerJourneyIntercept.

I will incorporate your code to my own.

1 Like