Estoy en el proceso de crear un flujo de trabajo de banca abierta personalizado. Estoy bien versado en la creación de este tipo de cosas, pero nunca he tenido que hacerlo de una manera en la que la API pueda activarse desde sitios web externos y el resultado final se muestre dentro de un iFrame.

A continuación se muestra una captura de pantalla de lo que me gustaría convertir:

Este sitio web de prueba de VueJS está accediendo a mi API REST (Laravel). Es efectivamente un modal que he diseñado que aparece cuando se hace clic en el botón "Pago personalizado". A medida que el cliente va pasando por las etapas, se realiza el pago de Banca Abierta.

El desafío que tengo es que si quiero reutilizar el mismo modal en otros sitios web, donde está contenido dentro de un iFrame y se activa en la pantalla al hacer clic en un botón, ¿cómo se hace eso?

En su forma más simple, los pasos serían algo como esto:

1. El usuario hace clic en un botón y realiza una solicitud de API pasando datos como; Clave de API, secreto, cantidad y moneda.
2. Backend autentica y devuelve una respuesta.
3. Modal aparece en un sitio web externo contenido dentro de un iFrame.

Es algo similar a TrustPilot, donde al copiar una línea de JS y proporcionar la información de su cuenta, aparece el logotipo de TrustPilot, junto con la cantidad de reseñas y calificaciones.

EDITAR:

Aquí hay otro ejemplo de algo similar, que ilustra lo que estoy tratando de lograr: https://docs.oppwa.com/tutorials/integration-guide