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
}
PropertyTypeAlways presentDescription
codeTokeflowErrorCodeSíCódigo estable y legible por máquina. Usa switch sobre esto. Consulta la tabla completa.
messagestringSíExplicación legible para humanos. Segura de mostrar, pero su redacción puede cambiar con el tiempo — nunca la parsees.
httpStatusnumberNoPresente cuando el error se originó a partir de una solicitud a la API (p. ej. 429, 500).
requestIdstringNoIdentificador de la solicitud (req_…) de la llamada subyacente a la API, cuando está disponible. Regístralo.
detailsunknownNoContexto 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

CodeDescription
INVALID_CONFIGLa configuración del SDK es inválida (opciones incorrectas o en conflicto).
INVALID_PUBLIC_KEYLa clave pública falta o no es una clave pk_… válida.
NOT_IN_BROWSEREl SDK se usó fuera de un entorno de navegador (p. ej. durante el renderizado del lado del servidor).
NOT_INITIALIZEDSe llamó a un método del SDK antes de que init() se resolviera.

Ciclo de vida de la sesión

CodeDescription
SESSION_CREATION_FAILEDEl SDK no pudo crear una sesión durante init().
SESSION_EXPIREDLa sesión ha expirado y no se actualizó.
SESSION_REFRESH_FAILEDFalló una actualización de sesión en segundo plano o manual.

Elementos y validación de entrada

CodeDescription
ELEMENT_NOT_MOUNTEDLa operación requiere un elemento que no se ha montado en el DOM.
ELEMENT_INVALIDEl valor de un elemento es inválido.
ELEMENT_INCOMPLETELa entrada de un elemento está incompleta (un campo requerido no se ingresó por completo).
VALIDATION_ERRORLa validación de la entrada falló.
INVALID_CARDEl número de tarjeta no pasó la validación.
INVALID_CPFEl CPF no pasó la validación.
INVALID_DOCUMENTEl CPF o CNPJ de un pagador de PIX o boleto no pasó la validación (SDK 2.8.0+).
EXPIRED_CARDLa fecha de vencimiento de la tarjeta está en el pasado.

Tokenización

CodeDescription
TOKENIZATION_FAILEDNo se pudo completar la tokenización.
TOKEN_REGISTRATION_FAILEDEl token no se pudo registrar con el backend — incluido un pagador de PIX o boleto que la API rechazó.

Checkout

CodeDescription
NO_CHECKOUT_SESSIONSe realizó una llamada de checkout sin un checkoutSessionId vinculado.
CHECKOUT_CONTEXT_FETCH_FAILEDNo se pudo obtener el contexto de checkout.

Pago y wallets

CodeDescription
PAYMENT_METHOD_DISABLEDEl método de pago no está habilitado para este Merchant.
UNSUPPORTED_CARD_BRANDLa marca de la tarjeta no es compatible.
PAYMENT_CANCELLEDEl pago fue cancelado (p. ej. se cerró la hoja de Apple Pay o Google Pay).
PAYMENT_FAILEDEl pago falló.

Transporte

CodeDescription
NETWORK_ERRORUna solicitud de red falló.
TIMEOUTUna solicitud superó el tiempo de espera.
RATE_LIMITEDDemasiadas solicitudes — el cliente está siendo limitado por tasa.
SERVER_ERROREl 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.

CategoryExample codesWhat to do
Corregir la integraciónINVALID_CONFIG, INVALID_PUBLIC_KEY, NOT_IN_BROWSER, NOT_INITIALIZEDErrores 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 entradaELEMENT_INCOMPLETE, ELEMENT_INVALID, INVALID_CARD, INVALID_CPF, INVALID_DOCUMENT, EXPIRED_CARD, VALIDATION_ERRORMuestra un mensaje procesable a nivel de campo y deja que el usuario reintente.
Recuperar la sesiónSESSION_EXPIRED, SESSION_REFRESH_FAILED, SESSION_CREATION_FAILEDReinicializa el bridge o pide al usuario que actualice, luego reintenta.
Ajustar la ofertaPAYMENT_METHOD_DISABLED, UNSUPPORTED_CARD_BRANDOfrece un método de pago o una tarjeta diferentes.
Acción esperada del usuarioPAYMENT_CANCELLEDTrátalo como una cancelación benigna — devuelve al usuario al paso de pago sin un banner de error.
Reintentar con backoffNETWORK_ERROR, TIMEOUT, RATE_LIMITED, SERVER_ERRORReintenta los fallos transitorios con backoff exponencial; muestra un mensaje de "inténtalo de nuevo" no alarmante.
Fallo genéricoTOKENIZATION_FAILED, TOKEN_REGISTRATION_FAILED, PAYMENT_FAILED, CHECKOUT_CONTEXT_FETCH_FAILEDMuestra 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

En esta página