Embedding the TransFi Payment Widget via iFrame

📌 Use Case Summary

Title: Embed Tranfi Widget via iFrame
Actor(s): Web Developers, Frontend Engineers Preconditions:

Customer has access to a valid TRANFI_PAYMENT_URL (provided by Tranfi).
Customer's site allows iframe embedding.

Outcome:
The Tranfi widget is rendered as a full-screen overlay within the client’s website.

✅ Implementation Steps

Create an HTML file or insert the following snippet into an existing webpage.
Replace TRANFI_PAYMENT_URL with the actual URL provided by the Tranfi team.

Use the following HTML:

<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body style="margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden">
    <iframe
      src="TRANFI_PAYMENT_URL"
      style="
        width: 100%;
        height: 100%;
        border: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      "
    ></iframe>
  </body>
</html>