Personalizar el checkout

La sección Personalizar Checkout le permite configurar la apariencia visual, el branding y el comportamiento de los métodos de pago de la Página de Checkout alojada por el Gateway. Ayuda a simular una experiencia de checkout con white-label y le da control total sobre cómo se presenta su marca durante el flujo de pago.

Puede acceder a esta función en: Ajustes → Personalizar Checkout

Propósito de Personalizar Checkout

Esta herramienta está diseñada para:

• Previsualizar cómo aparecerá la Página de Checkout alojada a los usuarios finales.

• Aplicar sus propios estilos de branding: colores, fuentes, iconos y logotipos.

• Configurar cómo se agrupan, priorizan y destacan los métodos de pago.

• Previsualizar la experiencia en dispositivos de escritorio y móviles.

• Configurar estos ajustes por cada tienda individual.

En modo sandbox, estos ajustes no afectan a las transacciones en vivo, pero le ayudan a entender cómo se puede configurar la experiencia de pago en producción.

Qué puede configurar

Elementos visuales de branding

En el panel de personalización de la izquierda, puede configurar lo siguiente:

• Elegir icono

  Seleccione entre iconos predefinidos para representar su marca/tienda durante el checkout.

• Cargar logotipo

  Cargue su propio logotipo para personalizar el encabezado del checkout.

• Fuente

  Elija entre las fuentes disponibles (p. ej., Roboto) para que coincida con el estilo de su tienda.

• Color primario

  Seleccione el color principal de su marca. Esto se aplicará a los botones y a los elementos de énfasis.

• Color secundario

  Elija un color secundario/de apoyo para complementar el color primario.

• Paleta de colores

  Personalice la paleta de colores completa para que coincida con sus directrices de branding.

• Radio y estilo de los botones

  Elija entre:

  • Redondeado

  • Rectangular

  • Botones estilo píldora

• Marcadores de posición para artículos de la cesta

  Seleccione cómo aparecen los marcadores de posición de producto (p. ej., miniaturas) en el resumen del checkout.

Métodos de pago y opciones de agrupación

Modos de visualización

Elija cómo se organizan los métodos de pago:

• Sin agrupación

  Todos los métodos se muestran en una sola lista (diseño plano).

• Agrupar por tipo

  Los métodos se separan en Pagos y Wallets (p. ej., Banco frente a Google Pay).

• Destacar el primer método de pago

  El primer método está preseleccionado (ideal para opciones promocionadas como Click to Pay).

• Destacar los métodos usados previamente por el usuario

  Resalta automáticamente el último método utilizado en función de las cookies del navegador.

Ordenación manual

• Arrastre y suelte los métodos de pago usando el icono de agarre (⋮⋮).

• El orden se actualiza en tiempo real en la ventana de vista previa.

• Puede deshabilitar temporalmente cualquier método usando el símbolo menos (–).

Panel de vista previa en tiempo real En el lado derecho de la pantalla, verá una vista previa en vivo de cómo se verá la Página de Checkout alojada.

• Cambiar entre:

  • Vista de escritorio

  • Vista móvil

• La vista previa refleja:

  • Actualizaciones de branding

  • Orden de los métodos de pago

  • Estilo de los botones y ajustes de color

Ámbito de la tienda

Puede aplicar los ajustes de branding y diseño a:

• Una tienda específica (seleccionada mediante el menú desplegable), o

• Todas las tiendas de prueba a nivel global (aplicar el mismo estilo en toda su configuración de pruebas)

Guardar cambios

Después de realizar sus cambios, haga clic en “Guardar cambios” en la parte inferior para aplicar sus ajustes.

Estas configuraciones se mantendrán durante su sesión de sandbox y le permitirán simular diferentes estrategias de branding y UX de checkout.

Limitaciones del sandbox

• En modo Sandbox, estos ajustes son solo para fines de demostración.

• Todas las vistas previas de checkout utilizan flujos de pago de prueba y datos ficticios.

• Los cambios de branding no afectan al procesamiento de pagos en vivo ni a la configuración del comercio en vivo.

• Sandbox siempre muestra las transacciones en EUR, independientemente de otros ajustes de moneda.