Skip to main content

Convert additional address fields

Early access

Additional address fields are in early access and available by request. To request access, contact Shopify Support.

Merchants can enable additional address fields for shipping and billing addresses at checkout, to comply with address standards in specific regions.

This guide introduces how to extract the additional field data from the standard address fields when additional address fields have been enabled by a merchant. Example extensions are provided for converting and updating extended address fields.

The shipping address form in checkout with additional fields street name, house number, and neighborhood.

Anchor to How it worksHow it works

When additional address fields are enabled, supported countries will offer an extended address form in checkout. Depending on the country, the extended address form:

  • Replaces standard field address1 with additional fields streetName and streetNumber

  • Replaces standard field address2 with additional fields line2 and neighborhood

    The data captured in the additional fields is merged back into the standard fields. The data is joined with the Unicode format character, word joiner, alongside regional decorators.

    Shopify uses the JavaScript and Ruby libraries offered in the open source library Worldwide to parse the additional field data. We recommend that you use the same libraries in your app to ensure a consistent experience.

Anchor to JavaScript clientsJavaScript clients

Worldwide offers the parsing logic as an npm package @shopify/worldwide.

The npm package provides concatenation and splitting functions for both address1 and address2:

  • concatenateAddress1

  • concatenateAddress2

  • splitAddress1

  • splitAddress2

    The usage details are described in the README.

Anchor to Ruby clientsRuby clients

Worldwide offers the ruby class, Worldwide::Address, which exposes the following public methods:

  • concatenate_address1

  • concatenate_address2

  • split_address1

  • split_address2

    The usage details are described in the README.

Anchor to RequirementsRequirements

  • The additional address fields feature is enabled on the store.

Anchor to Rust-specific requirementsRust-specific requirements

The following requirements are specific to Rust-based development with Shopify Functions.

  • You've installed Rust.

    On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.

  • You've installed the wasm32-wasip1 target:

    Terminal

    rustup target add wasm32-wasip1

Anchor to Example: Performing address validations on the extended address formExample: Performing address validations on the extended address form

The following example checkout UI extension uses splitAddress and the Cart and Checkout Validation API to block checkout and render an error message when the street number and neighborhood in Brazil do not meet defined conditions:

JavaScript

import React from "react";
import {
reactExtension,
useBuyerJourneyIntercept,
useShippingAddress,
} from "@shopify/ui-extensions-react/checkout";
import { splitAddress1, splitAddress2 } from '@shopify/worldwide';

reactExtension("purchase.checkout.delivery-address.render-before", () => <Extension />);

export default function Extension() {
const address = useShippingAddress();

const countryCode = address?.countryCode;

// 1. Read standard address fields values
const address1 = address?.address1;
const address2 = address?.address2;
const errors = [];

useBuyerJourneyIntercept(({ canBlockProgress }) => {
if (canBlockProgress && countryCode === "BR") {
if (address1) {

// 2. Get additional address field values from address1 using the @shopify/worldwide library
const additionalFieldsAddress1 = splitAddress1(countryCode, address1);

if (additionalFieldsAddress1) {
const { streetNumber } = additionalFieldsAddress1;
if (streetNumber && streetNumber === '1001') {
errors.push({
message: "We don't deliver to street number 1001",
target: "$.cart.deliveryGroups[0].deliveryAddress.address1"
});
}
}
}

if (address2) {

// 3. Get additional address field values from address2 using the @shopify/worldwide library
const additionalFieldsAddress2 = splitAddress2(countryCode, address2);

if (additionalFieldsAddress2) {
const { neighborhood } = additionalFieldsAddress2;
if (neighborhood && neighborhood === 'Undeliverablehood') {
errors.push({
message: "We don't deliver to undeliverablehood",
target: "$.cart.deliveryGroups[0].deliveryAddress.address2"
});
}
}
}
return {
behavior: "block",
reason: "Invalid shipping address",
errors: errors,
};
}

return {
behavior: "allow"
};
});

return null;
}

Anchor to Example: Updating addresses when additional address fields are enabledExample: Updating addresses when additional address fields are enabled

The following example checkout UI extension uses concatenatedAddress and useApplyShippingAddressChange to convert the extended address fields into the standard address fields and updates the standard address fields address1 and address2:

JavaScript

import React, { useEffect } from "react";
import {
reactExtension,
useShippingAddress,
useApplyShippingAddressChange,
} from "@shopify/ui-extensions-react/checkout";
import { concatenateAddress1, concatenateAddress2 } from '@shopify/worldwide';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
const address = useShippingAddress();

const applyShippingAddressChange = useApplyShippingAddressChange();

// 1. Generate address1 value from additional address fields
const updatedAddress1 = concatenateAddress1({
countryCode: 'BR',
streetName: 'Av. Paulista',
streetNumber: '1578',
});

// 2. Generate address2 value from additional address fields
const updatedAddress2 = concatenateAddress2({
countryCode: 'BR',
line2: 'apartamento 42',
neighborhood: 'Centro',
});

const firstName = address?.firstName;

useEffect(() => {
const newAddress = {
lastName: 'Paulo',
address1: updatedAddress1,
address2: updatedAddress2,
}

if (firstName === "Pedro") {
applyShippingAddressChange({
type: 'updateShippingAddress',
address: newAddress,
});
}
}, [applyShippingAddressChange, firstName, updatedAddress1, updatedAddress2]);

return null;
}
Was this page helpful?