Customization of the threeds.css file - Cascading Style Sheets (CSS)

The modal displayed in the 3DS 2.0 authentication challenge is customizable. To customize it, you can replace the threeds.css file with another, as long as the new file follows the code structure provided below. Ensure to preserve the same class names and style logic to ensure the proper functioning of the modal.

Presentation of the Modal

In 3DS 2.0 authentication, the dimensions of the challenge are standardized through an integer provided in the challengeWindowSize field. It is through this parameter that the size of the content in the challenge is replicated. This field is a parameter in the esitefDoPayment function call in the Carat JavaScript. If no value is provided, a default value will be automatically configured based on the buyer's screen size. The following are the possible values for use:

value	dimensions
`1`	250 x 400
`2`	390 x 400
`3`	500 x 600
`4`	600 x 400

File threeds.css#

Default Modal

.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;
}

Property	Value	Description
`display`	block	Sets the modal to be displayed as a block.
`position`	fixed	Defines the fixed position of the modal on the screen.
`top`	50%	Centers the modal on the screen.
`left`	50%	Positions the modal in the center of the screen.
`transform`	translate(-50%, -50%) translateY(-100%)	Moves the modal upwards (off the screen) using transformations.
`background-color`	#fff	Sets the background color of the modal to white.
`border`	1px solid #ccc	Adds a 1-pixel solid border with a light gray color.
`box-shadow`	0 4px 8px rgba(0, 0, 0, 0.1)	Adds a shadow around the modal to give a sense of elevation.
`z-index`	1000	Defines the stacking order of the modal (how far above it is in relation to other elements).
`border-radius`	10px	Adds rounded corners to the modal.
`opacity`	0	Initially, the modal is transparent.
`transition`	transform 0.3s ease-out, opacity 0.6s ease	Adds a smooth transition for transformations and opacity.

Modal opening

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

Property	Value	Description
`transform`	translate(-50%, -50%) translateY(0)	Moves the modal to the center position of the screen.
`opacity`	1	Makes the modal completely opaque when opened.

Overlay (initially transparent)

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

Property	Value	Description
`display`	block	Makes the overlay visible.
`position`	fixed	Defines the fixed position of the overlay.
`top`	0	Overlay on top of the screen.
`left`	0	Overlay on the left side of the screen.
`width`	100%	Sets the width of the overlay to cover the entire screen.
`height`	100%	Sets the height of the overlay to cover the entire screen.
`background-color`	rgba(0, 0, 0, 0)	Initially, the overlay is transparent.
`z-index`	999	Defines the stacking order of the overlay.

Adding to the overlay when the modal is open

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

Property	Value	Description
`background-color`	rgba(0, 0, 0, 0.3)	Makes the overlay semi-transparent when the modal is open.

Home

File threeds.css#