Manejo de errores del SDK
Detecta y reacciona ante fallos del Bridge SDK con TokeflowError y la referencia completa de TokeflowErrorCode — usa switch sobre códigos estables, muestra mensajes amigables y centraliza el registro con un handler global onError.
Cada fallo en el Bridge SDK se reporta como un TokeflowError — un error tipado con un code estable y legible por máquina. Usa switch sobre code para controlar tu UI, muestra message a las personas y registra requestId para soporte.
El SDK lanza (o rechaza promesas con) TokeflowError para todo, desde una clave mal configurada hasta un campo de tarjeta incompleto o un timeout de red. Como los códigos son estables, puedes construir tu manejo de errores una sola vez y confiar en él a través de los flujos de tokenización, checkout y wallet.
Para errores de la API del lado del servidor (el sobre de error devuelto por https://api.tokeflow.com), consulta Errores. Esta página cubre los errores generados en el navegador por el Bridge SDK.
La clase TokeflowError
TokeflowError extiende el Error nativo, por lo que error.message e instanceof Error funcionan como de costumbre. Añade un code y contexto de transporte opcional.
class TokeflowError extends Error {
code: TokeflowErrorCode; // stable machine-readable code — switch on this
message: string; // human-readable explanation (display-safe, may reword)
httpStatus?: number; // HTTP status, when the error came from an API call
requestId?: string; // request id (req_…) for support, when available
details?: unknown; // optional structured context about the failure
}| Property | Type | Always present | Description |
|---|---|---|---|
code | TokeflowErrorCode | Sí | Código estable y legible por máquina. Usa switch sobre esto. Consulta la tabla completa. |
message | string | Sí | Explicación legible para humanos. Segura de mostrar, pero su redacción puede cambiar con el tiempo — nunca la parsees. |
httpStatus | number | No | Presente cuando el error se originó a partir de una solicitud a la API (p. ej. 429, 500). |
requestId | string | No | Identificador de la solicitud (req_…) de la llamada subyacente a la API, cuando está disponible. Regístralo. |
details | unknown | No | Contexto estructurado opcional sobre el fallo. |
Trata code como el contrato estable y message como solo para mostrar. Registra siempre requestId y httpStatus — hacen que las solicitudes de soporte se resuelvan mucho más rápido.
Cómo fluyen los errores
Un TokeflowError aparece en dos lugares: rechaza la promesa de la llamada que falló (por lo que lo manejas con try/catch) y — si configuraste uno — también se pasa al handler global onError.
Manejo de errores con try/catch
Envuelve las llamadas al SDK en try/catch, acota a TokeflowError con instanceof, y luego usa switch sobre error.code para mapear cada fallo a un texto orientado al usuario. Mantén siempre una rama default.
import { TokeflowError, TokeflowErrorCode } from '@tokeflow_com/bridge-js';
try {
const token = await tokeflow.cards.tokenize({ card: cardElement });
// Send token.tokenId to your backend to create the transaction.
} catch (error) {
if (error instanceof TokeflowError) {
switch (error.code) {
case TokeflowErrorCode.ELEMENT_INCOMPLETE:
showError('Please complete all card fields.');
break;
case TokeflowErrorCode.INVALID_CARD:
showError('Please check your card number.');
break;
case TokeflowErrorCode.INVALID_CPF:
case TokeflowErrorCode.INVALID_DOCUMENT:
showError('Please check the CPF or CNPJ you entered.');
break;
case TokeflowErrorCode.EXPIRED_CARD:
showError('This card has expired.');
break;
case TokeflowErrorCode.UNSUPPORTED_CARD_BRAND:
showError('This card brand is not supported.');
break;
case TokeflowErrorCode.PAYMENT_METHOD_DISABLED:
showError('That payment method is not available right now.');
break;
case TokeflowErrorCode.SESSION_EXPIRED:
showError('Your session expired. Please refresh and try again.');
break;
case TokeflowErrorCode.RATE_LIMITED:
showError('Too many attempts. Please wait a moment and try again.');
break;
case TokeflowErrorCode.NETWORK_ERROR:
case TokeflowErrorCode.TIMEOUT:
showError('Network problem. Please try again.');
break;
default:
showError(error.message);
}
// Log the transport context for support and monitoring.
console.error('Tokeflow error', {
code: error.code,
httpStatus: error.httpStatus,
requestId: error.requestId,
details: error.details,
});
} else {
// Not a TokeflowError — rethrow or handle as a generic failure.
throw error;
}
}error.code es un valor del enum TokeflowErrorCode. Compara contra el enum (p. ej. TokeflowErrorCode.INVALID_CARD) en lugar de contra la cadena en bruto, de modo que un error de tipeo se convierta en un error de compilación en TypeScript.
Muchos fallos de entrada se pueden evitar antes de un viaje de ida y vuelta. Lee el getState() de un elemento ({ empty, valid, invalid, complete }) y mantén tu botón de pago deshabilitado hasta que state.complete && state.valid. Esto evita la mayoría de los errores ELEMENT_INCOMPLETE y ELEMENT_INVALID. Consulta Tokenización.
Handler global onError
Pasa un callback onError en la configuración del SDK para recibir todos los TokeflowError en un solo lugar — ideal para el registro y monitoreo centralizados. Complementa a try/catch; no lo reemplaza. Usa onError para la observabilidad y tu catch local para la reacción orientada al usuario en el punto del fallo.
import { TokeflowBridge } from '@tokeflow_com/bridge-js';
const tokeflow = new TokeflowBridge({
publicKey: 'pk_live_mer_your_public_key',
onError: (error) => {
// Centralized logging — runs for every TokeflowError the SDK raises.
logToService({
code: error.code,
message: error.message,
httpStatus: error.httpStatus,
requestId: error.requestId,
});
},
});Mantén onError solo con efectos secundarios (registro, métricas). No lances errores desde dentro de él, y no lo uses para controlar tu flujo de checkout — controla la UI desde el bloque catch en el sitio de la llamada, donde tienes contexto local.
En React, configura onError en la configuración del provider, y lee el error actual desde el hook useTokeflow():
import { TokeflowProvider, useTokeflow } from '@tokeflow_com/bridge-js/react';
function App() {
return (
<TokeflowProvider
config={{
publicKey: 'pk_live_mer_your_public_key',
onError: (error) => logToService({ code: error.code, requestId: error.requestId }),
}}
>
<Checkout />
</TokeflowProvider>
);
}
function Checkout() {
const { isReady, error } = useTokeflow();
if (error) return <div role="alert">{error.message}</div>;
if (!isReady) return <div>Loading…</div>;
// render your payment form
}Referencia de TokeflowErrorCode
Cada error que lanza el SDK lleva uno de estos códigos. Aquí se agrupan por etapa del ciclo de vida para facilitar la lectura; el enum en sí es plano.
Configuración e inicialización
| Code | Description |
|---|---|
INVALID_CONFIG | La configuración del SDK es inválida (opciones incorrectas o en conflicto). |
INVALID_PUBLIC_KEY | La clave pública falta o no es una clave pk_… válida. |
NOT_IN_BROWSER | El SDK se usó fuera de un entorno de navegador (p. ej. durante el renderizado del lado del servidor). |
NOT_INITIALIZED | Se llamó a un método del SDK antes de que init() se resolviera. |
Ciclo de vida de la sesión
| Code | Description |
|---|---|
SESSION_CREATION_FAILED | El SDK no pudo crear una sesión durante init(). |
SESSION_EXPIRED | La sesión ha expirado y no se actualizó. |
SESSION_REFRESH_FAILED | Falló una actualización de sesión en segundo plano o manual. |
Elementos y validación de entrada
| Code | Description |
|---|---|
ELEMENT_NOT_MOUNTED | La operación requiere un elemento que no se ha montado en el DOM. |
ELEMENT_INVALID | El valor de un elemento es inválido. |
ELEMENT_INCOMPLETE | La entrada de un elemento está incompleta (un campo requerido no se ingresó por completo). |
VALIDATION_ERROR | La validación de la entrada falló. |
INVALID_CARD | El número de tarjeta no pasó la validación. |
INVALID_CPF | El CPF no pasó la validación. |
INVALID_DOCUMENT | El CPF o CNPJ de un pagador de PIX o boleto no pasó la validación (SDK 2.8.0+). |
EXPIRED_CARD | La fecha de vencimiento de la tarjeta está en el pasado. |
Tokenización
| Code | Description |
|---|---|
TOKENIZATION_FAILED | No se pudo completar la tokenización. |
TOKEN_REGISTRATION_FAILED | El token no se pudo registrar con el backend — incluido un pagador de PIX o boleto que la API rechazó. |
Checkout
| Code | Description |
|---|---|
NO_CHECKOUT_SESSION | Se realizó una llamada de checkout sin un checkoutSessionId vinculado. |
CHECKOUT_CONTEXT_FETCH_FAILED | No se pudo obtener el contexto de checkout. |
Pago y wallets
| Code | Description |
|---|---|
PAYMENT_METHOD_DISABLED | El método de pago no está habilitado para este Merchant. |
UNSUPPORTED_CARD_BRAND | La marca de la tarjeta no es compatible. |
PAYMENT_CANCELLED | El pago fue cancelado (p. ej. se cerró la hoja de Apple Pay o Google Pay). |
PAYMENT_FAILED | El pago falló. |
Transporte
| Code | Description |
|---|---|
NETWORK_ERROR | Una solicitud de red falló. |
TIMEOUT | Una solicitud superó el tiempo de espera. |
RATE_LIMITED | Demasiadas solicitudes — el cliente está siendo limitado por tasa. |
SERVER_ERROR | El servidor devolvió un error. |
RATE_LIMITED, SERVER_ERROR, NETWORK_ERROR y TIMEOUT normalmente llevan un httpStatus y un requestId. Para fallos de transporte transitorios, reintenta con backoff exponencial en lugar de reintentar de inmediato. Consulta Idempotencia y límites de tasa.
Manejo recomendado por categoría
Diferentes categorías requieren diferentes respuestas. Usa esto como una política de partida.
| Category | Example codes | What to do |
|---|---|---|
| Corregir la integración | INVALID_CONFIG, INVALID_PUBLIC_KEY, NOT_IN_BROWSER, NOT_INITIALIZED | Errores en tu configuración. Muéstralos durante el desarrollo; no muestres el texto en bruto a los usuarios finales. |
| Pedir al usuario que corrija la entrada | ELEMENT_INCOMPLETE, ELEMENT_INVALID, INVALID_CARD, INVALID_CPF, INVALID_DOCUMENT, EXPIRED_CARD, VALIDATION_ERROR | Muestra un mensaje procesable a nivel de campo y deja que el usuario reintente. |
| Recuperar la sesión | SESSION_EXPIRED, SESSION_REFRESH_FAILED, SESSION_CREATION_FAILED | Reinicializa el bridge o pide al usuario que actualice, luego reintenta. |
| Ajustar la oferta | PAYMENT_METHOD_DISABLED, UNSUPPORTED_CARD_BRAND | Ofrece un método de pago o una tarjeta diferentes. |
| Acción esperada del usuario | PAYMENT_CANCELLED | Trátalo como una cancelación benigna — devuelve al usuario al paso de pago sin un banner de error. |
| Reintentar con backoff | NETWORK_ERROR, TIMEOUT, RATE_LIMITED, SERVER_ERROR | Reintenta los fallos transitorios con backoff exponencial; muestra un mensaje de "inténtalo de nuevo" no alarmante. |
| Fallo genérico | TOKENIZATION_FAILED, TOKEN_REGISTRATION_FAILED, PAYMENT_FAILED, CHECKOUT_CONTEXT_FETCH_FAILED | Muestra un mensaje de fallo genérico, registra el requestId y deja que el usuario reintente. |
Nunca muestres requestId, httpStatus o details en bruto a los usuarios finales. Regístralos para tu propia depuración y soporte, y muestra solo un message limpio y amigable (o tu propio texto) en la UI.
Próximos pasos
- Tokenización — formas de entrada, opciones y la respuesta del token.
- Descripción general del Bridge SDK — instalación, ciclo de vida y el requisito de clave pública.
- Errores — el sobre de error del lado del servidor devuelto por la API de Tokeflow.
- Idempotencia y límites de tasa — reintenta de forma segura y maneja las respuestas
429.