Pseudocode for Integrating Finswich Checkout in Application (Native iOS & Android)

Introduction

This pseudocode outlines the implementation of an iframe for the Finswich Checkout system. It dynamically configures the iframe's parameters, listens for messages from the iframe, handles closure events, and updates the UI accordingly.

This documentation is designed for developers who want to understand and implement the integration in their Mobile applications.


## Features
- Dynamically constructs the iframe URL using provided parameters.
- Registers a custom HTML iframe element.
- Listens for `MessageEvent` objects from the iframe for communication.
- Handles iframe closure and triggers UI updates through a callback function.

---

## Prerequisites
- **Mid-level Programming Knowledge**: Basic understanding of syntax, logics and state management.
- **Web Integration**: Familiarity with using HTML elements in your framework.
<!-- - **Tools**: Ensure you have a Flutter development environment set up. -->

---

## Pseudocode
Below is the pseudocode for the `FinswichIframe` widget:

```pseudocode
CLASS: FinswichIframe
INPUT:
  - ischeckoutVisible (Boolean)
  - reference (String)
  - publicKey (String)
  - balance (String)
  - origin (String)
  - refreshUI (Function)

BEGIN
  // Constructor to initialize FinswichIframe
  FUNCTION FinswichIframe(
    ischeckoutVisible, reference, publicKey, balance, origin, refreshUI
  )
    DECLARE messageSubscription (StreamSubscription<MessageEvent>) // Listens for `MessageEvent` objects from the iframe for communication (Closing the iframe) 


    // Register a custom HTML iframe element (Create the iframe) 
    WITH PARAMETERS:
      - 'iframeElement'
      - FUNCTION: Create IFrameElement:
          SET className = "MyIframe"
          SET id = "_fswich_iframe"
          SET src = "https://checkout-1.fuspay.finance/?reference={{reference}}&public_key={{publicKey}}&balance={{balance}}&origin={{origin}}"
          SET style.border = 'none'

    // Listen for messages from the iframe
    SET messageSubscription = window.onMessage.listen(FUNCTION(event):       

      // Get the iframe element by ID
      SET checkoutIframe = document.getElementById("_fswich_iframe")

   

      // Check if the received message signals to "Close"
      IF event.data["name"] == "Close" THEN
        IF debugMode THEN
          PRINT "Closing iframe"

        // Remove the iframe and update visibility
        CALL checkoutIframe.parent.remove()
        SET ischeckoutVisible = FALSE
        CANCEL messageSubscription
        CALL refreshUI()
      ENDIF
    END FUNCTION)
  END FUNCTION

  // Widget build function
  FUNCTION build(context)
    RETURN HtmlElementView WITH PARAMETERS:
      - viewType = 'iframeElement'
      - onPlatformViewCreated = (callback function)
  END FUNCTION
END CLASS

Last updated