Code Monkey home page Code Monkey logo

mono-flutter's Introduction

mono_flutter

pub package

A Flutter plugin integrating the official android and ios SDK for Mono (financial data Platform) (https://withmono.com/)

Mono Connect.js is a quick and secure way to link bank accounts to Mono from within your app. Mono Connect is a drop-in framework that handles connecting a financial institution to your app (credential validation, multi-factor authentication, error handling, etc). It works on mobile and web.

For accessing customer accounts and interacting with Mono's API (Identity, Transactions, Income, DirectPay) use the server-side Mono API. For complete information about Mono Connect, head to the docs. https://docs.withmono.com/docs/ .

Getting Started

Register on the Mono website and get your public and secret keys. Setup a server to exchange tokens to access user financial data with your Mono secret key.

How to upgrade to the Mono Widget 2.0

If you already use Mono Connect or DirectPay, you will need to upgrade your widget to version 2 to get access to these new features. To upgrade to v2, take the following steps:

Log in to your Mono dashboard

Visit Preferences in the Settings section, toggle on the new version of the Mono widget, and confirm the switch.

If you would like to use the new widget and Mono's open banking APIs to build innovative solutions for your customers, you can get started by creating a Mono account here.

screenshots

Screenshot Screenshot Screenshot Screenshot

Web Screenshot

Web Screenshot

Web Screenshot

Web Screenshot

Preview

you can checkout a web preview here https://wiseminds.github.io/mono-flutter

Usage

Import package:mono_flutter/mono_flutter.dart and use the methods in MonoFlutter class.

For web support add the following to index.html :

<script src="https://connect.withmono.com/connect.js"></script>
 <script>
   function setupMonoConnect(key, reference, data, authCode, scope) {
     const configJson = JSON.parse(data ?? `{}`);
     const options = {
       key,
       reference,
       scope, 
       onSuccess: onSuccess,
       onEvent: onEvent,
       onClose: onClose,
       onLoad: onLoad
     };
     
     const MonoConnect = new Connect(options);

    MonoConnect.setup(configJson);

     if(authCode && String(authCode).length > 0) {
       MonoConnect.reauthorise(authCode);
     }

     MonoConnect.open()

   }
 </script>

Example:

import 'package:mono_flutter/mono_flutter.dart';

void main() async {
    runApp(App());
}

class App extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return  Center(
          child: RaisedButton(
        child: Text('launch mono'),
        onPressed: () {
          MonoFlutter().launch(
              context,
              'YOUR_PUBLIC_KEY_HERE',
              // authCode: 'code_sGjE1Zh48lFR8vr3FkrD',
              reference: DateTime.now().millisecondsSinceEpoch.toString(),
              scope: "auth", // NEWLY INTRODUCED 
              data:  // NEWLY INTRODUCED
                jsonEncode({
                "customer": {
                "name": "Samuel Olamide", // REQUIRED
                "email": "[email protected]", // REQUIRED
                "identity": {
                  "type": "bvn",
                  "number": "2323233239",
                }
              }
              }),
              onEvent: (event, data) {
                print('event: $event, data: $data');
              },
              onClosed: (code) {
                print('Modal closed, $code');
              },
              onLoad: () {
                print('Mono loaded successfully');
              },
              onSuccess: (code) {
                print('Mono Success $code');
              },
            );
    }
}

// FOR NEW CUSTOMERS

"customer": {
"name": "Samuel Olamide", // REQUIRED
"email": "[email protected]", // REQUIRED
"identity": { // OPTIONAL
"type": "bvn",
"number": "2323233239",
}
}

// FOR RETURNING CUSTOMERS

"customer": {
"id": "623625362356125afdea1245" // REQUIRED
}

Checkout the example project for full implementation

###Reauthorization Passing the [authCode] to the launch command This package will automatically call [connect.reauthorise(authCode)]

  connect.reauthorise(authCode);

Reauth code is a mono generated code for the account you want to re-authenticate, which must be requested by your server and sent to your frontend where you can pass it to mono connect widget. Mono connect widget will ask for the required information and re-authenticate the user's account and notify your server. Once the reauthorisation is complete, the mono.events.account_reauthorized event will be sent to your webhook, following with mono.events.account_updated once the synced data is available.

Customizations

For a custom page or with a dialog, use the [MonoFlutterWebView] widget, but this is not supported on the web.

 showDialog(
      context: context,
      builder: (c) => MonoWebView(
        key: "YOUR_APPS_PUBLIC_KEY_HERE",
        scope: "auth", // NEWLY INTRODUCED 
        data: const { // NEWLY INTRODUCED
            "customer": {
                "name": "Samuel Olamide", // REQUIRED
                "email": "[email protected]", // REQUIRED
                "identity": {
                  "type": "bvn",
                  "number": "2323233239",
                }
              }
        },
        onEvent: (event, data) {
          print('event: $event, data: $data');
        },
        onClosed: () {
          print('Modal closed');
        },
        onLoad: () {
          print('Mono loaded successfully');
        },
        onSuccess: (code) {
          print('Mono Success $code');
        },
      ),
    );

mono-flutter's People

Contributors

codeavid avatar demola234 avatar k1ycee avatar ookannumber1 avatar timoladoyinbo avatar wiseminds avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

mono-flutter's Issues

Customer ID for returning user not received in webhook Response

@wiseminds When a developer passes the customer ID in the customer object:

"customer": {
"id": "623625362356125afdea1245" 
}

The widget loads successfully, however the customerId returned in the webhook response is different from the passed.

{
  "data": {
    "event": "mono.events.account_connected",
    "data": {
      "id": "666aad2ed7b58466ce04d205",
      "customer": "65c30fba6564410ee4fbb590",
      "meta": {
        "ref": "099777"
      }
    }
  }
}

With a different customer ID returned, it shows there is an issue with customer ID passed to the flutter widget. See screenshots for more information

IMG_0853
WhatsApp Image 2024-06-13 at 11 24 49 AM
WhatsApp Image 2024-06-13 at 11 25 34 AM

Type 'JavaScriptMessage' not found.

I got this error after installing and implementing the package. I have tried re-installing but error still persist. Can you please look into it. Thanks. Below are the error messages.

`
: Error: Type 'JavaScriptMessage' not found.
mono_web_view.dart:186
void _monoJavascriptChannel(JavaScriptMessage message) {
^^^^^^^^^^^^^^^^^
: Error: Couldn't find constructor 'WebViewController'.
mono_web_view.dart:72
_webViewController = WebViewController()
^^^^^^^^^^^^^^^^^
: Error: Couldn't find constructor 'NavigationDelegate'.
mono_web_view.dart:76
..setNavigationDelegate(NavigationDelegate(
^^^^^^^^^^^^^^^^^^

: Error: The getter 'JavaScriptMode' isn't defined for the class 'MonoWebViewState'.
mono_web_view.dart:73

  • 'MonoWebViewState' is from 'package:mono_flutter/mono_web_view.dart' ('../../.pub-cache/hosted/pub.dev/mono_flutter-2.0.0/lib/mono_web_view.dart').
    mono_web_view.dart:1
    Try correcting the name to the name of an existing getter, or defining a getter or field named 'JavaScriptMode'.

    ..setJavaScriptMode(JavaScriptMode.unrestricted)
                        ^^^^^^^^^^^^^^
    

: Error: The method 'WebViewWidget' isn't defined for the class 'MonoWebViewState'.
mono_web_view.dart:128

  • 'MonoWebViewState' is from 'package:mono_flutter/mono_web_view.dart' ('../../.pub-cache/hosted/pub.dev/mono_flutter-2.0.0/lib/mono_web_view.dart').
    mono_web_view.dart:1
    Try correcting the name to the name of an existing method, or defining a method named 'WebViewWidget'.
    child: WebViewWidget(
    ^^^^^^^^^^^^^

: Error: 'JavaScriptMessage' isn't a type.
mono_web_view.dart:186
void _monoJavascriptChannel(JavaScriptMessage message) {
^^^^^^^^^^^^^^^^^
`

Fintechs not showing up

Mono recently added investment platforms like chaka, trove, bamboo. When I search on mono-flutter, they are not showing up

Mono V2 widget doesn't send the expected code in the onSuccess Hook

So we have this widget all setup and we expect to receive a code at the onSuccess hook, but this code doesn't come in but after much debugging we can see that the code is being sent from the onClose hook, but the onClose hook is not designed to do this.
Please not that this only happens when we switch to the v2 widget, if we switch back to the v1 widget we don't experience this issue.

Flutter webview package needed

Please add to the documentation or readme, that flutter_webview dependency is needed for this package to work, I had issue with the sdk, until I added webview package.

Null safety error on latest version (1.1.3)

Hi, thanks for the time put into developing this package.

I've discovered a null safety issue while building the latest version (1.1.3). The error is from the WidgetBinding instance in the mono_web_view.dart file.

The actual error is this Error: Property 'focusManager' cannot be accessed on 'WidgetsBinding?' because it is potentially null.

Flutter version: 2.10.3

I'll do a pull request that fixes this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.