Localización

El Bridge SDK renderiza sus campos seguros con textos integrados: etiquetas de elementos, marcadores de posición y mensajes de error de validación. La localización te permite presentar esos textos en el idioma de tu cliente y adaptar cadenas individuales para que coincidan con la voz de tu producto, sin tocar los campos seguros en sí.

El SDK incluye dos paquetes de traducción integrados de fábrica: inglés (en) y portugués brasileño (pt-BR). Estableces una configuración regional predeterminada una sola vez en la inicialización y, cuando necesitas un control más preciso, anulas cadenas específicas por elemento.

Establecer la configuración regional predeterminada

Pasa locale al constructor del SDK para aplicar un idioma a cada elemento que crees. Cuando se omite, el SDK usa 'en' de forma predeterminada.

import { TokeflowBridge } from '@tokeflow_com/bridge-js';

const tokeflow = new TokeflowBridge({
  publicKey: 'pk_live_mer_xxx',
  locale: 'pt-BR', // applies to every element by default
});

await tokeflow.init();

Anular cadenas por elemento

Cada elemento acepta su propio locale y un objeto translations. Úsalo para localizar un solo campo o para reemplazar cadenas específicas —una etiqueta personalizada, un mensaje de error más amigable— mientras dejas todo lo demás en el paquete integrado.

const cardNumber = tokeflow.createCardNumberElement({
  locale: 'pt-BR',
  translations: {
    number: {
      label: 'Número do cartão',
      errors: { invalid: 'Verifique o número do cartão' },
    },
  },
});

cardNumber.mount('#card-number');

Cualquier cadena que no anules recae en el paquete integrado de la configuración regional activa. Solo especificas lo que quieres cambiar.

Precedencia

Cuando la misma cadena está definida en más de un lugar, el SDK la resuelve primero desde la fuente más específica:

1. translations por elemento — pasado a una fábrica create*Element(). La máxima prioridad.
2. translations de init del SDK — pasado al constructor TokeflowBridge. Se aplica a cada elemento.
3. Paquete integrado — las cadenas en o pt-BR que se incluyen con el SDK. El respaldo para todo lo que no se anule.

La resolución es por cadena, no por objeto: una anulación por elemento para una etiqueta no descarta tu anulación a nivel de init de una etiqueta diferente; cada cadena se resuelve de forma independiente a lo largo de la cadena.

const tokeflow = new TokeflowBridge({
  publicKey: 'pk_live_mer_xxx',
  locale: 'pt-BR',
  translations: {
    // Applies to every element created from this bridge
    number: { label: 'Cartão de crédito' },
  },
});

await tokeflow.init();

// This element overrides the label again, just for itself
const cardNumber = tokeflow.createCardNumberElement({
  translations: {
    number: { label: 'Número do cartão' }, // wins for this element only
  },
});

Ejemplo: anular la etiqueta y el error del número de tarjeta en pt-BR

Este ejemplo establece pt-BR como configuración regional predeterminada y luego personaliza la etiqueta del elemento de número de tarjeta y su mensaje de error "invalid". Todas las demás cadenas —el marcador de posición de vencimiento, la etiqueta del CVC, etc.— provienen del paquete integrado pt-BR.

import { TokeflowBridge } from '@tokeflow_com/bridge-js';

const tokeflow = new TokeflowBridge({
  publicKey: 'pk_live_mer_xxx',
  locale: 'pt-BR',
});

await tokeflow.init();

const cardNumber = tokeflow.createCardNumberElement({
  locale: 'pt-BR',
  translations: {
    number: {
      label: 'Número do cartão',
      errors: {
        invalid: 'Verifique o número do cartão',
      },
    },
  },
});

const cardExpiry = tokeflow.createCardExpirationElement(); // built-in pt-BR
const cardCvc = tokeflow.createCardCvcElement();           // built-in pt-BR

cardNumber.mount('#card-number');
cardExpiry.mount('#card-expiry');
cardCvc.mount('#card-cvc');

React

Las mismas props locale y translations están disponibles en los componentes de elementos de React.

import { CardNumberElement } from '@tokeflow_com/bridge-js/react';

function CardNumber() {
  return (
    <CardNumberElement
      id="card-number"
      locale="pt-BR"
      translations={{
        number: {
          label: 'Número do cartão',
          errors: { invalid: 'Verifique o número do cartão' },
        },
      }}
    />
  );
}

Establece la configuración regional predeterminada una sola vez en el proveedor para que se aplique a cada elemento:

import { TokeflowProvider } from '@tokeflow_com/bridge-js/react';

<TokeflowProvider config={{ publicKey: 'pk_live_mer_xxx', locale: 'pt-BR' }}>
  <YourApp />
</TokeflowProvider>;

Inspeccionar los paquetes integrados

Los paquetes de traducción integrados se exportan como BUILTIN_TRANSLATIONS. Impórtalo para ver la forma exacta y las cadenas que proporciona cada configuración regional: útil al decidir qué claves anular.

import { BUILTIN_TRANSLATIONS } from '@tokeflow_com/bridge-js';

console.log(BUILTIN_TRANSLATIONS.en);    // English pack
console.log(BUILTIN_TRANSLATIONS['pt-BR']); // Brazilian Portuguese pack

Relacionado

• Inicio rápido — configura el SDK y monta tu primer elemento.
• Tokenización — intercambia los datos de tarjeta recopilados por una referencia de token.
• Descripción general del SDK — el Bridge SDK de un vistazo.