# Localization The APIs for localizing your extension. ### Translating strings ```jsx /* 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> ); } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const welcomeMsg = i18n.translate( 'welcomeMessage', ); root.appendChild(root.createText(welcomeMsg)); }, ); ``` ```json { "welcomeMessage": "Welcome to our store!" } ``` ## StandardApi The base API object provided to `purchase` extension targets. ### Docs_Standard_LocalizationApi ### i18n Utilities for translating content and formatting values according to the current [`localization`](/docs/api/checkout-ui-extensions/apis/localization) of the checkout. Refer to [`localization` examples](/docs/api/checkout-ui-extensions/apis/localization#examples) for more information. ### localization 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`](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n) object instead. ### I18n ### formatCurrency Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default. ### formatDate Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options. ### formatNumber Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default. ### translate Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements. ### I18nTranslate This returns a translated string matching a key in a locale file. export interface I18nTranslate { ( key: string, options?: Record, ): ReplacementType extends string | number ? string : (string | ReplacementType)[]; } ### Localization ### country The country context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the country is unknown, then the value is undefined. ### currency The currency that the customer sees for money amounts in the checkout. ### extensionLanguage This is the customer's language, as supported by the extension. If the customer's actual language is not supported by the extension, then this is the language that is used for translations. For example, if the customer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, then this value is the default locale for your extension (that is, the one matching your .default.json file). ### language The language the customer sees in the checkout. ### market The [market](/docs/apps/markets) context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the market is unknown, then the value is undefined. ### timezone The buyer’s time zone. ### Country ### isoCode The ISO-3166-1 code for this country. ### CountryCode 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ' ### Currency ### isoCode The ISO-4217 code for this currency. ### CurrencyCode 'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL' ### Language ### isoCode The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. ### Market ### handle The human-readable, shop-scoped identifier for the market. ### id A globally-unique identifier for a market. ### Timezone '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_Aires' | 'America/Argentina/Catamarca' | 'America/Argentina/Cordoba' | 'America/Argentina/Jujuy' | 'America/Argentina/La_Rioja' | 'America/Argentina/Mendoza' | 'America/Argentina/Rio_Gallegos' | 'America/Argentina/Salta' | 'America/Argentina/San_Juan' | 'America/Argentina/San_Luis' | 'America/Argentina/Tucuman' | 'America/Argentina/Ushuaia' | 'America/Asuncion' | 'America/Bahia' | 'America/Bahia_Banderas' | 'America/Barbados' | 'America/Belem' | 'America/Belize' | 'America/Boa_Vista' | 'America/Bogota' | 'America/Boise' | 'America/Cambridge_Bay' | 'America/Campo_Grande' | 'America/Cancun' | 'America/Caracas' | 'America/Cayenne' | 'America/Chicago' | 'America/Chihuahua' | 'America/Costa_Rica' | 'America/Cuiaba' | 'America/Danmarkshavn' | 'America/Dawson' | 'America/Dawson_Creek' | 'America/Denver' | 'America/Detroit' | 'America/Edmonton' | 'America/Eirunepe' | 'America/El_Salvador' | 'America/Fort_Nelson' | 'America/Fortaleza' | 'America/Glace_Bay' | 'America/Goose_Bay' | 'America/Grand_Turk' | 'America/Guatemala' | 'America/Guayaquil' | 'America/Guyana' | 'America/Halifax' | 'America/Havana' | 'America/Hermosillo' | 'America/Indiana/Indianapolis' | 'America/Indiana/Knox' | 'America/Indiana/Marengo' | 'America/Indiana/Petersburg' | 'America/Indiana/Tell_City' | 'America/Indiana/Vevay' | 'America/Indiana/Vincennes' | 'America/Indiana/Winamac' | 'America/Inuvik' | 'America/Iqaluit' | 'America/Jamaica' | 'America/Juneau' | 'America/Kentucky/Louisville' | 'America/Kentucky/Monticello' | 'America/La_Paz' | 'America/Lima' | 'America/Los_Angeles' | 'America/Maceio' | 'America/Managua' | 'America/Manaus' | 'America/Martinique' | 'America/Matamoros' | 'America/Mazatlan' | 'America/Menominee' | 'America/Merida' | 'America/Metlakatla' | 'America/Mexico_City' | 'America/Miquelon' | 'America/Moncton' | 'America/Monterrey' | 'America/Montevideo' | 'America/New_York' | 'America/Nipigon' | 'America/Nome' | 'America/Noronha' | 'America/North_Dakota/Beulah' | 'America/North_Dakota/Center' | 'America/North_Dakota/New_Salem' | 'America/Nuuk' | 'America/Ojinaga' | 'America/Panama' | 'America/Pangnirtung' | 'America/Paramaribo' | 'America/Phoenix' | 'America/Port-au-Prince' | 'America/Porto_Velho' | 'America/Puerto_Rico' | 'America/Punta_Arenas' | 'America/Rainy_River' | 'America/Rankin_Inlet' | 'America/Recife' | 'America/Regina' | 'America/Resolute' | 'America/Rio_Branco' | 'America/Santarem' | 'America/Santiago' | 'America/Santo_Domingo' | 'America/Sao_Paulo' | 'America/Scoresbysund' | 'America/Sitka' | 'America/St_Johns' | 'America/Swift_Current' | 'America/Tegucigalpa' | 'America/Thule' | 'America/Thunder_Bay' | 'America/Tijuana' | 'America/Toronto' | 'America/Vancouver' | 'America/Whitehorse' | 'America/Winnipeg' | 'America/Yakutat' | 'America/Yellowknife' | 'Antarctica/Casey' | 'Antarctica/Davis' | 'Antarctica/Macquarie' | 'Antarctica/Mawson' | 'Antarctica/Palmer' | 'Antarctica/Rothera' | 'Antarctica/Troll' | 'Antarctica/Vostok' | 'Asia/Almaty' | 'Asia/Amman' | 'Asia/Anadyr' | 'Asia/Aqtau' | 'Asia/Aqtobe' | 'Asia/Ashgabat' | 'Asia/Atyrau' | 'Asia/Baghdad' | 'Asia/Baku' | 'Asia/Bangkok' | 'Asia/Barnaul' | 'Asia/Beirut' | 'Asia/Bishkek' | 'Asia/Brunei' | 'Asia/Chita' | 'Asia/Choibalsan' | 'Asia/Colombo' | 'Asia/Damascus' | 'Asia/Dhaka' | 'Asia/Dili' | 'Asia/Dubai' | 'Asia/Dushanbe' | 'Asia/Famagusta' | 'Asia/Gaza' | 'Asia/Hebron' | 'Asia/Ho_Chi_Minh' | 'Asia/Hong_Kong' | 'Asia/Hovd' | 'Asia/Irkutsk' | 'Asia/Jakarta' | 'Asia/Jayapura' | 'Asia/Jerusalem' | 'Asia/Kabul' | 'Asia/Kamchatka' | 'Asia/Karachi' | 'Asia/Kathmandu' | 'Asia/Khandyga' | 'Asia/Kolkata' | 'Asia/Krasnoyarsk' | 'Asia/Kuala_Lumpur' | 'Asia/Kuching' | 'Asia/Macau' | 'Asia/Magadan' | 'Asia/Makassar' | 'Asia/Manila' | 'Asia/Nicosia' | 'Asia/Novokuznetsk' | 'Asia/Novosibirsk' | 'Asia/Omsk' | 'Asia/Oral' | 'Asia/Pontianak' | 'Asia/Pyongyang' | 'Asia/Qatar' | 'Asia/Qostanay' | 'Asia/Qyzylorda' | 'Asia/Riyadh' | 'Asia/Sakhalin' | 'Asia/Samarkand' | 'Asia/Seoul' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Srednekolymsk' | 'Asia/Taipei' | 'Asia/Tashkent' | 'Asia/Tbilisi' | 'Asia/Tehran' | 'Asia/Thimphu' | 'Asia/Tokyo' | 'Asia/Tomsk' | 'Asia/Ulaanbaatar' | 'Asia/Urumqi' | 'Asia/Ust-Nera' | 'Asia/Vladivostok' | 'Asia/Yakutsk' | 'Asia/Yangon' | 'Asia/Yekaterinburg' | 'Asia/Yerevan' | 'Atlantic/Azores' | 'Atlantic/Bermuda' | 'Atlantic/Canary' | 'Atlantic/Cape_Verde' | 'Atlantic/Faroe' | 'Atlantic/Madeira' | 'Atlantic/Reykjavik' | 'Atlantic/South_Georgia' | 'Atlantic/Stanley' | 'Australia/Adelaide' | 'Australia/Brisbane' | 'Australia/Broken_Hill' | 'Australia/Darwin' | 'Australia/Eucla' | 'Australia/Hobart' | 'Australia/Lindeman' | 'Australia/Lord_Howe' | 'Australia/Melbourne' | 'Australia/Perth' | 'Australia/Sydney' | 'CET' | 'CST6CDT' | 'EET' | 'EST' | 'EST5EDT' | 'Etc/GMT' | 'Etc/GMT-1' | 'Etc/GMT-10' | 'Etc/GMT-11' | 'Etc/GMT-12' | 'Etc/GMT-13' | 'Etc/GMT-14' | 'Etc/GMT-2' | 'Etc/GMT-3' | 'Etc/GMT-4' | 'Etc/GMT-5' | 'Etc/GMT-6' | 'Etc/GMT-7' | 'Etc/GMT-8' | 'Etc/GMT-9' | 'Etc/GMT+1' | 'Etc/GMT+10' | 'Etc/GMT+11' | 'Etc/GMT+12' | 'Etc/GMT+2' | 'Etc/GMT+3' | 'Etc/GMT+4' | 'Etc/GMT+5' | 'Etc/GMT+6' | 'Etc/GMT+7' | 'Etc/GMT+8' | 'Etc/GMT+9' | 'Etc/UTC' | 'Europe/Amsterdam' | 'Europe/Andorra' | 'Europe/Astrakhan' | 'Europe/Athens' | 'Europe/Belgrade' | 'Europe/Berlin' | 'Europe/Brussels' | 'Europe/Bucharest' | 'Europe/Budapest' | 'Europe/Chisinau' | 'Europe/Copenhagen' | 'Europe/Dublin' | 'Europe/Gibraltar' | 'Europe/Helsinki' | 'Europe/Istanbul' | 'Europe/Kaliningrad' | 'Europe/Kiev' | 'Europe/Kirov' | 'Europe/Lisbon' | 'Europe/London' | 'Europe/Luxembourg' | 'Europe/Madrid' | 'Europe/Malta' | 'Europe/Minsk' | 'Europe/Monaco' | 'Europe/Moscow' | 'Europe/Oslo' | 'Europe/Paris' | 'Europe/Prague' | 'Europe/Riga' | 'Europe/Rome' | 'Europe/Samara' | 'Europe/Saratov' | 'Europe/Simferopol' | 'Europe/Sofia' | 'Europe/Stockholm' | 'Europe/Tallinn' | 'Europe/Tirane' | 'Europe/Ulyanovsk' | 'Europe/Uzhgorod' | 'Europe/Vienna' | 'Europe/Vilnius' | 'Europe/Volgograd' | 'Europe/Warsaw' | 'Europe/Zaporozhye' | 'Europe/Zurich' | 'HST' | 'Indian/Chagos' | 'Indian/Christmas' | 'Indian/Cocos' | 'Indian/Kerguelen' | 'Indian/Mahe' | 'Indian/Maldives' | 'Indian/Mauritius' | 'Indian/Reunion' | 'MET' | 'MST' | 'MST7MDT' | 'Pacific/Apia' | 'Pacific/Auckland' | 'Pacific/Bougainville' | 'Pacific/Chatham' | 'Pacific/Chuuk' | 'Pacific/Easter' | 'Pacific/Efate' | 'Pacific/Fakaofo' | 'Pacific/Fiji' | 'Pacific/Funafuti' | 'Pacific/Galapagos' | 'Pacific/Gambier' | 'Pacific/Guadalcanal' | 'Pacific/Guam' | 'Pacific/Honolulu' | 'Pacific/Kanton' | 'Pacific/Kiritimati' | 'Pacific/Kosrae' | 'Pacific/Kwajalein' | 'Pacific/Majuro' | 'Pacific/Marquesas' | 'Pacific/Nauru' | 'Pacific/Niue' | 'Pacific/Norfolk' | 'Pacific/Noumea' | 'Pacific/Pago_Pago' | 'Pacific/Palau' | 'Pacific/Pitcairn' | 'Pacific/Pohnpei' | 'Pacific/Port_Moresby' | 'Pacific/Rarotonga' | 'Pacific/Tahiti' | 'Pacific/Tarawa' | 'Pacific/Tongatapu' | 'Pacific/Wake' | 'Pacific/Wallis' | 'PST8PDT' | 'WET' ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useCurrency Returns the currency of the checkout. ### UseCurrencyGeneratedType Returns the currency of the checkout, and automatically re-renders your component if the currency changes. #### Returns: Currency export function useCurrency< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Currency { const {localization} = useApi(); return useSubscription(localization.currency); } ### Currency ### isoCode The ISO-4217 code for this currency. ### CurrencyCode 'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL' ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useExtensionLanguage Returns the buyer's language, as supported by the extension. ### UseExtensionLanguageGeneratedType Returns the buyer's language, as supported by the extension. #### Returns: Language export function useExtensionLanguage< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Language { const {localization} = useApi(); return useSubscription(localization.extensionLanguage); } ### Language ### isoCode The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useLanguage Returns the current language of the checkout, and automatically re-renders your component if the language changes. ### UseLanguageGeneratedType Returns the current language of the checkout, and automatically re-renders your component if the language changes. #### Returns: Language export function useLanguage< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Language { const {localization} = useApi(); return useSubscription(localization.language); } ### Language ### isoCode The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useLocalizationCountry Returns the country of the checkout, and automatically re-renders your component if the country changes. ### UseLocalizationCountryGeneratedType Returns the country of the checkout, and automatically re-renders your component if the country changes. #### Returns: Country | undefined export function useLocalizationCountry< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Country | undefined { const {localization} = useApi(); return useSubscription(localization.country); } ### Country ### isoCode The ISO-3166-1 code for this country. ### CountryCode 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ' ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useLocalizationMarket Returns the market of the checkout, and automatically re-renders your component if it changes. ### UseLocalizationMarketGeneratedType Returns the market of the checkout, and automatically re-renders your component if it changes. #### Returns: Market | undefined export function useLocalizationMarket< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Market | undefined { const {localization} = useApi(); return useSubscription(localization.market); } ### Market ### handle The human-readable, shop-scoped identifier for the market. ### id A globally-unique identifier for a market. ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useTimezone Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes. ### UseTimezoneGeneratedType Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes. #### Returns: "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_Aires" | "America/Argentina/Catamarca" | "America/Argentina/Cordoba" | "America/Argentina/Jujuy" | "America/Argentina/La_Rioja" | "America/Argentina/Mendoza" | "America/Argentina/Rio_Gallegos" | "America/Argentina/Salta" | "America/Argentina/San_Juan" | "America/Argentina/San_Luis" | "America/Argentina/Tucuman" | "America/Argentina/Ushuaia" | "America/Asuncion" | "America/Bahia" | "America/Bahia_Banderas" | "America/Barbados" | "America/Belem" | "America/Belize" | "America/Boa_Vista" | "America/Bogota" | "America/Boise" | "America/Cambridge_Bay" | "America/Campo_Grande" | "America/Cancun" | "America/Caracas" | "America/Cayenne" | "America/Chicago" | "America/Chihuahua" | "America/Costa_Rica" | "America/Cuiaba" | "America/Danmarkshavn" | "America/Dawson" | "America/Dawson_Creek" | "America/Denver" | "America/Detroit" | "America/Edmonton" | "America/Eirunepe" | "America/El_Salvador" | "America/Fort_Nelson" | "America/Fortaleza" | "America/Glace_Bay" | "America/Goose_Bay" | "America/Grand_Turk" | "America/Guatemala" | "America/Guayaquil" | "America/Guyana" | "America/Halifax" | "America/Havana" | "America/Hermosillo" | "America/Indiana/Indianapolis" | "America/Indiana/Knox" | "America/Indiana/Marengo" | "America/Indiana/Petersburg" | "America/Indiana/Tell_City" | "America/Indiana/Vevay" | "America/Indiana/Vincennes" | "America/Indiana/Winamac" | "America/Inuvik" | "America/Iqaluit" | "America/Jamaica" | "America/Juneau" | "America/Kentucky/Louisville" | "America/Kentucky/Monticello" | "America/La_Paz" | "America/Lima" | "America/Los_Angeles" | "America/Maceio" | "America/Managua" | "America/Manaus" | "America/Martinique" | "America/Matamoros" | "America/Mazatlan" | "America/Menominee" | "America/Merida" | "America/Metlakatla" | "America/Mexico_City" | "America/Miquelon" | "America/Moncton" | "America/Monterrey" | "America/Montevideo" | "America/New_York" | "America/Nipigon" | "America/Nome" | "America/Noronha" | "America/North_Dakota/Beulah" | "America/North_Dakota/Center" | "America/North_Dakota/New_Salem" | "America/Nuuk" | "America/Ojinaga" | "America/Panama" | "America/Pangnirtung" | "America/Paramaribo" | "America/Phoenix" | "America/Port-au-Prince" | "America/Porto_Velho" | "America/Puerto_Rico" | "America/Punta_Arenas" | "America/Rainy_River" | "America/Rankin_Inlet" | "America/Recife" | "America/Regina" | "America/Resolute" | "America/Rio_Branco" | "America/Santarem" | "America/Santiago" | "America/Santo_Domingo" | "America/Sao_Paulo" | "America/Scoresbysund" | "America/Sitka" | "America/St_Johns" | "America/Swift_Current" | "America/Tegucigalpa" | "America/Thule" | "America/Thunder_Bay" | "America/Tijuana" | "America/Toronto" | "America/Vancouver" | "America/Whitehorse" | "America/Winnipeg" | "America/Yakutat" | "America/Yellowknife" | "Antarctica/Casey" | "Antarctica/Davis" | "Antarctica/Macquarie" | "Antarctica/Mawson" | "Antarctica/Palmer" | "Antarctica/Rothera" | "Antarctica/Troll" | "Antarctica/Vostok" | "Asia/Almaty" | "Asia/Amman" | "Asia/Anadyr" | "Asia/Aqtau" | "Asia/Aqtobe" | "Asia/Ashgabat" | "Asia/Atyrau" | "Asia/Baghdad" | "Asia/Baku" | "Asia/Bangkok" | "Asia/Barnaul" | "Asia/Beirut" | "Asia/Bishkek" | "Asia/Brunei" | "Asia/Chita" | "Asia/Choibalsan" | "Asia/Colombo" | "Asia/Damascus" | "Asia/Dhaka" | "Asia/Dili" | "Asia/Dubai" | "Asia/Dushanbe" | "Asia/Famagusta" | "Asia/Gaza" | "Asia/Hebron" | "Asia/Ho_Chi_Minh" | "Asia/Hong_Kong" | "Asia/Hovd" | "Asia/Irkutsk" | "Asia/Jakarta" | "Asia/Jayapura" | "Asia/Jerusalem" | "Asia/Kabul" | "Asia/Kamchatka" | "Asia/Karachi" | "Asia/Kathmandu" | "Asia/Khandyga" | "Asia/Kolkata" | "Asia/Krasnoyarsk" | "Asia/Kuala_Lumpur" | "Asia/Kuching" | "Asia/Macau" | "Asia/Magadan" | "Asia/Makassar" | "Asia/Manila" | "Asia/Nicosia" | "Asia/Novokuznetsk" | "Asia/Novosibirsk" | "Asia/Omsk" | "Asia/Oral" | "Asia/Pontianak" | "Asia/Pyongyang" | "Asia/Qatar" | "Asia/Qostanay" | "Asia/Qyzylorda" | "Asia/Riyadh" | "Asia/Sakhalin" | "Asia/Samarkand" | "Asia/Seoul" | "Asia/Shanghai" | "Asia/Singapore" | "Asia/Srednekolymsk" | "Asia/Taipei" | "Asia/Tashkent" | "Asia/Tbilisi" | "Asia/Tehran" | "Asia/Thimphu" | "Asia/Tokyo" | "Asia/Tomsk" | "Asia/Ulaanbaatar" | "Asia/Urumqi" | "Asia/Ust-Nera" | "Asia/Vladivostok" | "Asia/Yakutsk" | "Asia/Yangon" | "Asia/Yekaterinburg" | "Asia/Yerevan" | "Atlantic/Azores" | "Atlantic/Bermuda" | "Atlantic/Canary" | "Atlantic/Cape_Verde" | "Atlantic/Faroe" | "Atlantic/Madeira" | "Atlantic/Reykjavik" | "Atlantic/South_Georgia" | "Atlantic/Stanley" | "Australia/Adelaide" | "Australia/Brisbane" | "Australia/Broken_Hill" | "Australia/Darwin" | "Australia/Eucla" | "Australia/Hobart" | "Australia/Lindeman" | "Australia/Lord_Howe" | "Australia/Melbourne" | "Australia/Perth" | "Australia/Sydney" | "CET" | "CST6CDT" | "EET" | "EST" | "EST5EDT" | "Etc/GMT" | "Etc/GMT-1" | "Etc/GMT-10" | "Etc/GMT-11" | "Etc/GMT-12" | "Etc/GMT-13" | "Etc/GMT-14" | "Etc/GMT-2" | "Etc/GMT-3" | "Etc/GMT-4" | "Etc/GMT-5" | "Etc/GMT-6" | "Etc/GMT-7" | "Etc/GMT-8" | "Etc/GMT-9" | "Etc/GMT+1" | "Etc/GMT+10" | "Etc/GMT+11" | "Etc/GMT+12" | "Etc/GMT+2" | "Etc/GMT+3" | "Etc/GMT+4" | "Etc/GMT+5" | "Etc/GMT+6" | "Etc/GMT+7" | "Etc/GMT+8" | "Etc/GMT+9" | "Etc/UTC" | "Europe/Amsterdam" | "Europe/Andorra" | "Europe/Astrakhan" | "Europe/Athens" | "Europe/Belgrade" | "Europe/Berlin" | "Europe/Brussels" | "Europe/Bucharest" | "Europe/Budapest" | "Europe/Chisinau" | "Europe/Copenhagen" | "Europe/Dublin" | "Europe/Gibraltar" | "Europe/Helsinki" | "Europe/Istanbul" | "Europe/Kaliningrad" | "Europe/Kiev" | "Europe/Kirov" | "Europe/Lisbon" | "Europe/London" | "Europe/Luxembourg" | "Europe/Madrid" | "Europe/Malta" | "Europe/Minsk" | "Europe/Monaco" | "Europe/Moscow" | "Europe/Oslo" | "Europe/Paris" | "Europe/Prague" | "Europe/Riga" | "Europe/Rome" | "Europe/Samara" | "Europe/Saratov" | "Europe/Simferopol" | "Europe/Sofia" | "Europe/Stockholm" | "Europe/Tallinn" | "Europe/Tirane" | "Europe/Ulyanovsk" | "Europe/Uzhgorod" | "Europe/Vienna" | "Europe/Vilnius" | "Europe/Volgograd" | "Europe/Warsaw" | "Europe/Zaporozhye" | "Europe/Zurich" | "HST" | "Indian/Chagos" | "Indian/Christmas" | "Indian/Cocos" | "Indian/Kerguelen" | "Indian/Mahe" | "Indian/Maldives" | "Indian/Mauritius" | "Indian/Reunion" | "MET" | "MST" | "MST7MDT" | "Pacific/Apia" | "Pacific/Auckland" | "Pacific/Bougainville" | "Pacific/Chatham" | "Pacific/Chuuk" | "Pacific/Easter" | "Pacific/Efate" | "Pacific/Fakaofo" | "Pacific/Fiji" | "Pacific/Funafuti" | "Pacific/Galapagos" | "Pacific/Gambier" | "Pacific/Guadalcanal" | "Pacific/Guam" | "Pacific/Honolulu" | "Pacific/Kanton" | "Pacific/Kiritimati" | "Pacific/Kosrae" | "Pacific/Kwajalein" | "Pacific/Majuro" | "Pacific/Marquesas" | "Pacific/Nauru" | "Pacific/Niue" | "Pacific/Norfolk" | "Pacific/Noumea" | "Pacific/Pago_Pago" | "Pacific/Palau" | "Pacific/Pitcairn" | "Pacific/Pohnpei" | "Pacific/Port_Moresby" | "Pacific/Rarotonga" | "Pacific/Tahiti" | "Pacific/Tarawa" | "Pacific/Tongatapu" | "Pacific/Wake" | "Pacific/Wallis" | "PST8PDT" | "WET" export function useTimezone< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): Timezone { const {localization} = useApi(); return useSubscription(localization.timezone); } ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ``` ## useTranslate Returns the `I18nTranslate` interface used to translate strings. ### UseTranslateGeneratedType Returns the `I18nTranslate` interface used to translate strings. #### Returns: I18nTranslate export function useTranslate< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): I18nTranslate { const {i18n} = useApi(); const translate = useCallback( (...args) => { const translation = i18n.translate(...args); if (!Array.isArray(translation)) { return translation as any; } return translation.map((part, index) => { if (isValidElement(part)) { // eslint-disable-next-line react/no-array-index-key return cloneElement(part, {key: index}); } return part; }); }, [i18n], ); return translate; } ### I18nTranslate This returns a translated string matching a key in a locale file. export interface I18nTranslate { ( key: string, options?: Record, ): ReplacementType extends string | number ? string : (string | ReplacementType)[]; } ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for localizing your extension. ### You can use the `count` option to get a pluralized string based on the current locale. See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. ### Translating strings with pluralization ```jsx /* 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} />; } ``` ```js /* See the locales/en.default.json tab for the translation keys and values for this example */ import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {i18n}) => { const points = 10000; const formattedPoints = i18n.formatNumber(points); // Translate the loyalty points message, using pluralization to differentiate messages const loyaltyPointsMsg = i18n.translate( 'loyaltyPoints', { count: points, formattedPoints, }, ); const app = root.createComponent(Banner, { title: loyaltyPointsMsg, }); root.appendChild(app); }, ); ``` ```json { "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } } ```