Localized FieldsAPI
API
Requires access to protected customer data for some properties.
The API for interacting with localized fields.
Anchor to standardapiStandardApi
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.
Was this section helpful?
Returns the current localized fields and re-renders your component if the values change.
Anchor to useLocalizedFields-parametersParameters
Anchor to keys
keys
[]
[]
Was this section helpful?
Returns the current localized fields and re-renders your component if the values change.
Anchor to useLocalizedField-parametersParameters
required
| undefined
Was this section helpful?
Read localized fields
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',
};
},
);
}
