MutoPay ahora habla seis idiomas
Una compradora en Estambul abre un enlace de pago de una tienda de Madrid. La página carga en turco. Paga, el comercio recibe el webhook, y en el panel del comercio en Madrid el pago aparece en español. Nadie tuvo que elegir el idioma.
Eso es lo que lanzamos este mes. La página de pago, la página de “Pay Me” y el panel completo del comerciante ya están traducidos a seis idiomas: inglés, árabe, español, turco, armenio y ruso. El sitio de marketing (este blog incluido) también está en los mismos seis.
Qué se tradujo
Lado del cliente:
- La página de pago alojada en
/pay/:id - La página del enlace “Pay Me” (
/pay/me/:slug) - Todos los textos del flujo de monedero: conectar, firmar, confirmar, reintentar, estados de error
- Las cadenas de cotización y comparación de rutas
- Las instrucciones de envío manual, los textos del QR y los avisos del importe con dust amount
- El aviso de redirección a KYC y el estado raro “necesita revisión manual”
Lado del comerciante:
- La barra lateral del panel y todas las páginas bajo
/dashboard/* - Ajustes: claves de API, secreto del webhook, canales, master key, override de liquidación
- Asistente de configuración inicial
- Lista de pagos, filtros, vista de detalle, etiquetas de estado
- Configuración de los enlaces “Pay Me”
- Todos los mensajes de validación y de error de los formularios
El panel de administración (/admin/*) sigue en inglés por ahora. Es interno y no lo ve el cliente.
Cómo se elige el idioma
En la primera visita leemos el idioma del navegador con navigator.language. Si coincide con uno de los seis, la interfaz carga en ese idioma. Luego guardamos la elección en localStorage para que la siguiente visita no repita la detección.
Hay un selector en el pie de la página de pago, en el de la página “Pay Me” y en la barra lateral del panel. Elegir un idioma desde el selector reemplaza el detectado automáticamente y se guarda igual.
Para los comerciantes con sesión iniciada, la preferencia se guarda en el registro del comerciante. Así cambiar de idioma en el portátil se traslada al móvil sin volver a configurarlo.
De derecha a izquierda para el árabe
El árabe da la vuelta a la maquetación entera. El texto se alinea a la derecha, la barra lateral pasa al borde derecho, los iconos y las flechas se reflejan, y los campos de importe mantienen los números en su orientación natural de izquierda a derecha. El sitio de contenido en Astro (blog, changelog, página principal) se renderiza igual bajo /ar/*.
Si lees este post en árabe, su URL es /ar/blog/multilingual-checkout. El mismo slug existe en cada idioma.
Comerciante en un idioma, cliente en otro
La página de pago y el panel son independientes. Un comerciante hispanohablante puede usar su panel en español mientras cada cliente ve el checkout en el idioma de su navegador. No hay un bloqueo de idioma por comerciante en el lado del cliente.
Esto importa para el comercio transfronterizo. Una agencia con sede en Ereván que vende a clientes en Turquía, Rusia y España no necesita mantener tres páginas de pago. Un enlace, tres idiomas, automático.
Por qué estos seis
La selección es pragmática, no exhaustiva. Elegimos los idiomas donde ya teníamos demanda real de usuarios o una oportunidad de mercado clara:
- Inglés es el idioma por defecto y el de la documentación de la API
- Árabe cubre el Golfo y el norte de África, donde la adopción de stablecoins es alta
- Español fue el segundo idioma más pedido en los primeros meses
- Turco sirve a la base de comerciantes que la volatilidad de la lira empujó hacia el soporte de USDT en TRC-20
- Armenio es la casa: MutoPay se construye en Ereván
- Ruso abre la diáspora postsoviética y el solapamiento armenio-ruso de nuestra base de usuarios
Si tu mercado no está en esta lista y usarías MutoPay si lo estuviera, escríbenos. Añadir un séptimo idioma es un archivo de traducción y una entrada en el selector, no una reescritura.
Qué cambió por dentro
Para quien tenga curiosidad: la app de React usa react-i18next con un catálogo JSON por idioma. El sitio de contenido en Astro usa la configuración i18n integrada de Astro junto con un mapa ui.ts y colecciones de contenido por idioma (blog/en, blog/ar, blog/es, y así). Los slugs coincidentes entre idiomas generan alternativas hreflang en el sitemap, para que los buscadores sepan qué páginas son traducciones unas de otras.
La memoria de traducción vive en content/src/i18n/ui.ts y en los catálogos de React por página. Añadir una cadena en cualquier sitio exige la misma clave en los seis ficheros, y eso se valida en tiempo de build.
Pruébalo
Abre cualquier enlace de pago. Pulsa el selector de idioma del pie. O cambia el idioma preferido del navegador y recarga.
Si encuentras una traducción que no encaja (una cadena demasiado literal, una palabra que no funciona en el registro local, un trozo de inglés que se coló) avísanos. Los catálogos son lo bastante pequeños como para que las correcciones salgan la misma semana.