How to detect button press on shipping information page

Retired Boards Appdev Extensions

Topic summary

A developer is building a checkout extension to send customer address data to a shipping server for better quote calculations.

Core Challenge:

  • No event is triggered when the shipping information page’s submit button is pressed
  • The checkout extension runs in an iframe, preventing direct button press detection
  • They need to capture the finalized address (not partial/incorrect data) along with email and B2B status before submission

Technical Context:

  • Using Shopify’s React checkout extensions
  • Importing hooks like useShippingAddress, usePurchasingCompany, useEmail, and useBuyerJourneyIntercept
  • Code snippet provided shows their current implementation approach

Status: The issue remains unresolved with no solution yet identified for detecting the submission event within the iframe constraints.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

We are building a checkout extension that sends data to our shipping server to return better quotes when the shipping step is initiated. We need to post the address the customer is entering to our server with email and whether it is a B2B address. The problem we are having is there appears to be no event triggered when the information on the address page is about to be submitted, i.e. no way to detect button press. Because the checkout extension runs in an I frame, I can’t read the button press directly. This is a problem for us because we don’t want to send the address to our server until it is finalized. It is no good to send partial addresses or the wrong address. It must be the address the customer submitted. Below is the code so far to give an idea of what we are trying to achieve.

import {useState, useEffect} from 'React';
import {
    reactExtension,
    useBuyerJourneyIntercept,
    useShippingAddress,
    usePurchasingCompany,
    useEmail,
    Banner
} from '@shopify/ui-extensions-react/checkout';
// 1. Choose an extension target
export default reactExtension(
    'purchase.checkout.delivery-address.render-before',
    () =>