PAYMENTS · ELEMENTS

    Elements

    Componentes UI individuales y seguros que se integran en tu sitio. A diferencia de Checkout, Elements te da piezas modulares — card inputs, selectores, botones — para construir tu experiencia de pago exacta.

    WHITE-LABEL COMPONENTS

    Construí tu checkout pieza por pieza

    Elige los componentes que necesitas, aplica tu tema y previsualiza en tiempo real.

    elements.demo.brandLabel

    Card Input

    Campo de tarjeta seguro con validación en tiempo real.

    Method Selector

    Selector de método de pago adaptado a cada mercado.

    Pay Button

    Botón de pago con estados y animaciones custom.

    Address Form

    Formulario de dirección con autocompletado regional.

    F

    Fintech Blue

    Componentes modulares

    Elements

    Componente activo

    4242 4242 4242 4242
    12/28
    •••
    Tokenizado en iframe seguro

    // Import individual

    import { CardInput } from "@akua/elements"

    // Renderiza en iframe seguro PCI DSS

    PERSONALIZACIÓN

    Construí tu checkout pieza por pieza

    Los 4 presets son solo el punto de partida. Define un tema desde cero con un objeto de configuración que controla cada propiedad visual.

    M
    Tu marca
    WHITE-LABEL

    $105,987 COP

    4242 4242 4242 4242
    12 / 28
    •••

    Powered by Akua

    const myTheme = {
      colors: {
        primary: "#FF441F",
        background: "#F0F4FF",
        error: "#DC2626",
      },
      typography: {
        fontFamily: 'Manrope', sans-serif,
      },
      borderRadius: "4px",
      shadows: "0 2px 8px rgba(0,0,0,0.08)…",
    };
    COMPATIBILIDAD

    Funciona con cualquier framework

    React

    SDK nativo

    Vue

    SDK nativo

    Angular

    SDK nativo

    Vanilla JS

    SDK nativo

    Mobile

    Elements en apps nativas

    Transparencia total: Elements está diseñado para web. En apps móviles funciona vía WebView con soporte dedicado. No hay SDK nativo de React Native — y preferimos ser claros sobre eso.

    Web — Soporte completo

    React, Vue, Angular, Vanilla JS

    Mobile — Vía WebView

    React Native, Flutter, Swift, Kotlin

    App.native.tsx
    SEGURIDAD

    PCI compliant sin tocar datos sensibles

    Los datos de tarjeta nunca pasan por tu servidor. Elements tokeniza antes de enviártela.

    Iframe aislado

    Cada input de tarjeta vive en un iframe seguro que nunca expone datos PAN a tu dominio.

    Tokenización instantánea

    Los datos se tokenizan en nuestros servidores PCI Level 1 antes de llegar a tu backend.

    Zero PCI scope

    Al no manejar datos de tarjeta, tu alcance PCI se reduce a SAQ-A. Menos auditorías, menos riesgo.

    FLUJO DE TOKENIZACIÓN

    1

    Tu app

    Renderiza Elements

    2

    Iframe seguro

    Captura datos PAN

    3

    Akua Vault

    Tokeniza PCI L1

    4

    Tu backend

    Recibe token

    Developer Experience

    Control total sobre errores de validación

    Elements valida en tiempo real y muestra mensajes de error localizados. Puedes usar los defaults, personalizarlos o reemplazarlos completamente con tu propio UI.

    Mensajes built-in

    Validación incluida para formato de tarjeta, expiración y CVV. Los mensajes se localizan automáticamente según el locale configurado.

    100% customizable

    Pasá tu propio objeto de mensajes para reemplazar cualquier texto. Soporta interpolación de variables y pluralización.

    Respeta tu tema

    Los estados de error heredan los colores, tipografía y border-radius de tu tema. Sin CSS overrides manuales.

    validation.ts
    FUNCIONALIDADES

    Componentes que se adaptan a tu marca

    Componentes modulares

    Card inputs, selectores de método, botones de pago. Usa solo lo que necesitas, donde lo necesitas.

    100% white-label

    Colores, tipografía, border-radius y logo. Cada componente adopta tu marca.

    Drop-in integration

    Una línea de código para integrar cualquier componente. SDK disponible para React, Vue, Angular y vanilla JS.

    PCI DSS Level 1

    Los inputs de tarjeta se renderizan en iframes seguros. Tu app nunca toca datos sensibles de tarjeta.

    Preview en tiempo real

    Visualiza cómo se ven los componentes con tu tema antes de publicar.

    Eventos y callbacks

    Hooks para cada evento: onChange, onSubmit, onError, onSuccess. Control total del flujo de pago.

    Quick Start

    De npm install a primera transacción

    En menos de 2 horas puedes tener tu primer pago en producción. Sin procesos de certificación, sin dependencias externas, sin esperas.

    1
    2 min

    Instalar SDK

    npm install y configurar API key.

    2
    10 min

    Renderizar componente

    Importar CardInput, aplicar tu tema.

    3
    15 min

    Tokenizar y cobrar

    Conectar onTokenize con tu backend.

    4
    5 min

    Transacción de prueba

    Sandbox con tarjetas de test.

    5
    ~1 hora

    Producción

    Cambiar API key y activar merchant.

    Tiempo total estimado: ~2 horas: Desde npm install hasta cobro real en producción

    Tu marca, nuestro procesamiento

    Integra Elements y ofrece una experiencia de pago 100% white-label en minutos.