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

Technical Q&A
, ,
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