Personalización del archivo threeds.css - Hojas de estilo en cascada (CSS)

El modal mostrado en el desafío de autenticación 3DS 2.0 es personalizable. Para personalizarlo, puedes reemplazar el archivo threeds.css por otro, siempre y cuando el nuevo archivo siga la estructura de código proporcionada a continuación. Asegúrate de conservar los mismos nombres de clase y la lógica de estilo para garantizar el correcto funcionamiento del modal.

Presentación del Modal

En la autenticación 3DS 2.0, las dimensiones del desafío se estandarizan mediante un número entero proporcionado en el campo challengeWindowSize. Es a través de este parámetro que se replica el tamaño del contenido en el desafío. Este campo es un parámetro en la llamada a la función esitefDoPayment en el JavaScript de Carat. Si no se proporciona ningún valor, se configurará automáticamente un valor predeterminado basado en el tamaño de la pantalla del comprador. A continuación se presentan los posibles valores para su uso:

valor	dimensiones
`1`	250 x 400
`2`	390 x 400
`3`	500 x 600
`4`	600 x 400

Archivo threeds.css#

Modal estándar

.modal-challenge {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-100%);
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 10px;
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.6s ease;
}

Propiedad	Valor	Descripción
`display`	block	Define el modal para ser mostrado como un bloque.
`position`	fixed	Define la posición fija del modal en la pantalla.
`top`	50%	Coloca el modal en el centro de la pantalla.
`left`	50%	Coloca el modal en el centro de la pantalla.
`transform`	translate(-50%, -50%) translateY(-100%)	Mueve el modal hacia arriba (fuera de la pantalla) usando transformaciones.
`background-color`	#fff	Establece el color de fondo del modal como blanco.
`border`	1px solid #ccc	Añade un borde sólido de 1 píxel con color gris claro.
`box-shadow`	0 4px 8px rgba(0, 0, 0, 0.1)	Añade una sombra alrededor del modal para dar una sensación de elevación.
`z-index`	1000	Define el orden de apilamiento del modal (cuán arriba está en relación con otros elementos).
`border-radius`	10px	Añade esquinas redondeadas al modal.
`opacity`	0	Inicialmente, el modal es transparente.
`transition`	transform 0.3s ease-out, opacity 0.6s ease	Añade una transición suave para transformaciones y opacidad.

Apertura del modal

.modal-challenge.open {
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}

Propiedad	Valor	Descripción
`transform`	translate(-50%, -50%) translateY(0)	Mueve el modal a la posición central de la pantalla.
`opacity`	1	Hace que el modal sea completamente opaco cuando está abierto.

Superposición (inicialmente transparente)

.overlay-challenge {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999;
}

Propiedad	Valor	Descripción
`display`	block	Hace que la superposición sea visible.
`position`	fixed	Establece la posición fija de la superposición.
`top`	0	Superposición en la parte superior de la pantalla.
`left`	0	Superposición a la izquierda de la pantalla.
`width`	100%	Establece el ancho de la superposición para cubrir toda la pantalla.
`height`	100%	Establece la altura de la superposición para cubrir toda la pantalla.
`background-color`	rgba(0, 0, 0, 0)	Inicialmente, la superposición es transparente.
`z-index`	999	Define el orden de apilamiento de la superposición.

Añadiendo a la superposición cuando el modal está abierto

.overlay-challenge.open {
  background-color: rgba(0, 0, 0, 0.3);
}

Propiedad	Valor	Descripción
`background-color`	rgba(0, 0, 0, 0.3)	Hace que la superposición sea semi-transparente cuando el modal está abierto.

Home

Archivo threeds.css#