Finswich Public APIs
  • INTEGRATING via CHECKOUT
    • Getting Started/Overview
    • Integrating the Checkout on your App (Frontend)
      • Integrating Finswich checkout via NPM or Yarn
      • Integrating the Finswich Checkout on your Vanilla Javascript app
      • Steps for integrating Finswich Checkout via Flutter
      • Pseudocode for Integrating Finswich Checkout in Application (Native iOS & Android)
    • Authentication
    • User Onboarding
    • Error Handling
    • Integrating the Services (Backend)
      • Interwallet Transfer
      • Bank Transfer
      • Funding
      • Utility Purchases
Powered by GitBook
On this page
  1. INTEGRATING via CHECKOUT
  2. Integrating the Checkout on your App (Frontend)

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
PreviousSteps for integrating Finswich Checkout via FlutterNextAuthentication

Last updated 4 months ago