Fuspay
WebsiteSupportDemo Meeting
  • Overview
    • Welcome
  • API ONBOARDING
    • Introduction
    • Partner Onboarding
    • Regenerate Partner Keys
    • IP Check & Whitelisting
  • API Onboarding
  • Authentication
    • Swap, Collection, & P2P Automation
  • Webhook Validation & Request Integrity
  • Currency Swap
    • Introduction
    • Authentication
      • Partner Onboarding Endpoints
      • Partner Activate Endpoint
      • Regenerate Partners Public & Private Keys
      • Digital Signature
    • User KYC
      • Create KYC
      • Verify KYC Status
      • Reconciliation
      • Post KYC Data
    • Exchange Rate
    • Buy
      • Create Order
      • Events
    • Sell
      • Create Order
      • Events
    • Transaction Resolution
      • Overview
      • Log Issue
      • Check Issue Status
    • Transaction Records
      • Pending Transaction
      • Get Single Order Endpoint
      • Get Multiple Order Endpoint
      • Sell/Payout Verification Endpoint
    • Provider/Bank Codes
  • Virtual card
    • Introduction
      • Getting Started
        • Partner Onboarding
        • Partner Activate Endpoint
    • Authentication
    • Partner
      • Create Merchant
      • List of Merchants
    • Merchant
      • Create User
      • Verify User KYC Status
      • List Users
    • User
      • Create Card
      • Fetch Cards
      • Get Card Details
    • Card
      • Fund Card
      • Freeze Card
      • Delete Card
    • Payments
      • Withdraw From Card
      • Withdrawal History
    • Transactions
      • Card Transactions
      • Export Card Transactions
      • Filter Card Transactions
    • Wallet
      • Merchant Wallet Balance
      • Card Wallet Balance
  • Collection and payout
    • Introduction
    • Onboarding
    • Getting Started for Partner
      • Partner Onboarding Endpoints
      • IP Capture & Whitelisting
      • Regenerate Partners Pub/Priv Keys
    • Getting Started for Merchant
    • Collection
      • Digital Signatures
      • Collection (GHS, KHS, ZAR)
      • Collection (Virtual Account-NGN )
      • Fetch Order
      • Assigning Virtual Accounts
        • Get Available Assignable Virtual Account
        • Check if specific account is available for use
        • Create Order- using Available Virtual Account from your Account Pool
        • Cancel Order
      • Get Mobile Money Providers
    • Payout
      • Account verification
      • Payout
      • Payout Status
      • Crypto Withdrawal
        • Wallet Balance
        • Withdrawal Payout
        • Get Withdrawal Payout Fee
      • Bank and Bank Codes
    • Transaction History
      • Get Transaction Records
  • P2p Automation
    • Integration Journey (API-Dashboard)
  • Payment and Utilities
    • Introduction
      • Sign Up
      • Compliance
      • Create an App
      • Configure App
    • Authentication
    • User Onboarding
    • Error Handling
    • Plugin (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)
    • Services (Backend)
      • Inter-wallet Transfer
      • Bank Transfer
      • Wallet Funding
      • Utility Purchases
  • KYC As A Service
    • Introduction
    • App Registration Endpoint
    • App Activate/Verify Endpoint
    • Request Verification Token
    • KYC (Individual)
      • Get KYC Types
      • Create KYC Request
      • Get Verification Status and User's Data
      • Create order with meta data
      • Migrate
    • KYC (Business)
      • Get KYC Types
      • Create KYC Request
      • Get Verification Status and User's Data
    • Face Stamp
      • Create Facestamp Order
      • Create OTP
      • Verify OTP
      • Post Transaction Data
    • KYC(Transactional)
    • Callbacks (Webhook Responses)
Powered by GitBook
On this page
  1. Payment and Utilities
  2. Plugin (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 FlutterNextServices (Backend)

Last updated 3 months ago