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
Install our checkout using the appropriate package installer command
NPM
npm i finswich-checkoutYarn
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><!<!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
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
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
Last updated