Todas las opciones son opcionales. Los valores siguientes son los predeterminados que aplica el cliente cuando omites alguno.
const entase = new Entase({
pk: null,
locale: 'auto',
checkoutMode: 'auto',
collectConsent: true,
backdrop: true,
backdropColor: '#000000',
tprm: {},
pane: { width: 800, height: '100%' },
popup: { width: 800, height: 1000 }
});Opciones
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
pk | cadena | null | Tu clave publicable. El cliente la envía al comprobar si tu dominio tiene permitido usar el checkout integrado. Sin ella, todos los checkouts se abren como ventanas emergentes. |
locale | cadena | 'auto' | Idioma del checkout. 'auto' lee el atributo lang de tu elemento <html>. |
checkoutMode | cadena | 'auto' | 'auto', 'pane' o 'popup'. Consulta Modos de checkout. Un valor no reconocido recurre a 'auto'. |
collectConsent | booleano | true | Si el checkout solicita al visitante que acepte el aviso de condiciones. Una vez aceptada, la respuesta se recuerda en una cookie y se omite el paso. |
backdrop | booleano | true | Si se atenúa la página detrás del checkout. false también desactiva el bloqueo de desplazamiento de la página. |
backdropColor | cadena | '#000000' | Color del área atenuada, como valor de color CSS. |
tprm | objeto | {} | Parámetros de seguimiento añadidos a la URL del checkout como parámetros de consulta. Consulta Seguimiento y consentimiento. |
pane | objeto | { width: 800, height: '100%' } | Tamaño del panel integrado. Se ignora en el modo de ventana emergente. |
popup | objeto | { width: 800, height: 1000 } | Tamaño de la ventana emergente, en píxeles. Se ignora en el modo de panel. |
Tamaño del panel y de la ventana emergente
pane.width acepta un número (píxeles) o cualquier longitud CSS – '720px', '50%', '40vw' o una expresión calc(). Un número sin unidad se interpreta como píxeles.
El ancho del panel se limita a este valor en ordenadores y ocupa todo el ancho en dispositivos móviles, donde se aplica pane.height en su lugar. El cambio entre ambos ocurre cuando el viewport es más estrecho que el ancho configurado; cuando el ancho se indica como una unidad relativa, el cambio ocurre a 800 px.
popup.width y popup.height solo aceptan números de píxeles, y la ventana se centra en la pantalla del visitante. Si la pantalla no es lo bastante alta para la altura solicitada, la ventana se reduce para ajustarse.
Fondo
El fondo se atenúa más detrás de una ventana emergente que detrás de un panel, porque una ventana emergente necesita que la página subyacente parezca inactiva. Establece backdrop: false para eliminar por completo la atenuación – esto también permite desplazarse por la página detrás del checkout.
backdropColor se aplica tal cual, por lo que puede ser cualquier color CSS válido. Úsalo para combinarlo con un sitio oscuro o de marca en lugar de ocultar el fondo; para ello, backdrop: false es la opción correcta.
Anulaciones por reserva
checkoutMode, collectConsent, backdrop, backdropColor, pane y popup se pueden anular para una sola reserva pasándolos a book(). El valor del nivel de instancia no cambia para las llamadas posteriores:
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
// Esta reserva se abre más ancha, sin atenuación.
entase.book('EVENT_ID', {
pane: { width: '60vw' },
backdrop: false
});pk y tprm no son opciones por reserva – pk identifica la cuenta de toda la página y los parámetros de seguimiento se cambian con setTracking() cuando deben ser diferentes.