Personalización de la experiencia de pago

En esta guía expondremos cómo personalizar la experiencia de pago para que se adapte más a la imagen de tu negocio. Trataremos las distintas formas de personalización, con sus ventajas y desventajas, así como las opciones de personalización según la integración que tengas.

Integración vía Hosted

El formulario de pago al que se redirige al cliente cuando has realizado una integración vía Hosted es alojado por Addon Payments. Puedes modificar la funcionalidad y el aspecto de este formulario, ya sea en la configuración de tu comercio o con ciertos parámetros enviados en la petición de pago.

Personalizar la funcionalidad del cajero

Puedes personalizar el tipo de cajero que ve el cliente al ser redirigido. Puedes mostrar cajeros con todas las soluciones de pago que tengas disponibles o limitarlo a una única. A continuación, veremos los distintos tipos de formulario disponibles:

Si vas a cargar varias soluciones de pago, debes tener en cuenta distintos parámetros y particularidades para que funcionen. Consulta las guías específicas para más información.

Cajero completo

Para llamar a este cajero NO envíes el parámetro «paymentSolution» en la petición. En este modo el cajero muestra todas la secciones:

Detalles del pedido: Se muestra al cliente los detalles del pedido, como el importe, la descripción del pedido, etc.
Selector de solución de pago: El cliente puede seleccionar la solución de pago con la que quiere finalizar el pago. La solución de pago debe estar activada en el producto del comercio para que sea seleccionable.
Formulario de la solución de pago: Se muestran los campos de información necesaria para la solución de pago. El cliente tiene que rellenar los campos para realizar el pago. En casos donde la solución de pago lo requiere, se muestra un botón de redirección (Bizum, Paypal, etc.).

Cajero limitado a una única solución de pago

De este modo el cajero no muestra el selector de soluciones de pago. Sólo muestra una solución de pago de las activadas en el producto, limitando la selección del cliente a esa solución.

El modo se activa enviando el parámetro opcional “paymentSolution” junto al valor de la solución de pago a la cual queremos limitar la operativa: creditcards, bizum, paypal, quix, etc. Por tanto, su comportamiento puede variar en cada petición, incluyendo o no el parámetro y/o modificando el valor enviado.

Por ejemplo, si se añade el parámetro: «paymentSolution»: «bizum» el cliente sólo tendrá la opción de bizum en el cajero.

Cajero "sólo formulario"

En este modo el cajero únicamente muestra el formulario de la solución de pago que se haya enviado como valor en el parámetro “paymentSolution” de la petición.

No se muestran detalles del pedido al cliente.
No se muestra el selector de soluciones de pago, por lo que el parámetro “paymentSolution” pasa a ser obligatorio. Esto se debe a que el cajero necesita saber qué solución de pago debe mostrar, ya que el cliente no puede elegir.

Para usar este modo se debe solicitar su activación a Soporte, por lo que el cambio se aplicará a todas las peticiones de pago.

Personalización de la pasarela

AP permite personalizar el aspecto de la pasarela de pago mediante dos (2) métodos. A continuación, te dejamos una tabla comparativa con las ventajas y desventajas de ambos métodos.

Método	Descripción	Ventajas	Desventajas
Parámetros en la petición	Consiste en el envío de determinados parámetros en las peticiones que modifican el aspecto de la pasarela de pago.	Es inmediato	Menor nivel de personalización.
		Puede personalizarse de forma distinta para cada petición.
		Menor nivel técnico. No requiere conocimientos de CSS.
Hoja de estilos CSS personalizada	Consiste en la confección de una hoja de estilos CSS personalizada que modifica el aspecto de la pasarela de pago. Deberás alojar esa hoja de estilos en tu página web y añadir el parámetro «cssURL» con la URL donde está alojada en las peticiones para utilizar esos estilos.	Mayor nivel de personalización	Mayor nivel técnico. Requiere conocimientos de CSS.

Personalización por parámetros

Estos datos se envían cuando generas la petición y te permiten personalizar la pasarela de pago. Puedes personalizar los siguientes elementos:

Logotipo superior de la pasarela de pago.
Logotipo inferior de la pasarela de pago.
Título de la pasarela de pago.
Subtítulo de la pasarela de pago.
Fuente, tamaño y color del texto en la pasarela de pago.
Color del fondo de la pasarela de pago.

Los parámetros para personalizar la pasarela, junto a su función, son los siguientes:

Parámetro	Descripción	Tamaño, formato y valores admitidos
topLogo	URL con el logotipo de tu comercio que se muestra en la parte superior de la pasarela de pago.	Tamaño recomendado: 500px de ancho por 100px de alto. Alfanumérico, máximo 250 caracteres.
bottomLogo	URL con el logotipo de tu comercio para sustituir el que se muestra en la parte inferior de la pasarela de pago.	Tamaño recomendado: 400px de ancho por 80px de alto.
checkoutTitle	Título de la pasarela de pago. Está vacío por defecto. Se recomienda que sea lo más corto posible para no perjudicar a los usuarios móviles.	Alfanumérico
subTitle	Subtítulo de la pasarela de pago. Está vacío por defecto. Se recomienda que sea lo más corto posible para no perjudicar a los usuarios móviles.	Alfanumérico
fontFamily	Fuente del texto en la pasarela de pago. También modifica el título y subtítulo.	Cualquier familia de fuente, aunque si el cliente no la tiene instalada, se mostrará con la de por defecto.
fontSize	Tamaño del texto en la pasarela de pago. Tamaño por defecto: 12	Numérico
fontColour	Color del texto en la pasarela de pago.	Código RGB hexadecimal (#RRGGBB).
backgroundColor	Personaliza el color del fondo de la pasarela de pago.	Código RGB hexadecimal (#RRGGBB).

Personalización por CSS

En AP puedes aplicar un mayor nivel de personalización con el uso de hojas de estilo en cascada (CSS).

Mediante un archivo de CSS personalizado podrás modificar parámetros de la visualización de la pasarela de pago:

Color de los logotipos superior e inferior.
Fuente, color y tamaño de la fuente del título y del subtítulo. Se recomienda personalizar sólo el color.
Color del borde superior del cajero.
Color del fondo (azul claro) y de los botones (círculos azul oscuro) del selector de soluciones de pago.
Color del botón de pago.

Para aplicar una personalización por CSS sigue estos pasos:

Lanza una petición en tu plataforma de comercio electrónico para llegar hasta el cajero de la pasarela de pagos.
Abre la herramienta de edición de estilos en tu navegador y localiza las clases que afectan a los elementos que quieres personalizar.
Haz pruebas sobre el navegador modificando los valores de las clases hasta obtener el resultado esperado y apunta la clase con el valor:
- Más adelante tienes un archivo de ejemplo. Puedes usarlo para verificar que las clases sean las correctas y apuntar el valor deseado.
- No es necesario que modifiques ni apuntes todas las clases del archivo de ejemplo, puedes dejar sólo las que quieras personalizar y borrar las que no.
Guarda las claves y los valores en un archivo en formato CSS.
Aloja el archivo CSS en tu página web.
Envía una petición e indica la URL donde lo tienes alojado en el campo «cssURL».

Este es un ejemplo de CSS que modifica algunos de los elementos anteriores al color rojo:

				
					#checkoutTitle {
color: red;
}
#checkoutSubtitle {
color: orange;
}
.sectionSeparator {
border-top: 2px solid red;
}
.paysol-item-image {
background-color: red;
}
.paysolScrollBGColours {
background-color: lightgrey;
}
.payButton {
background-color: red;
}
.payButton:hover {
background-color: darkred;
}
#regLink {
background-color: lightgrey;
color: black;
}
#regLink:hover {
background-color:grey;
}