Personalizacion del Checkout

Personaliza la apariencia del modal de Checkout.js para que se integre con la identidad visual de tu marca.

Configuracion basica

Usa Taypi.configure() antes de llamar a Taypi.open():

Taypi.publicKey = 'taypi_pk_test_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4';

Taypi.configure({
    theme: 'light',
    colors: {
        primary: '#6366F1',
        background: '#FFFFFF',
    },
});

Temas

Checkout.js incluye dos temas predefinidos:

Tema	Descripcion
`light`	Fondo claro con texto oscuro (por defecto)
`dark`	Fondo oscuro con texto claro

Taypi.configure({
    theme: 'dark',
});

Colores personalizados

Sobreescribe los colores del tema activo con la propiedad colors:

Propiedad	Descripcion	Valor por defecto
`primary`	Color principal: botones, enlaces, barra de progreso	`#6366F1` (indigo)
`background`	Color de fondo del modal	`#FFFFFF` (blanco)
`text`	Color del texto principal	`#1F2937` (gris oscuro)
`border`	Color de los bordes	`#E5E7EB` (gris claro)
`success`	Color del estado de pago exitoso	`#10B981` (verde)
`error`	Color del estado de error	`#EF4444` (rojo)

Ejemplo

Taypi.configure({
    theme: 'light',
    colors: {
        primary: '#FF6B00',     // Naranja de tu marca
        background: '#FFF8F0',  // Fondo calido
        success: '#22C55E',     // Verde personalizado
    },
});

TIP

Solo necesitas especificar los colores que quieras cambiar. Los demas usaran los valores por defecto del tema seleccionado.

Textos personalizados

Personaliza los textos del modal con la propiedad locale:

Taypi.configure({
    locale: {
        title: 'Completar pago',
        subtitle: 'Escanea el codigo QR con tu app favorita',
        instructions: 'Abre Yape, Plin o tu app bancaria y escanea el codigo',
        expiresIn: 'Expira en',
        successTitle: 'Pago exitoso',
        successMessage: 'Tu pago ha sido procesado correctamente',
        expiredTitle: 'QR expirado',
        expiredMessage: 'El tiempo para pagar ha terminado',
        closeButton: 'Cerrar',
    },
});

WARNING

Los textos del checkout siempre deben estar en espanol, ya que TAYPI opera exclusivamente en Peru.

Configura el comportamiento del modal con la propiedad modal:

Taypi.configure({
    modal: {
        closeOnOverlayClick: true,   // Cerrar al hacer click fuera del modal (default: true)
        closeOnEscape: true,         // Cerrar con tecla Escape (default: true)
        showCloseButton: true,       // Mostrar boton de cerrar (default: true)
        preventScroll: true,         // Bloquear scroll del body (default: true)
    },
});

Ejemplo completo

html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Tienda Online</title>
</head>
<body>
    <button id="btn-pagar" style="background: #FF6B00; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px;">
        Pagar S/ 50.00
    </button>

    <script src="https://app.taypi.pe/v1/checkout.js"></script>
    <script>
        Taypi.publicKey = 'taypi_pk_test_a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4';

        // Personalizar el checkout
        Taypi.configure({
            theme: 'light',
            colors: {
                primary: '#FF6B00',
                background: '#FFFFFF',
            },
            locale: {
                title: 'Pagar pedido',
                subtitle: 'Escanea con Yape o Plin',
                successTitle: 'Listo!',
                successMessage: 'Tu pedido esta confirmado',
            },
            modal: {
                closeOnOverlayClick: false,
                closeOnEscape: true,
            },
        });

        document.getElementById('btn-pagar').addEventListener('click', async () => {
            const res = await fetch('/api/crear-pago', { method: 'POST' });
            const { checkout_token } = await res.json();

            Taypi.open({
                sessionToken: checkout_token,
                onSuccess: (result) => {
                    window.location.href = '/pedido-confirmado?id=' + result.payment_id;
                },
                onExpired: () => {
                    alert('El QR expiro. Intenta de nuevo.');
                },
                onError: (error) => {
                    console.error('Error:', error.message);
                },
            });
        });
    </script>
</body>
</html>

Restablecer configuracion

Para volver a los valores por defecto, llama a Taypi.configure() sin argumentos:

Taypi.configure();

Restricciones

Los colores deben estar en formato hexadecimal (#RRGGBB). No se aceptan nombres de color (red) ni rgb().
El logo de TAYPI siempre aparece en la parte inferior del modal. No se puede ocultar.
El tamano del codigo QR se ajusta automaticamente. No se puede modificar manualmente.

Personalizacion del Checkout ​

Configuracion basica ​

Temas ​

Colores personalizados ​

Ejemplo ​

Textos personalizados ​

Comportamiento del modal ​

Ejemplo completo ​

Restablecer configuracion ​

Restricciones ​