Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Shopify Checkout Ui Extension Unable To Get address From ShippingAddress Method

Shopify Checkout Ui Extension Unable To Get address From ShippingAddress Method

firstideasoft
Shopify Partner
9 0 2

We'll need a function built that block checkout if it's an International Order with a PO Box.

 

For international orders shopify populates DHL Express as a shipping name.

 

IF DHL Express and Address = PO Box in this condition we need to Block Progress of checkout.

 

How to get the ShippingAddress using api in javascript code, First i need to get the address after that am going to validate if address have PO Box .

Am not using react, am using the javascript. It seems there is no proper example for using the Ui Extension Api with javascript.

Here is my code, Am new to using the app with extension, Am not sure my code is correct.

 

import {
  extension,
  } from "@shopify/ui-extensions/checkout";
// Set the entry point for the extension
export default extension("purchase.checkout.delivery-address.render-before", renderApp);

function renderApp(root, api, { extension, buyerJourney }) {
  
  const address = api.shippingAddress();

  // Use the `buyerJourney` intercept to conditionally block checkout progress
  buyerJourney.intercept(({ canBlockProgress }) => {
   
    if (canBlockProgress && address?.address1 && address.address1.length > 30 ) {
      console.log(address);
      console.log(address.city);
      return {
        behavior: "block",
        reason: `Invalid shipping country`,
        errors: [
          {
            // Show a validation error on the page
            message: "Please keep your input under 30 characters.",
            target: '$.cart.deliveryGroups[0].deliveryAddress.address1',
          },
        ],
      };
    }
    return {
      behavior: "allow",      
    };
  });
}
Reply 1 (1)

royciferAF
Shopify Partner
1 0 0

This took me forever to figure out... It has to do with your app settings within your Partner dashboard (your code looks fine). According to this, you need Level 2 access to protected customer data otherwise trying to access api.shippingAddress will return `undefined`. To request access to protected customer data, follow the steps here: https://shopify.dev/docs/apps/store/data-protection/protected-customer-data#request-access-to-protec... Basically, you have to answer a handful of questions describing how your app will use that customer data. Once that's done, api.shippingAddress should return some data.