Integrating the Checkout on your App (Frontend)

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

There are 3 ways of integrating the inline checkout:

Package Installer (NPM and Yarn) for React
Inserting script tag for Vanilla Javascript applications
Packages for Flutter and dart applications

1. Integrating Finswich checkout via NPM or Yarn

Please visit NPM or Yarn
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)

https://pub.dev/packages/finswich_checkout

3. Steps for integrating Finswich Checkout via Flutter

Visit the link to the flutter package
On the flutter package website they click the installing tab
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

PreviousGetting Started/Overview NextIntegrating Finswich checkout via NPM or Yarn

Last updated 1 year ago

hashtag1. Integrating Finswich checkout via NPM or Yarn

hashtag2. Integrating the Finswich Checkout on your Vanilla Javascript app

hashtag3. Steps for integrating Finswich Checkout via Flutter

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

hashtagIntroduction

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