Mobile: SDK Integration on Flutter Apps

iOS SDK integration on Flutter Apps

Installation

Firstly you need to add native iOS SDK to your Podfile to do so:

  1. Navigate to ${PROJECT_DIRECTORY}/ios
  2. Open Podfile
  3. Follow the instructions found in iOS installation guide to install SDK

Integration

Integration can be divided in two parts: Flutter and iOS. Below you can find necessary steps for both.

Flutter

In order to communicate with native code from flutter first you need to create method channel.

static const MethodChannel _nativeMethodChannel = const MethodChannel('name_of_channel');

After creation you can call its method invokeMethod to communicate with native code like so:

await _nativeMethodChannel.invokeMethod(
  'launchSdk',
  [requestId],
);

In example requestId is also passed but that step is solely optional, and request can be generated in native code if you see fit.

When those two things are done we can move to native iOS implementation steps.

iOS

First don’t forget to import SDK:

import PaybisMobileWidgetSDK

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
	....
}

In order to catch method called from flutter code you need to set handler inside AppDelegate's function didFinishLaunchingWithOptions like so:

let controller: FlutterViewController = window?.rootViewController as! FlutterViewController

let nativeChannel = FlutterMethodChannel(
  name: "name_of_channel",
  binaryMessenger: controller.binaryMessenger
)

nativeChannel.setMethodCallHandler { call, result in
  // Optional line needed only if you passed requestId previously
  if let args = call.arguments as? [String], let id = args.first { 
    //Add Logic to get your request id here if not passed from flutter code
    PaybisMobileWidget.startWidget(
			environment: ENVIRONMENT,
      requestId: REQUEST_ID,
      customAppScheme: CUSTOM_SCHEME://,
      oneTimeToken: OPTIONAL_ONE_TIME_TOKEN, //For Single sign-on 
      merchantId: OPTIONAL_MERCHANT_ID //For apple pay support
    )
  }
}

These are just basic steps to launch the SDK, straight from flutter code, you should still get acquainted and follow all the instructions and read all the possible SDK options that can be found in:

  1. iOS installation guide
  2. iOS SDK options

And setup SDK according to your needs.

Testing

If everything is done according to description above you’re now set to launch SDK straight from flutter, run your project in your preferred IDE of flutter and test it accordingly from the place you invoke native channel method in your code.

Android SDK integration on Flutter Apps

Integration

Integration can be divided in two parts: Flutter and Android. Below you can find necessary steps for both.

Flutter

In order to communicate with native code from flutter first you need to create method channel.

static const MethodChannel _nativeMethodChannel = const MethodChannel('name_of_channel');

After creation you can call its method invokeMethod to communicate with native code like so:

await _nativeMethodChannel.invokeMethod(
  'launchSdk',
  [requestId, oneTimeToken],
);

In example requestId is also passed but that step is solely optional, and request can be generated in native code if you see fit.

When those two things are done we can move to native Android implementation steps.

Android

First, you’ll need to add a dependency for SDK to your gradle files. Requirements for dependencies are described in Android installation guide.

In order to catch a method called from flutter code you need to set handler inside MainActivity (or generated plugin if you are using it):

class MainActivity: FlutterFragmentActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)

        val channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "name_of_channel")
        channel.setMethodCallHandler { call, result ->
            when (call.method) {
                "launchSdk" -> {
                    val args = call.arguments<List<String>>
                    val requestId = args?.get(0) ?: return
                    val oneTimeToken = args?.get(1)
                  
                    PaybisMobileWidget.startWidget(application, PaybisEnvironment, requestId, oneTimeToken)
                }
                // Your other methods could be here
                else -> {
                    result.notImplemented()
                }
            }
        }
    }

Basic example of how to launch the SDK, straight from flutter code, you should still get acquainted and follow all the instructions and read all the possible SDK options that can be found in:

  1. Android installation guide
  2. Android SDK options

And setup SDK according to your needs.

Testing

If everything is done according to the description above you’re now set to launch SDK straight from flutter, run your project in your preferred IDE of flutter, and test it accordingly from the place you invoke the native channel method in your code.