Páginas de Pago con Marca

Cuando envía un enlace de pago a un huésped, la página a la que llega puede sentirse como una extensión de su marca en lugar de una pantalla genérica de facturación. La marca funciona de dos maneras:

• La página de pago alojada -- su logotipo y colores se aplican a la página que Argonautas sirve en app.argonautas.pro/pay/....
• Su propio sitio web -- si tiene un sitio personalizado, puede obtener los datos del pago a través de una API y renderizar su propia página, con el checkout volviendo a Argonautas.

Ambos modos usan el mismo enlace de pago, así que la elección es por empresa, no por enlace.

Paso 1: Configure los Colores y el Logotipo de su Marca

Los colores y el logotipo se toman de Configuración > Marca. Determinan:

• El color de los botones y acentos en la página de pago alojada.
• El logotipo del encabezado en la página de pago y en los correos de confirmación.
• Los colores usados en el portal del propietario y en cualquier comunicación del portal del huésped.

Actualícelos una vez y el cambio se aplica en todos los lugares donde aparece su marca.

Paso 2: Añada una Hoja de Estilos (Opcional)

Si los colores de marca no son suficientes -- quiere fuentes personalizadas, ajustes de diseño o una identidad visual más elaborada -- puede alojar un archivo CSS en su propio sitio y apuntar Argonautas hacia él.

1. Publique una hoja de estilos en su propio dominio. La ruta común es https://sudominio.com/payment-page.css.
2. Abra Configuración > Marca > Sitio Web Público.
3. Ingrese la URL completa en URL del CSS de la página de pago. La URL debe estar en el mismo dominio que ha establecido como URL del sitio web público -- esto evita estilos accidentales o maliciosos entre dominios.
4. Guarde.

Cuando un huésped abre un enlace de pago, Argonautas añade una clase branded al body de la página e incluye una etiqueta <link> que apunta a su CSS. Puede apuntar a body.branded en su hoja de estilos para acotar sus sobrescrituras:

body.branded {
  font-family: "Su Fuente", sans-serif;
}
body.branded .pay-button {
  background: #sucolor;
}

Si la URL se deja en blanco, no se carga ninguna hoja de estilos extra y la página usa solo los colores de marca y el logotipo.

Paso 3 (Avanzado): Renderizar el Pago en su Propio Sitio

Para empresas que tienen un sitio completo de marketing o membresías, el mismo enlace de pago puede servirse desde su propia URL. Argonautas expone una API JSON en /api/v1/payments/link/<token>/:

• Un GET devuelve el resumen de la reserva, el monto a cobrar, la moneda y el estado actual del pago (listo, exitoso, fallido, expirado).
• Un POST inicia el checkout para ese enlace con la URL de retorno que especifique.

Su sitio obtiene los datos, renderiza una página de pago usando su propio sistema de diseño y envía el POST cuando el huésped está listo para pagar. Desde la perspectiva del huésped, nunca abandona su dominio. La página alojada en app.argonautas.pro sigue disponible como respaldo si desea enviar el mismo enlace allí directamente.

La API JSON aplica una lista permitida de URLs de retorno contra su URL del sitio web público para prevenir abusos de redirección abierta. Coordine esto con sus desarrolladores; nuestro equipo de integración puede proporcionar código de ejemplo.

Preguntas Comunes

¿De dónde toma el logotipo la página de pago? Del mismo logotipo que cargó en Configuración > Marca > Logotipo. No hay un logotipo separado para las páginas de pago.

¿Puedo tener diferentes hojas de estilos para distintas páginas? La URL del CSS es por empresa. Para estilizar otras páginas de manera diferente, acote sus reglas CSS con selectores de clase que solo apliquen a la página de pago (body.branded se añade solo en la página de pago).

Mi URL de CSS está siendo rechazada. ¿Por qué? La URL debe estar en el mismo nombre de host que su URL del sitio web público. Actualice una de las dos para que coincidan.

¿Qué sucede si mi host del CSS se cae? La página de pago aún carga con los colores y el logotipo intactos -- la hoja de estilos se trata como mejora progresiva. El checkout en sí nunca se bloquea por la hoja de estilos.

¿Necesito la API JSON para personalizar la página de pago? No. La página alojada cubre la mayoría de las necesidades. La API JSON solo es necesaria si quiere que el pago aparezca en su propio dominio.

Relacionado

• Usuarios y Permisos -- Quién en su equipo puede cambiar la configuración de marca.
• Configuración del Portal del Propietario -- Otros lugares donde aparece su marca.