Ventrata ofrece una solución de checkout optimizada que permite a los clientes
añadir productos seleccionados a un carrito de compras virtual y avanzar a través de una serie de pasos para completar la compra.
La solución de checkout de Ventrata soporta dos modos:
Pop-up - se abre en una ventana modal sobre su sitio
Embedded (Integrado) - muestra el checkout directamente en la página
Pop-up | Embedded (Integrado) |
| 
|
Estructura de Configuración
El checkout de Ventrata cuenta con un flujo de personalización sofisticado. Tiene una configuración global (a nivel de apiKey) almacenada en la nube, que sirve como plantilla para todos los checkouts futuros. Esta plantilla incluye configuraciones como colores, configuración de Google Analytics y más, permitiendo una integración sencilla sin ajustes adicionales. Puedes gestionar estas configuraciones a través del panel de Ventrata o mediante solicitudes de soporte específicas del cliente.
La estructura de configuración sigue una jerarquía por capas, donde las configuraciones pueden ser anuladas por configuraciones más específicas. El orden es el siguiente:
Cloud > Script Tag > Specific Page Element (for example, button, anchor)
Capa | Descripción |
| el apiKey - plantilla de configuración a nivel de apiKey para todos los checkouts futuros |
| La etiqueta |
| Elementos individuales de la página, como botones o anclas, pueden activar el checkout como un pop-up y cargar configuraciones como idioma, moneda y opciones; estos ajustes se especifican en el atributo
📗 CONSEJO
|
📘 EJEMPLO
Imagina que la configuración en la nube especifica un color de botón de #AE8173. Si una página contiene la etiqueta <script> con un color de botón de #820857, los pop-ups de checkout en esa página adoptarán el color #820857 en lugar del valor predeterminado de la nube.
Ahora, supongamos que hay tres botones pop-up en esta página, todos configurados con #820857. Si quieres personalizar solo el tercer botón con un color único, como #6FD316, puedes especificar este color en el atributo data-config para ese botón.
En consecuencia:
Los dos primeros botones mantendrán el color
#820857de la etiqueta<script>.El tercer botón mostrará
#6FD316.Si eliminas la configuración de color de la etiqueta
<script>, los dos primeros botones volverán al color de la nube#AE8173, mientras que el tercer botón permanece sin cambios.
Integrar el checkout de Ventrata
A continuación se presentan los pasos básicos para integrar el checkout de Ventrata, que, por defecto, funciona en modo pop-up. Aunque la mayoría de las configuraciones se aplican tanto al modo pop-up como al modo integrado, si eliges implementar el modo integrado, sigue los pasos sobre cómo integrar el checkout en modo integrado.
Localiza la apiKey
📒 NOTA
Cada capa del flujo de configuración es opcional con la excepción de la apiKey. Se requiere una apiKey en al menos un elemento de la página.
En tu panel de Ventrata, ve a Web Checkouts > Checkouts.
Checkouts
Selecciona uno de tus checkouts existentes.
Tu apiKey se encuentra en la pestaña Checkout Details (Detalles del checkout) de tu checkout seleccionado.
Clave API
Agregar etiqueta <script>
Para integrar el checkout de Ventrata, añade la siguiente etiqueta <script> a las páginas HTML de tu sitio web.
Producción
El script cargará la configuración para tu cuenta específica con la pasarela de producción, por lo que todos los pagos y pedidos se registrarán como si fueran realizados por clientes.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live" }'></script>
Prueba
El script cargará la configuración para tu cuenta específica en un entorno de prueba.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script>Atributo | Descripción |
| reemplaza |
|
📗 CONSEJO Si el atributo "env" no está especificado en la etiqueta
|
Qué es un atributo data-config
El atributo data-config en la etiqueta <script> o en un elemento (como un botón) se utiliza para pasar configuraciones al script de checkout de Ventrata. Ayuda a definir cómo se comporta el checkout, qué clave API (es decir, qué checkout) debe usar y en qué entorno debe operar.
Desglose de atributo data-config
Desglose de atributo data-config
Aquí hay un ejemplo de script de checkout:
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script>
<button ventrata-checkout data-config='{"productID": "<SPECIFIC_PRODUCT_ID"}'>
Click on me
</button>
El atributo script (
ventrata-checkout.min.js) carga la funcionalidad de checkout de Ventrata.El atributo
data-configproporciona la configuración necesaria.El botón (
<button ventrata-checkout>) actúa como un disparador para el flujo de checkout.
📒 NOTA
El elemento (un botón en el ejemplo anterior), que activa o muestra el pago, tiene su propio data-config. Usa este data-config para definir qué productos se mostrarán en el checkout widget. Si no hay IDs de productos, se mostrará la lista completa de productos del checkout.
Cuando un usuario hace clic en el botón,
el script de checkout de Ventrata lee el
data-config.Utiliza la clave API para obtener los productos disponibles.
Inicia el proceso de pago dentro del entorno especificado (
testen este caso).
Filtrar productos
El volumen y la complejidad de los productos pueden afectar significativamente el rendimiento del proceso de pago. Puede que desee usar parámetros específicos para filtrar qué productos aparecen en el widget de pago.
Para lograr esto, agrega el objecto "products" después de tu "apiKey" en la etiqueta <script>. Luego, especifica el atributo utilizado para filtrar la lista de productos en el proceso de checkout.
📗 CONSEJO
Aprende a implementar filtros de lista de productos en combinación con la función CalendarFirst aquí.
Mostrar el proceso de checkout al hacer clic en un elemento o al activar un evento
Puedes configurar el proceso de checkout para que se muestre de dos maneras:
Análisis estático
Modo Pop-up: Usa el atributo
ventrata-checkouten el elemento HTML.
Embedded Mode (Modo integrado): Usa el atributo
ventrata-embedded-widgeten el HTML.
Ejecución dinámica
Usa la función global de JavaScript llamada
Ventrata.
📗 CONSEJO
Para más información, consulta este artículo.
Entradas de configuración compatibles
Las entradas de configuración son ajustes y parámetros que definen cómo funciona y se comporta el proceso de checkout.
📗 CONSEJO
Aprende más en nuestra lista de entradas de configuración compatibles.
Lista de funciones del proceso de checkout
Ventrata ofrece funcionalidades específicas diseñadas para facilitar el proceso de compra y mejorar la experiencia del usuario.
📗 CONSEJO
Aprende más en nuestra lista de funciones del proceso de checkout.
Lista de funciones de las tarjetas de regalo
Las tarjetas de regalo suelen tener un valor almacenado que se puede gastar en múltiples transacciones hasta que se agote el saldo, por ejemplo, para una experiencia y/o un artículo de la tienda de regalos.
Configura las propiedades básicas de tus tarjetas de regalo y aprovecha las funciones que te permiten ofrecer tarjetas canjeables por cualquier producto o vinculadas a un producto preseleccionado específico.
📗 CONSEJO
Aprende más en nuestro artículo sobre las tarjetas de regalo.
Lista de funciones del selector de opciones
La función Selector de opciones, junto con sus subfunciones, te permite personalizar cómo se presentan las opciones de producto y los idiomas de los comentarios del tour. Con varias configuraciones, puedes crear un diseño altamente personalizado.
📗 CONSEJO
Aprende más en nuestro artículo sobre la función selector de opciones.
Temas de color
El checkout de Ventrata ofrece dos modos básicos de color: LIGHT (claro) y DARK (oscura). Puedes personalizar estos modos usando el data-config en tu checkout.
Además, elementos específicos de tu web checkout pueden configurarse como un objeto JavaScript para una personalización adicional.
📗 CONSEJO
Aprende más en nuestro artículo sobre temas de color.
Multi-Booking (Reserva múltiple)
La reserva múltiple es un flujo de aplicación donde tus usuarios pueden añadir múltiples productos al carrito. Te permite tener un flujo de carrito completamente gestionado a través de nuestra aplicación o simplemente proporcionar una acción de edición para reservas ya creadas dentro del pedido.
📗 CONSEJO
Para una descripción completa de este flujo, consulta Multi-Booking (Reserva múltiple).
Manage My Booking (Portal de check-in)
El atributo Check-in, también conocido como Manage My Booking (MMB) les permite a los clientes reprogramar, cancelar o actualizar sus reservas, así como canjear vales de revendedores.
📒 NOTA
La solución actual Manage My Booking (Gestionar mi reserva) forma parte del antiguo checkout (V2 y anteriores), que ya no es compatible. Sin embargo, puedes implementar esta solución en tu nuevo checkout (V3) siguiendo los pasos en este artículo.
📗 CONSEJO
Si deseas implementar una página de check-in (gestionar mi reserva) en tu sitio web, sigue este espacio y estate atento a más información que llegará pronto.
Eventos personalizados
Integra la solución de checkout de Ventrata con aplicaciones externas utilizando eventos personalizados.
📗 CONSEJO
Para una lista completa de eventos personalizados, consulta este artículo.