En este apartado, explicamos los pasos necesario para agregar a tu plataforma la posibilidad de contratar seguros de comercio.
Para poder interactuar con nuestros servicios de manera segura es necesario contar con un par public-private keys que deberás gestionar poniéndote en contacto con nosotros aqui.
Para poder embeber uno de nuestros widget, solo necesitas seguir estos simples pasos!
Llamá nuestro script de integración desde tu frontend.
Asigna un lugar en tu frontend.
Crea una instancia del widget que quieras.
Solo hay que agregar esta linea en el HTML de tu pagina web.
Por ejemplo:
...Tus otros scripts
<script
type="module">
import
{
CommercialPropertyWidget
}
from
"https://widgets.fintoware.com/ftw_integration_worker.js";
...Tu código JS
</script>
Necesitamos que nos asignes un lugar en tu frontend donde renderizar el widget que quieras. Para esto tenés que agregar un nuevo elemento al DOM de tu página y asignarle un ID.
Por ejemplo:
...Tu código HTML
<div
id="ftw_widget_container">
</div>
...Más de tu código HTML
Perfecto, ahora para poder iniciar el widget primero tenés que crear una instancia del mismo diciéndole dos cosas, 'dónde' y 'quién'. Es fácil, solo necesitas 2 líneas de código JS.
En la primera, creas una instancia del widget que queres embeber pasando como parámetro el ID del elemento DOM asignado anteriormente (el 'dónde') y tu clave pública (el 'quién').
En la segunda, le indicas al widget que ya puede mostrarse
Por ejemplo:
<script
type="module">
// Import que vimos en el paso 1
import
{
CommercialPropertyWidget
}
from
"https://widgets.fintoware.com/ftw_integration_worker.js";
// … Tu código JS
// Create an CommercialPropertyWidget instance using idContainer & retailerPublicKey
const
ftw_commerce_widget
=
new
CommercialPropertyWidget('ftw_widget_container',
'026....-XXX-XXX');
await ftw_commerce_widget.init();
// … Más de tu código JS
</script>
Listo! Con eso ya tenés integrado el widget y se debería renderizar.
Este tipo de widget puede ser totalmente desatendida, es decir que no requiere de más interacciones por parte del HOST. Una vez que es renderizado, el usuario final interactúa directamente con el widget y nosotros nos encargamos de todo.
| Nombre | Valores |
|---|---|
| Public key | test-public-4a8b-b813-ab3c465cfa3f |
| Private key | test-private-4a8b-b813-ab3c465cfa3f |
Veamos un ejemplo funcionando !
La versión 1.0 del worker tiene 2 métodos con los que se puede interactuar.
| Método | Detalle |
|---|---|
| async init(): Promise<boolean> | Inicializa una instancia y renderiza un widget. Retorna una promesa que se resuelve cuando el widget completa el renderizado y está listo para interactuar. |
| refreshData(data): void | Envía un JSON con parámetros al widget para ser actualizado. |
| getVersion(): string | Retorna la versión del worker de integración utilizado. |