Para habilitar con éxito el modo integrado, necesitarás un elemento HTML en tu página que servirá como contenedor para el widget.

Este elemento HTML necesita el atributo ventrata-embedded-widget para activar la funcionalidad.

Integrar el checkout de Ventrata

Para habilitar el modo integrado, debes agregar las etiquetas <script> y <aside> a tu página.

La etiqueta <script> carga la configuración del checkout.
La etiqueta <aside> especifica la ubicación del widget y es donde agregas el productID para abrir el widget para un producto específico.

Localizar la clave API

En tu panel de Ventrata, ve a Web Checkouts > Checkouts.

Checkouts
Selecciona uno de tus checkouts existentes.
Tu clave API se encuentra en la pestaña Checkout Details (Detalles del pago) de la pestaña del checkout seleccionado.

Clave API

Agregar la etiqueta `<script>`

Para integrar el checkout de Ventrata, agrega la siguiente etiqueta <script> a las páginas HTML de su 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", "embedded": true }'> 
</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", "embedded": true }'> 
</script>

Atributo	Descripción
`apiKey`	reemplaza `<YOUR_API_TOKEN>` con la clave API ubicada en tu checkout Aprende más
`"env"`	`"live"` - todos los pagos y pedidos se registrarán como si fueran realizados por clientes `"test"` - todos los pagos y pedidos se registrarán como pruebas y no se incluirán en tu contabilidad 📗 CONSEJO Si el atributo "env" no está especificado en la etiqueta `<script>` , el checkout permanecerá en un entorno de prueba por defecto.
`"embedded"`	Permite el uso del modo integrado. La página requiere la presencia de un elemento HTML con el atributo `ventrata-embedded-widget`. Aprende más

Especifica la ubicación y el tamaño del widget

Para integrar el checkout en modo incrustado, incluye algunas líneas adicionales de código donde se mostrará el widget.

Agrega la siguiente etiqueta <aside> al HTML de una página donde aparecerá el widget incrustado.
Usa el atributo class para especificar el width y height (anchura y altura).
Incluye los atributos ventrata-embedded-widget y data-config dentro de la etiqueta <aside>.
Dentro del atributo data-config agrega "embedded": true.
Especifica el ID del producto usando "productID" : "<product_ID>".

<aside
     class="h-[50rem] w-[31.25rem]"
     ventrata-embedded-widget
     data-config='{"productID":"5789d12f-029c-42f3-80af-8223379d1816" 
}' 
> 
</aside>

📒 NOTA

Ten en cuenta que los valores de altura y anchura usados en class="h-[50rem] w-[31.25rem]" pueden no ser aplicables a tu página web. Por favor, reemplaza estos valores por otros que se ajusten a tu página.

📗 CONSEJO

Puedes usar el widget en modo incrustado y pop-up al mismo tiempo. Para más detalles, lee nuestro artículo de preguntas frecuentes.

Integrar el pago en modo integrado (Embedded)