> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alignet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalización y pruebas

> Define la apariencia del Modal, valida el flujo y prepara producción.

## Diseños disponibles

El equipo de Integraciones registra el logo y los colores del formulario. El comercio puede elegir uno de los tres diseños publicados.

<Frame caption="Diseños oficiales disponibles para el formulario Modal">
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '16px' }}>
    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-diseno-1.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=fc408b80aa030a69145ff2bb79181ea4" alt="Diseño 1 del formulario Modal" width="313" height="437" data-path="images/vpos2-modal-diseno-1.png" />

    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-diseno-2.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=7eadcbea6494604e0f96646d5448cce7" alt="Diseño 2 del formulario Modal" width="299" height="438" data-path="images/vpos2-modal-diseno-2.png" />

    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-diseno-3.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=0e18cca9beea1b08e306dfe1719f85b4" alt="Diseño 3 del formulario Modal" width="323" height="442" data-path="images/vpos2-modal-diseno-3.png" />
  </div>
</Frame>

| Diseño | Tamaño del logo |
| ------ | --------------- |
| 1      | 90 × 40 px      |
| 2      | 50 × 50 px      |
| 3      | 75 × 75 px      |

El logo debe entregarse en PNG y los colores en hexadecimal. Se pueden definir el fondo, selector de opciones, botón principal, estado seleccionado y color de los vínculos.

<Frame caption="Ejemplos de color de fondo">
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '16px' }}>
    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-fondo-1.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=56491facaece958490ce936fc1b2a55a" alt="Ejemplo de fondo del diseño 1" width="214" height="193" data-path="images/vpos2-modal-fondo-1.png" />

    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-fondo-2.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=618c9d71d27ce8dee045a19697aa3def" alt="Ejemplo de fondo del diseño 2" width="226" height="193" data-path="images/vpos2-modal-fondo-2.png" />

    <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-fondo-3.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=2654e4b42d60e101b4e8d2b4c8caeb32" alt="Ejemplo de fondo del diseño 3" width="228" height="193" data-path="images/vpos2-modal-fondo-3.png" />
  </div>
</Frame>

<Frame caption="Elementos personalizables del formulario">
  <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-selector.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=bb7e87476761bb307277b05ca898799a" alt="Color del selector de opciones" width="320" height="79" data-path="images/vpos2-modal-selector.png" />

  <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-boton.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=b8504c6c62c57d92e19e46a7e68d6070" alt="Color del botón Pagar" width="347" height="59" data-path="images/vpos2-modal-boton.png" />

  <img src="https://mintcdn.com/alignet-dev/uApn6o2aNXT7SrUk/images/vpos2-modal-vinculo.png?fit=max&auto=format&n=uApn6o2aNXT7SrUk&q=85&s=bdc8a318d1e8ffffe312f1479a7df361" alt="Color de los vínculos" width="288" height="42" data-path="images/vpos2-modal-vinculo.png" />
</Frame>

## Pruebas mínimas

* [ ] El Modal abre desde una acción directa del usuario en escritorio y móvil.
* [ ] Se probaron Safari, Chrome y Firefox.
* [ ] Monto, moneda y número de operación llegan correctamente.
* [ ] Se validan las firmas de solicitud y respuesta.
* [ ] El pedido se actualiza una sola vez ante reintentos o recargas.
* [ ] Se validaron operaciones autorizadas, denegadas y rechazadas.
* [ ] Los mensajes técnicos no se muestran al comprador.
* [ ] El equipo de Integraciones recibió los resultados.

## Paso a producción

Después de la conformidad, solicita credenciales y llaves de producción. Cambia el JavaScript y las URLs del ambiente de forma controlada, conserva la validación de firma y realiza una prueba final de importe bajo.

<Warning>
  No reutilices credenciales, llaves ni URLs de integración en producción.
</Warning>