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:

  1. Package Installer (NPM and Yarn) for React

  2. Inserting script tag for Vanilla Javascript applications

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

  • 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

KeyDescription 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

PreviousGetting Started/OverviewNextAuthentication

Last updated