I'm in the process of creating a custom open banking workflow. I'm well versed in creating such things but I've never had to do it in a way where the API can be triggered from external websites and the end result is shown within an iFrame.

Below is a screenshot of what I would like converting:

This test VueJS website is hitting my REST API (Laravel). It is effectively a modal I have designed that pops up when the "Custom Pay" button is clicked. As the customer goes through the stages, the Open Banking payment is made.

The challenge I have is that if I want to reuse the same modal on other websites, where it is contained within an iFrame and triggered on screen via a button click, how is that to be done?

In it's simplest form, the steps would be something like this:

1. User clicks on a button and makes an API request passing through data such as; API Key, Secret, Amount & Currency.
2. Backend authenticates and sends back a response.
3. Modal pops up on external website contained within a iFrame.

It's somewhat similar to TrustPilot where by copying a line of JS and providing your account info, the TrustPilot logo appears, along with the number of reviews and ratings.

EDIT:

Here is another example of something similar, illustrating what I'm trying to achieve: https://docs.oppwa.com/tutorials/integration-guide