馃毀 La documentacion de Bloque est谩 en desarrollo
close
Bloque Docs
  • Espa帽ol

      • Personalizaci贸n

      Personaliza la apariencia del componente BloqueCheckout para que coincida con tu marca.

      Configuraci贸n de Apariencia

      Usa el prop appearance para personalizar colores, bordes y fuentes:

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

<BloqueCheckout
  checkoutId={checkoutId}
  appearance={{
    primaryColor: '#10b981',
    borderRadius: '12px',
    fontFamily: 'Inter, system-ui, sans-serif',
  }}
  onSuccess={handleSuccess}
/>

      Opciones Disponibles

      primaryColor

      Establece el color principal de marca para botones, enlaces y estados activos.

      appearance={{
  primaryColor: '#10b981',  // Verde
}}

      Ejemplos:

      // Azul
primaryColor: '#3b82f6'

// Morado
primaryColor: '#8b5cf6'

// Rojo
primaryColor: '#ef4444'

// Color de marca personalizado
primaryColor: '#FF6B6B'

      borderRadius

      Controla la redondez de inputs, botones y contenedores.

      appearance={{
  borderRadius: '12px',
}}

      Ejemplos:

      // Esquinas rectas
borderRadius: '0px'

// Ligeramente redondeado
borderRadius: '4px'

// Moderadamente redondeado (predeterminado)
borderRadius: '8px'

// Muy redondeado
borderRadius: '16px'

// Forma de p铆ldora
borderRadius: '9999px'

      fontFamily

      Establece la familia de fuente para todo el texto.

      appearance={{
  fontFamily: 'Inter, system-ui, sans-serif',
}}

      Ejemplos:

      // Fuentes del sistema
fontFamily: 'system-ui, -apple-system, sans-serif'

// Google Fonts
fontFamily: "'Poppins', sans-serif"

// Fuentes personalizadas
fontFamily: "'TuFuente', 'Fallback', sans-serif"

      Ejemplo Completo

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

function CheckoutPage() {
  const appearance = {
    primaryColor: '#6366f1',           // Indigo
    borderRadius: '16px',               // Redondeado
    fontFamily: "'Inter', sans-serif",  // Fuente Inter
  };

  return (
    <BloqueCheckout
      checkoutId={checkoutId}
      appearance={appearance}
      onSuccess={handleSuccess}
    />
  );
}

      Opciones de Pago

      showInstallments

      Habilita las opciones de pago en cuotas en el checkout:

      <BloqueCheckout
  checkoutId={checkoutId}
  showInstallments
  onSuccess={handleSuccess}
/>

      Cuando est谩 habilitado, los usuarios ver谩n los planes de cuotas disponibles durante el checkout.

      Estilos del Iframe

      Para estilos m谩s avanzados del contenedor del iframe, usa el prop iframeStyles:

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={appearance}
  iframeStyles={{
    height: '700px',
    borderRadius: '16px',
    boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
  }}
  onSuccess={handleSuccess}
/>

      Personalizaci贸n con CSS

      Para estilizar el contenedor, usa el prop className:

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={appearance}
  className="custom-checkout"
  onSuccess={handleSuccess}
/>

      Luego agrega CSS personalizado:

      .custom-checkout {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

      Estilos Inline

      Usa el prop style para estilos inline en el contenedor:

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={appearance}
  style={{
    maxWidth: '600px',
    margin: '0 auto',
    padding: '2rem',
    backgroundColor: '#ffffff',
    borderRadius: '8px',
    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
  }}
  onSuccess={handleSuccess}
/>

      Ejemplos de Marca

      Startup Tecnol贸gica Moderna

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={{
    primaryColor: '#6366f1',
    borderRadius: '12px',
    fontFamily: "'Inter', system-ui, sans-serif",
  }}
  onSuccess={handleSuccess}
/>

      Tienda E-commerce

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={{
    primaryColor: '#f59e0b',
    borderRadius: '8px',
    fontFamily: "'Poppins', sans-serif",
  }}
  onSuccess={handleSuccess}
/>

      Servicios Financieros

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={{
    primaryColor: '#0f766e',
    borderRadius: '4px',
    fontFamily: "'IBM Plex Sans', sans-serif",
  }}
  onSuccess={handleSuccess}
/>

      Agencia Creativa

      <BloqueCheckout
  checkoutId={checkoutId}
  appearance={{
    primaryColor: '#ec4899',
    borderRadius: '24px',
    fontFamily: "'Quicksand', sans-serif",
  }}
  onSuccess={handleSuccess}
/>

      Temas Din谩micos

      Cambia la apariencia seg煤n las preferencias del usuario:

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

function CheckoutPage({ checkoutId }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const appearance = {
    primaryColor: theme === 'light' ? '#3b82f6' : '#60a5fa',
    borderRadius: '12px',
    fontFamily: "'Inter', sans-serif",
  };

  return (
    <div style={{ background: theme === 'dark' ? '#1f2937' : '#ffffff' }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Cambiar Tema
      </button>
      <BloqueCheckout
        checkoutId={checkoutId}
        appearance={appearance}
        onSuccess={handleSuccess}
      />
    </div>
  );
}

      Pr贸ximos Pasos