Skip to main content

Localization
API

The APIs for localizing your extension.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to i18n
i18n
required

Utilities for translating content and formatting values according to the current localization of the checkout.

Refer to localization examples for more information.

Anchor to localization
localization
required

The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the i18n object instead.

Was this section helpful?

Anchor to useCurrency
useCurrency()

Returns the currency of the checkout.

Anchor to useCurrency-returnsReturns

Currency

isoCode

The ISO-4217 code for this currency.

Was this section helpful?

Anchor to useExtensionLanguage
useExtensionLanguage()

Returns the buyer's language, as supported by the extension.

Anchor to useExtensionLanguage-returnsReturns

Language

isoCode
string

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

Was this section helpful?

Anchor to useLanguage
useLanguage()

Returns the current language of the checkout, and automatically re-renders your component if the language changes.

Anchor to useLanguage-returnsReturns

Language

isoCode
string

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

Was this section helpful?

Anchor to useLocalizationCountry
useLocalizationCountry()

Returns the country of the checkout, and automatically re-renders your component if the country changes.

Anchor to useLocalizationCountry-returnsReturns

| undefined
Was this section helpful?

Anchor to useLocalizationMarket
useLocalizationMarket()

Returns the market of the checkout, and automatically re-renders your component if it changes.

Anchor to useLocalizationMarket-returnsReturns

| undefined
Was this section helpful?

Anchor to useTimezone
useTimezone()

Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.

Anchor to useTimezone-returnsReturns

"Africa/Abidjan" | "Africa/Algiers" | "Africa/Bissau" | "Africa/Cairo" | "Africa/Casablanca" | "Africa/Ceuta" | "Africa/El_Aaiun" | "Africa/Johannesburg" | "Africa/Juba" | "Africa/Khartoum" | "Africa/Lagos" | "Africa/Maputo" | "Africa/Monrovia" | "Africa/Nairobi" | "Africa/Ndjamena" | "Africa/Sao_Tome" | "Africa/Tripoli" | "Africa/Tunis" | "Africa/Windhoek" | "America/Adak" | "America/Anchorage" | "America/Araguaina" | "America/Argentina/Buenos_
Was this section helpful?

Anchor to useTranslate
useTranslate()

Returns the I18nTranslate interface used to translate strings.

Anchor to useTranslate-returnsReturns

I18nTranslate

Was this section helpful?

Translating strings

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Text,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
const translate = useTranslate();
return (
<Text>{translate('welcomeMessage')}</Text>
);
}

Anchor to examplesExamples

Anchor to example-translating-strings-with-pluralizationTranslating strings with pluralization

You can use the count option to get a pluralized string based on the current locale. See localizing UI extensions for more information.

Was this section helpful?

Translating strings with pluralization

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Banner,
useApi,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
const {i18n} = useApi();
const translate = useTranslate();

const points = 10000;
const formattedPoints =
i18n.formatNumber(points);
// Translate the loyalty points message, using pluralization to differentiate messages
const loyaltyPointsMsg = translate(
'loyaltyPoints',
{
count: points,
formattedPoints,
},
);

return <Banner title={loyaltyPointsMsg} />;
}

Anchor to relatedRelated

ReferenceTargets
ReferenceComponents
ReferenceConfiguration
LearnTutorials