#Métodos de Pago

Bloque Payments soporta múltiples métodos de pago para procesar transacciones de forma segura.

#Métodos de Pago Disponibles

#Pagos con Tarjeta (card)

Acepta pagos con tarjetas de crédito y débito de las principales redes.

Tarjetas Soportadas:

• Visa
• Mastercard
• American Express
• Diners Club

Características:

• Autorización en tiempo real
• Soporte 3D Secure
• Validación automática de tarjeta
• Verificación CVV

#PSE (pse)

Acepta pagos por transferencia bancaria en Colombia a través de PSE (Pagos Seguros en Línea).

Características:

• Transferencia bancaria directa
• Disponible para todos los bancos en Colombia
• Confirmación en tiempo real o pendiente según el banco
• Sin necesidad de tarjeta de crédito

#Cómo Funciona

Los métodos de pago se manejan automáticamente a través del checkout alojado de Bloque. Tu flujo de integración es simple:

1. Tu backend crea una sesión de checkout
   ↓
2. Backend recibe checkout_id
   ↓
3. Pasa checkout_id al componente BloqueCheckout
   ↓
4. El componente renderiza iframe con el checkout alojado
   ↓
5. Usuario ingresa datos de tarjeta y completa el pago
   ↓
6. Se disparan callbacks onSuccess/onError

#Integración

#Backend (Crear Checkout)

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

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

const checkout = await bloque.checkout.create({
  name: 'Mi Producto',
  description: 'Descripción del producto',
  items: [
    {
      name: 'Producto',
      amount: 2999,
      quantity: 1,
    },
  ],
  success_url: 'https://tuapp.com/success',
});

// Enviar checkout.id al frontend
res.json({ id: checkout.id });

#Frontend (React)

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

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

interface CheckoutPageProps {
  // El checkoutId se genera en el backend usando @bloque/payments
  checkoutId: string;
}

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

#Filtrar Métodos de Pago

Puedes controlar qué métodos de pago se muestran en el checkout usando la propiedad paymentMethods:

// Solo tarjeta (default)
<BloqueCheckout
  checkoutId={checkoutId}
  paymentMethods={['card']}
  onSuccess={handleSuccess}
/>

// Solo PSE
<BloqueCheckout
  checkoutId={checkoutId}
  paymentMethods={['pse']}
  onSuccess={handleSuccess}
/>

// Ambos métodos
<BloqueCheckout
  checkoutId={checkoutId}
  paymentMethods={['card', 'pse']}
  onSuccess={handleSuccess}
/>

#Flujo de Pago con Tarjeta

1. Usuario selecciona pago con tarjeta en el checkout alojado
2. Usuario ingresa detalles de tarjeta
3. Se procesa la autorización en tiempo real
4. Se dispara callback onSuccess o onError

#Flujo de Pago con PSE

1. Usuario selecciona PSE en el checkout alojado
2. Usuario selecciona su banco
3. Usuario es redirigido al portal de su banco
4. Usuario completa la transferencia en su banco
5. Se dispara callback onSuccess, onPending o onError

#Manejando Respuestas de Pago

El componente BloqueCheckout proporciona callbacks para diferentes resultados:

<BloqueCheckout
  checkoutId={checkoutId}
  onReady={() => {
    console.log('Checkout listo');
  }}
  onSuccess={(data) => {
    console.log('ID de Pago:', data.payment_id);
    console.log('Estado:', data.status);
    console.log('Monto:', data.amount);
    console.log('Moneda:', data.currency);
    window.location.href = '/success';
  }}
  onError={(error) => {
    console.error('Error:', error);
  }}
/>

#Seguridad

Los pagos con tarjeta se procesan de forma segura:

• Compatible con PCI-DSS: Los datos de tarjeta nunca tocan tus servidores
• 3D Secure: Capa adicional de autenticación para transacciones seguras
• Cifrado: Cifrado de extremo a extremo para todos los datos sensibles

#Próximos Pasos

• Integración React - Configura el componente BloqueCheckout
• Webhooks - Maneja notificaciones de pago
• Manejo de Errores - Maneja errores de pago