✏️Mobile ACH Linking

For mobile integrations, a new parameter, isMobileWebview, has been introduced to indicate whether the content is being viewed within a mobile WebView. Upon passing this and ACH linking, Kado will send a postMessage event.

The parsed message will contain a type field with the value PLAID_NEW_ACH_LINK, the ACH link is extracted from the payload field of the post message. This enhancement provides a smoother experience for linking Plaid ACH accounts of institutions that have certain mobile security restrictions, particularly OAuth.

Partners are required to open the link provided in the browser (as shown in the attached example), which will subsequently return them to the application upon success. Note: Universal link needs to be shared with Kado team for this to work, please contact our dev support team.

Here is a React Native example to help integrate this flow. Feel free to reach out to the Kado team for more help.

React Native

<WebView
  onMessage={(event) => {
    const eventData = event?.nativeEvent?.data;
    try {
      const message = JSON.parse(eventData);
      if (message && message?.type === 'PLAID_NEW_ACH_LINK') {
        const achLink = message?.payload?.link;
        Linking.openURL(achLink);
      }
    } catch (error) {
      // Handle parsing errors gracefully
      console.error('Error parsing message:', error);
    }
  }}
  allowUniversalAccessFromFileURLs
  geolocationEnabled
  javaScriptEnabled
  allowsInlineMediaPlayback
  mediaPlaybackRequiresUserAction={false}
  originWhitelist={['*']}
  source={{ uri: 'https://app.kado.money/?apiKey=YOUR_API_KEY&isMobileWebview=true'}}
  allowsBackForwardNavigationGestures
  onError={(e) => {
    console.warn('error occured', e)
  }}
/>

Android

import android.annotation.SuppressLint;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {

   @SuppressLint("SetJavaScriptEnabled")
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       WebView webView = findViewById(R.id.webview);
       WebSettings webSettings = webView.getSettings();
       webSettings.setJavaScriptEnabled(true);
       webSettings.setAllowFileAccessFromFileURLs(true);
       webSettings.setGeolocationEnabled(true);
       webSettings.setMediaPlaybackRequiresUserGesture(false);

       webView.setWebViewClient(new WebViewClient() {
           @Override
           public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
               // Handle WebView errors here
               super.onReceivedError(view, errorCode, description, failingUrl);
               System.out.println("Error occurred: " + description);
           }
       });

       webView.setWebChromeClient(new WebChromeClient());
       webView.addJavascriptInterface(new WebAppInterface(), "Android");
       webView.loadUrl("https://app.kado.money/?apiKey=YOUR_API_KEY&isMobileWebview=true");
   }


   // Define the JavaScript interface
   public class WebAppInterface {
       @JavascriptInterface
       public void handleMessage(String message) {
           try {
               // Parse the JSON message
               JSONObject jsonMessage = new JSONObject(message);
               String type = jsonMessage.getString("type");
               if (type.equals("PLAID_NEW_ACH_LINK")) {
                   // Handle PLAID_NEW_ACH_LINK message
                   JSONObject payload = jsonMessage.getJSONObject("payload");
                   String achLink = payload.getString("link");
                   openLinkInBrowser(achLink);
               }
           } catch (JSONException e) {
               // Handle parsing errors gracefully
               e.printStackTrace();
           }
       }
   }


   // Method to open a URL in the browser
   private void openLinkInBrowser(String url) {
       Intent intent = new Intent(Intent.ACTION_VIEW);
       intent.setData(Uri.parse(url));
       startActivity(intent);
   }
}

iOS

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
  
   var webView: WKWebView!
  
   override func viewDidLoad() {
       super.viewDidLoad()
      
       let configuration = WKWebViewConfiguration()
       let userContentController = WKUserContentController()
       userContentController.add(self, name: "webViewChannel")
       configuration.userContentController = userContentController
      
       webView = WKWebView(frame: view.bounds, configuration: configuration)
       view.addSubview(webView)
      
       let url = URL(string: "https://app.kado.money/?apiKey=YOUR_API_KEY&isMobileWebview=true")
       let request = URLRequest(url: url!)
       webView.load(request)
   }
  
   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
       if let jsonMessage = message.body as? [String: Any],
          let type = jsonMessage["type"] as? String,
          type == "PLAID_NEW_ACH_LINK",
          let achLink = jsonMessage["payload"] as? String {
           openLinkInBrowser(achLink)
       }
   }
  
   func openLinkInBrowser(_ url: String) {
       if let url = URL(string: url) {
           UIApplication.shared.open(url)
       }
   }
}

Flutter

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: WebViewPage(),
     ),
   );
 }
}


class WebViewPage extends StatefulWidget {
 @override
 _WebViewPageState createState() => _WebViewPageState();
}


class _WebViewPageState extends State<WebViewPage> {
 final flutterWebViewPlugin = FlutterWebviewPlugin();

 @override
 void initState() {
   super.initState();
   flutterWebViewPlugin.onUrlChanged.listen((String url) {
     // Handle URL changes here
   });
 }

 @override
 Widget build(BuildContext context) {
   return WebviewScaffold(
     url: 'https://app.kado.money/?apiKey=YOUR_API_KEY&isMobileWebview=true',
     withZoom: true,
     withLocalStorage: true,
     hidden: true,
     javascriptChannels: <JavascriptChannel>[
       JavascriptChannel(
         name: 'WebViewChannel',
         onMessageReceived: (JavascriptMessage message) {
           try {
             Map<String, dynamic> jsonMessage = json.decode(message.message);
             String type = jsonMessage['type'];
             if (type == 'PLAID_NEW_ACH_LINK') {
               String achLink = jsonMessage['payload']['link'];
               openLinkInBrowser(achLink);
             }
           } catch (error) {
             // Handle parsing errors gracefully
             print('Error parsing message: $error');
           }
         },
       ),
     ].toSet(),
   );
 }

 void openLinkInBrowser(String url) {
   // Use the platform-specific code to open the link in the default browser
 }
}