MutoPay теперь говорит на шести языках

Покупатель в Стамбуле открывает ссылку на оплату из мадридского магазина. Страница загружается на турецком. Он платит, продавец получает webhook, и в его панели в Мадриде платёж появляется на испанском. Никому не пришлось выбирать язык.

Это и есть то, что мы выкатили в этом месяце. Страница оплаты, видимая покупателю, страница ссылки «Pay Me» и вся панель продавца теперь переведены на шесть языков: английский, арабский, испанский, турецкий, армянский и русский. Маркетинговый сайт (включая этот блог) тоже на тех же шести.

Что переведено

Сторона покупателя:

Страница оплаты /pay/:id
Страница ссылки «Pay Me» (/pay/me/:slug)
Все тексты подключения кошелька: соединение, подпись, подтверждение, повтор, состояния ошибок
Строки котировки и сравнения маршрутов
Инструкции для ручной отправки, подписи QR-кода и подсказки по dust amount
Уведомление о редиректе на KYC и редкое состояние «нужна ручная проверка»

Сторона продавца:

Боковое меню панели и каждая страница под /dashboard/*
Настройки: API-ключи, секрет webhook, каналы, master key, переопределение settlement
Мастер первоначальной настройки
Список платежей, фильтры, страница деталей, бейджи статусов
Настройка ссылок «Pay Me»
Все сообщения валидации форм и об ошибках

Админка (/admin/*) пока остаётся на английском. Она внутренняя и покупателю не показывается.

Как выбирается язык

При первом визите язык браузера читается из navigator.language. Если он совпадает с одним из шести, интерфейс открывается на нём. Затем выбор сохраняется в localStorage, чтобы при следующем визите не повторять определение.

Переключатель языка стоит в подвале страницы оплаты, страницы «Pay Me» и в боковой панели дашборда. Выбор из переключателя перебивает автоопределение и сохраняется тем же способом.

У залогиненных продавцов предпочтение хранится в записи продавца, поэтому смена языка на ноутбуке переезжает на телефон без повторной настройки.

Справа налево для арабского

Арабский разворачивает всю раскладку. Текст выравнивается вправо, боковая панель уходит к правому краю, иконки и стрелки зеркалятся, а в полях суммы цифры остаются в естественном чтении слева направо. Контент-сайт на Astro (блог, changelog, главная) под /ar/* отображается так же.

Если вы читаете этот пост на арабском, его адрес /ar/blog/multilingual-checkout. Один и тот же slug существует во всех языках.

Продавец на одном языке, покупатель на другом

Страница оплаты и панель независимы друг от друга. Испаноязычный продавец может вести панель на испанском, а каждый его покупатель будет видеть оформление платежа на языке своего браузера. Со стороны покупателя нет привязки к языку продавца.

Это важно для трансграничной торговли. Агентство из Еревана, продающее клиентам в Турции, России и Испании, не обязано вести три отдельные страницы оплаты. Одна ссылка, три языка, автоматически.

Почему именно эти шесть

Выбор прагматичный, не исчерпывающий. Мы взяли языки, где уже был реальный спрос от пользователей или ясная рыночная возможность:

Английский идёт по умолчанию и на нём написана документация API
Арабский покрывает Залив и Северную Африку, где принятие стейблкоинов высокое
Испанский оказался вторым по запросам языком в первые месяцы
Турецкий обслуживает базу продавцов, которую волатильность лиры подталкивает к поддержке USDT в TRC-20
Армянский это дом: MutoPay строится в Ереване
Русский открывает постсоветскую диаспору и армянско-русское пересечение в нашей пользовательской базе

Если вашего рынка нет в списке и MutoPay вам пригодился бы при его наличии, напишите нам. Седьмой язык это файл переводов и пункт в переключателе, а не переписывание.

Что изменилось под капотом

Для тех, кому интересны детали: React-приложение использует react-i18next с одним JSON-каталогом на язык. Контент-сайт на Astro использует встроенный i18n Astro вместе с отдельной картой ui.ts и коллекциями контента по языкам (blog/en, blog/ar, blog/es и так далее). Совпадающие slug-и между языками генерируют альтернативы hreflang в карте сайта, и поисковики понимают, что это переводы одних и тех же страниц.

Память переводов живёт в content/src/i18n/ui.ts и в каталогах React по страницам. Добавление строки где-либо требует одинакового ключа во всех шести файлах, и это проверяется на этапе сборки.

Попробуйте

Откройте любую ссылку на оплату. Нажмите переключатель языка в подвале. Или поменяйте предпочитаемый язык в браузере и перезагрузите страницу.

Если заметите перевод, который звучит не к месту (слишком буквальная строка, неподходящее под местный регистр слово, проскользнувший английский фрагмент) скажите нам. Каталоги достаточно маленькие, чтобы правки выкатывались на той же неделе.