Skip to main content

Localized Fields

Requires access to protected customer data for some properties.

The API for interacting with localized fields.

The base API object provided to purchase extension targets.

Anchor to localizedFields
localizedFields
StatefulRemoteSubscribable<[]>

The API for reading additional fields that are required in checkout under certain circumstances. For example, some countries require additional fields for customs information or tax identification numbers.

Returns the current localized fields and re-renders your component if the values change.

[]

[]

Returns the current localized fields and re-renders your component if the values change.

required

| undefined
Examples
import {
reactExtension,
useBuyerJourneyIntercept,
useLocalizedFields,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
// 1. Access localized field values
const localizedFields = useLocalizedFields([
'TAX_CREDENTIAL_BR',
]);

// 2. Access localized field values
const taxIdField = localizedFields?.[0];

// 3. Validate localized field values
useBuyerJourneyIntercept(
({canBlockProgress}) => {
return canBlockProgress &&
taxIdField &&
(!taxIdField.value ||
taxIdField.value.length > 10)
? {
behavior: 'block',
reason: 'Invalid tax ID',
errors: [
{
message: `${taxIdField.title} is required and
cannot exceed 10 characters in length`,
// Show an error under the field
target: `$.cart.localizedField.${taxIdField.key}`,
},
],
}
: {
behavior: 'allow',
};
},
);
}
Was this page helpful?