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 elproductIDpara abrir el widget para un producto específico.
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 |
| reemplaza |
|
📗 CONSEJO Si el atributo "env" no está especificado en la etiqueta
|
| Permite el uso del modo integrado.
La página requiere la presencia de un elemento HTML con el atributo |
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
classpara especificar elwidthyheight(anchura y altura).Incluye los atributos
ventrata-embedded-widgetydata-configdentro de la etiqueta<aside>.Dentro del atributo
data-configagrega"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.