3. Personaliza el checkout

:root {
  --flex-responsive-scale: 1;
  --flex-natural-width: 415px;
  --flex-natural-height: 656px;
}

.flex-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 15px 20px;
  overflow: hidden;
  background: rgb(0 18 37 / 48%);
}

.flex-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-modal__content {
  width: var(--flex-natural-width);
  height: var(--flex-natural-height);
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 30px);
  max-height: calc(100dvh - 30px);
  transform: scale(var(--flex-responsive-scale));
  transform-origin: center;
}

#flex-container {
  width: 100%;
  height: 100%;
}

const FLEX_RESPONSIVE_LAYOUT = {
  naturalWidth: 415,
  naturalHeight: 656,
  viewportPaddingHorizontal: 40, // 20 px a cada lado
  viewportPaddingVertical: 30,   // 15 px arriba y abajo
  minimumScale: 0.25
};

function calculateResponsiveScale() {
  const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
  const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
  const availableWidth =
    viewportWidth - FLEX_RESPONSIVE_LAYOUT.viewportPaddingHorizontal;
  const availableHeight =
    viewportHeight - FLEX_RESPONSIVE_LAYOUT.viewportPaddingVertical;

  return Math.max(
    FLEX_RESPONSIVE_LAYOUT.minimumScale,
    Math.min(
      1,
      availableWidth / FLEX_RESPONSIVE_LAYOUT.naturalWidth,
      availableHeight / FLEX_RESPONSIVE_LAYOUT.naturalHeight
    )
  );
}

function updateResponsiveScale() {
  const responsiveScale = calculateResponsiveScale();
  document.documentElement.style.setProperty(
    "--flex-responsive-scale",
    String(responsiveScale)
  );
}

// Aplica la escala inicial y la recalcula cuando cambia el viewport.
updateResponsiveScale();
window.addEventListener("resize", updateResponsiveScale);
window.visualViewport?.addEventListener("resize", updateResponsiveScale);

// Muestra el modal.
const paymentModal = document.querySelector("#payment-modal");
paymentModal.classList.add("is-open");
paymentModal.setAttribute("aria-hidden", "false");

// Inicializa Flex.
paymentForm.init(
  document.querySelector("#flex-container"),
  responseCallback,
  trackingCallback,
  onErrorCallback
);

function unmountFlex() {
  window.removeEventListener("resize", updateResponsiveScale);
  window.visualViewport?.removeEventListener("resize", updateResponsiveScale);

  paymentForm.terminate?.();

  const flexContainer = document.querySelector("#flex-container");
  flexContainer.innerHTML = "";
}