Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.pay-me.com/llms.txt

Use this file to discover all available pages before exploring further.

Pay-me Flex incorpora mejoras visuales y de experiencia para que el checkout sea más claro, moderno y fácil de usar para el comprador.
Estas mejoras aplican sobre la experiencia visual del componente Flex. La disponibilidad final puede depender de la versión de librería usada y de la configuración habilitada para el comercio.
Mejoras en la visualización de Pay-me Flex

​
Dónde se configuran

Estas mejoras se ven según la versión del componente y la configuración enviada al inicializar Flex. Si tu comercio ya tiene Flex activo, revisa esta tabla para saber qué debes añadir o validar en tu integración.
MejoraQué debes revisarParámetro o guía
Logo configurableEl comercio debe compartir la URL pública del logo que desea mostrar en la parte superior izquierda del checkout.Configuración habilitada por el equipo de integraciones
MultidiomaAñade la configuración de idiomas si quieres mostrar el selector ES / EN.i18n.mode, i18n.default_language, i18n.languages
Botón de cerrarActiva el botón si necesitas que el comprador pueda salir del checkout desde la interfaz.settings.show_close_button
Tarjeta más visualValida que el método CARD esté habilitado y que el payload envíe los datos de comprador requeridos.display_settings.methods y Construcción del payload
Bordes y estilosDefine si el contenedor se muestra con borde visual o si tu layout externo ya lo maneja.settings.show_border
Yape UXAsegura que YAPE esté disponible para el comercio y, si limitas métodos, inclúyelo en la lista visible.display_settings.methods y Datos de prueba
Número de operaciónActiva la visualización del número de operación cuando necesites trazabilidad para soporte.settings.show_operation_number
Si no envías display_settings.methods, Flex mostrará los métodos habilitados para tu comercio por defecto. Si sí envías la lista, debes incluir explícitamente los métodos que quieres mostrar, por ejemplo CARD o YAPE.
El logo configurable no se envía dentro del objeto de inicialización. Para habilitarlo, el comercio debe compartir con el equipo de integraciones una URL pública HTTPS del logo que se mostrará en el checkout.

​
Mejoras en la visualización

Logo configurable

Personalización del logo superior izquierdo del checkout. El comercio debe enviar la URL del logo al equipo de integraciones para configurarlo.

Multidioma

Selector de idioma ES / EN para ofrecer una experiencia más clara según el idioma del usuario.

Botón de cerrar

Nuevo botón de cierre visible para salir del checkout de forma rápida, clara y controlada.

Tarjeta más visual

Mejora en la visualización de tarjeta, mostrando logos de marca, nombre del tarjetahabiente y fecha de vencimiento.

Bordes y estilos

Bordes redondeados y estilos visuales consistentes para una experiencia más moderna y limpia.

Yape UX

Flujo integrado y mejorado para pagos con Yape, con campos y mensajes más claros para el usuario.

Número de operación

Visualización del número de operación para mejorar trazabilidad y soporte durante el pago.

​
Detalle por mejora

Logo configurable

  • Permite personalizar el logo que aparece en la parte superior izquierda del checkout.
  • El comercio debe compartir la URL pública HTTPS del logo que desea mostrar.
  • La URL debe apuntar directamente al archivo de imagen y estar disponible sin autenticación.
  • La activación se coordina con el equipo de integraciones; no se configura desde settings, display_settings ni i18n.
  • Selector de idioma visible dentro del checkout.
  • Soporte inicial para ES y EN.
  • Ayuda a comercios con compradores que prefieren una experiencia bilingüe.
  • Se configura en Inicializar el componente, dentro del objeto i18n.
  • Botón de cierre más visible en la interfaz.
  • Permite salir del checkout sin ambigüedad.
  • Mejora el control del usuario durante el proceso de pago.
  • Se activa con settings.show_close_button en Inicializar el componente.
  • Tarjeta renderizada de forma más visual.
  • Logos de marca visibles cuando corresponda.
  • Campos principales organizados para facilitar la lectura.
  • Revisa CARD en display_settings.methods y los datos enviados en Construcción del payload.
  • Bordes redondeados en contenedores y campos.
  • Separación visual más clara entre métodos de pago y formulario.
  • Apariencia más limpia y consistente entre flujos.
  • Se controla con settings.show_border en Inicializar el componente.
  • Pantalla de Yape más directa.
  • Campo de celular y código de aprobación mejor diferenciados.
  • Mensajes de ayuda orientados a reducir errores del comprador.
  • Revisa que YAPE esté habilitado en display_settings.methods y usa Datos de prueba para validar el flujo.
  • El checkout muestra el número de operación asociado al pago.
  • Facilita trazabilidad para soporte, conciliación y revisión operativa.
  • Ayuda al comercio y al comprador a identificar el intento de pago.
  • Se activa con settings.show_operation_number en Inicializar el componente.

​
Recomendación

Si ya tienes una integración Flex activa, revisa estas mejoras en Pre-Producción antes de habilitarlas en Producción. Valida especialmente logo configurable, idioma, cierre del checkout, Yape y visualización de tarjeta en los navegadores soportados por tu comercio.

​
Guías relacionadas

Inicializar el componente

Configura settings, display_settings.methods e i18n para activar o limitar estas mejoras.

Construcción del payload

Revisa los datos de operación y comprador que Flex usa para renderizar el flujo correctamente.

Capturar callbacks

Procesa respuestas, eventos y errores durante el flujo de pago.

Datos de prueba

Valida tarjeta, Yape y otros métodos en Pre-Producción antes de habilitar Producción.