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 Finswich checkout via NPM or Yarn
  • 2. Integrating the Finswich Checkout on your Vanilla Javascript app
  • 3. Steps for integrating Finswich Checkout via Flutter
  • 4. Pseudocode for Integrating Finswich Checkout in Application (Native iOS & Android)
  • Introduction
  1. INTEGRATING via CHECKOUT

Integrating the Checkout on your App (Frontend)

This allows you to successfully embedded our checkout. This is the frontend integration.

PreviousGetting Started/OverviewNextIntegrating Finswich checkout via NPM or Yarn

Last updated 4 months ago

There are 3 ways of integrating the inline checkout:

  1. Package Installer (NPM and Yarn) for React

  2. Inserting script tag for Vanilla Javascript applications

  3. Packages for

1. Integrating Finswich checkout via NPM or Yarn

  • Please visit or

  • Install our checkout using the appropriate package installer command

NPM

npm i finswich-checkout

Yarn

Yarn add finswich-checkout

  • Import the Finswich from the downloaded "finswich-checkout". Please follow the code above.

2. Integrating the Finswich Checkout on your Vanilla Javascript app

<script src="https://cdn.jsdelivr.net/npm/finswich-checkout@1.0.7/index.min.js"></script>
vanilla Javascript Integration 
<!<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://cdn.jsdelivr.net/npm/finswich-checkout@1.0.7/index.min.js"></script>
</head>

<body>

    <button onclick="Open()" >Open</button>
    <button onclick="Close()" >Close</button>
    <script>
        let myModal;
        
        const init_option = {
            reference: "your_user_ref",
            public_key:"your_finswich_live_public_key",
            balance: "your_current_user_balance",
            origin: "your_whitelisted_app_origin"
        };

        
        document.addEventListener("DOMContentLoaded", function () {
             myModal = new FinSwitch(init_option);
       
            });
            
            const Close = () => { 
                myModal.closeModal()
            }
            const Open = () => { 
                myModal.openModal()

         }    

    </script>
</body>

</html>

Integrating our checkout for Flutter and Dart Applications (Mobile)

3. Steps for integrating Finswich Checkout via Flutter

  • Please follow the instructions on the page.

  • After installing and adding the finswich package to your code, here is a sample dart code to complete your set up

import 'package:finswich_checkout/finswich_checkout.dart';
import 'package:flutter/widgets.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isCheckoutVisible = false;
//to pop out the checkout set isCheckoutVisible to true
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(),//the container should be replaced by your code

        /// Your widget should go here in place of container (your application)
        ischeckoutvisible
            ? FinswichIframe(
                balance: "your_user_balance",
                isCheckoutVisible: isCheckoutVisible,
                origin: "your_apps_origin",

                ///To get your origin use this [window.location.origin],
                publicKey:
                    "your_finswich_live_public_key",
                reference: "your_user_reference",
                refreshUI: () {
                  setState(() {});
                },
              )
            : const SizedBox(),
      ],
    );
  }
}

The table below helps to explain the objects passed to the inline JS during initialiazation

Key
Description
Type

reference

This is your user's reference on your platform

String

public_key

Your live public key from Finswich app

String

balance

the user's balance on your app

Number

origin

your whitelisted IP saved on the Finswich platform

String

4. 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

Visit the link to the

On the flutter package website they click the installing tab

https://pub.dev/packages/finswich_checkout
flutter package
Flutter and dart applications
NPM
Yarn
NPM finswich