馃毀 La documentacion de Bloque est谩 en desarrollo

Manejo de Errores

Aprende c贸mo manejar errores con gracia en Bloque Payments.

Tipos de Errores

Bloque Payments puede devolver diferentes tipos de errores:

  • Errores de validaci贸n: Datos de entrada inv谩lidos
  • Errores de autenticaci贸n: Access token inv谩lido o faltante
  • Errores de pago: Fallos en el procesamiento de pagos
  • Errores de red: Problemas de conexi贸n

Manejo de Errores en Frontend

Usa el callback onError para manejar errores en el componente React:

import { init, BloqueCheckout } from '@bloque/payments-react';

init({
  publicApiKey: 'pk_live_...',
  mode: 'production',
});

function CheckoutPage({ checkoutId }) {
  return (
    <BloqueCheckout
      checkoutId={checkoutId}
      onSuccess={(data) => {
        console.log('隆Pago exitoso!', data.payment_id);
        window.location.href = '/success';
      }}
      onError={(error) => {
        console.error('Pago fallido:', error);

        // Mostrar mensaje amigable para el usuario
        alert(`Pago fallido: ${error}`);
      }}
      onPending={(data) => {
        console.log('Pago pendiente:', data.payment_id);
        window.location.href = '/pending';
      }}
    />
  );
}

Manejo de Errores en Backend

Maneja errores al crear checkouts:

import { Bloque } from '@bloque/payments';
import express from 'express';

const app = express();
app.use(express.json());

const bloque = new Bloque({
  accessToken: process.env.BLOQUE_ACCESS_TOKEN!,
  mode: 'production',
});

app.post('/api/create-checkout', async (req, res) => {
  try {
    const checkout = await bloque.checkout.create({
      name: req.body.name,
      items: req.body.items,
      success_url: req.body.success_url,
    });

    res.json({ id: checkout.id, url: checkout.url });
  } catch (error) {
    console.error('Error de checkout:', error);

    // Determinar tipo de error
    if (error.status === 400) {
      return res.status(400).json({
        success: false,
        error: 'Datos de checkout inv谩lidos',
        message: error.message,
      });
    }

    if (error.status === 401) {
      return res.status(401).json({
        success: false,
        error: 'No autorizado',
        message: 'Access token inv谩lido',
      });
    }

    // Error gen茅rico
    res.status(500).json({
      success: false,
      error: 'Error interno del servidor',
    });
  }
});

app.listen(3000);

C贸digos de Error Comunes

Errores de Tarjeta

  • card_declined: Tarjeta rechazada
  • insufficient_funds: Fondos insuficientes
  • invalid_card_number: N煤mero de tarjeta inv谩lido
  • invalid_expiry: Fecha de vencimiento inv谩lida
  • invalid_cvv: C贸digo de seguridad inv谩lido

Errores Generales

  • invalid_amount: Monto de pago inv谩lido
  • invalid_currency: Moneda no soportada
  • expired_checkout: Sesi贸n de checkout expirada

Mensajes Amigables para el Usuario

Proporciona mensajes de error claros y accionables:

function getErrorMessage(errorCode: string): string {
  switch (errorCode) {
    case 'card_declined':
      return 'Tu tarjeta fue rechazada. Por favor intenta otro m茅todo de pago o contacta a tu banco.';

    case 'insufficient_funds':
      return 'Tu tarjeta tiene fondos insuficientes. Por favor intenta otra tarjeta.';

    case 'invalid_card_number':
      return 'El n煤mero de tarjeta que ingresaste es inv谩lido. Por favor verifica e intenta de nuevo.';

    case 'expired_card':
      return 'Tu tarjeta ha expirado. Por favor usa una tarjeta diferente.';

    case 'invalid_cvv':
      return 'El c贸digo de seguridad (CVV) que ingresaste es inv谩lido.';

    case 'bank_unavailable':
      return 'El banco seleccionado no est谩 disponible temporalmente. Por favor intenta m谩s tarde.';

    case 'expired_checkout':
      return 'La sesi贸n de pago ha expirado. Por favor inicia una nueva.';

    default:
      return 'El pago fall贸. Por favor intenta de nuevo o contacta a soporte.';
  }
}

Pr贸ximos Pasos