Shipping field validator

scottpipia
Shopify Partner
2 0 0

We are developing a Checkout UI extension to validate the customer's shipping address. Our product can be purchased by logged-in users. We are preventing changes to the customer's shipping address during checkout and only accepting the saved customer shipping address. This feature is part of our Checkout UI extension validation app.

 

We are able to obtain the customer's inputted shipping address using 'useShippingAddress' and retrieve customer information using 'useCustomer.' However, we have encountered an issue in obtaining the customer's saved shipping address.

 

Could you please provide guidance on how to access the customer's saved shipping address in the Checkout UI extension?

Replies 2 (2)

Liam
Shopify Staff
2731 301 778

Hi Scottpipia,

 

The Checkout UI Extensions SDK does not directly provide access to the customer's saved shipping address. This is a part of Shopify's design to ensure customer data privacy and security.

As a workaround, you can use the Storefront API or Admin API to fetch the customer's default shipping address (as well as other details such as name, email, etc).

 

Please remember, due to privacy concerns, you'll need the customer's access token to fetch this information. Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

scottpipia
Shopify Partner
2 0 0

 

const {query} = useApi();

useEffect(() => {
    query(
      `query ($first: Int!) {
        customers(first: $first, query: $email) {
          edges{
            node {
              id
              firstName
              lastName
              defaultAddress {
                id
                address1
              }
            }
          }
        }
      }`,
      {
        variables: {first: 5, email: "email:customer@mail.com"},
      },
    )
      .then(({data, errors}) => setData(data))
      .catch(console.error);
  }, [query]);


I utilized the query provided above to retrieve the customer's default address using the Storefront API. Unfortunately, it's not functioning as expected. To isolate the issue, I tested this query in the Shopify GraphQL app. I was able to obtain the customer information when I used the Admin API, which is puzzling.

 

 

Could you please provide insights on what might be causing this discrepancy between the Storefront and Admin APIs, and if there's a potential solution to get the customer's default address using the Storefront API?