with Native SDKs

Last Updated: 17 March 2025

Flutter integration with Native SDKs

Overview

The integration leverages Flutter platform channels to configure and render our Native SDKs for iOS and Android.

You create a form containing the Access Checkout UI components in the iOS and Android projects. This form is then rendered on the Flutter application using a PlatformViewLink for Android or a UiKitView for iOS.

The communication between Native and Flutter is done via method channels.

Get started

To integrate our Checkout Native iOS and Android SDKs into Flutter you must:

  • add our Checkout SDKs to iOS and Android
  • implement platform-specific native views
  • create a method channel for communication between Native and Flutter
  • expose the Native views to Flutter
  • optionally implement validation and event listeners
Full sample integration

You can see an example demo of a Flutter integration with Native iOS and Android SDKs in our access-checkout-flutter-demo Github Repository

On the Native side

Add our iOS and Android Checkout SDK

Firstly, you must add the iOS and Android dependencies manually to the Android and iOS projects within your Flutter application.

Android: add SDK dependency

You must add the Android Checkout SDK to your android/app/build.gradle.

To ensure compatibility, the SDK also requires a minimum SDK version of 26.

android/app/build.gradle.kts
android {
    defaultConfig {
        minSdk = 26
    }
}

dependencies {
    implementation("com.worldpay.access:access-checkout-android:4.0.0")
}

iOS: add SDK dependency

You must add the iOS Checkout SDK to your ios/Podfile.

ios/Podfile
target 'Runner' do
  pod 'AccessCheckoutSDK'
end

Implement native views

The Access Checkout SDK provides the UI elements, but to integrate them into Flutter you must make use of PlatformViews.

Android: create custom view

  • MainActivity.kt - the entry point responsible for registering the ViewFactory and binding the ViewFactory to a platform channel
  • AccessCheckoutView.kt - renders the Access Checkout UI, handles session generation and validation and communicates to Flutter via the Method Channel
  • AccessCheckoutViewFactory.kt - creates and configures instances of AccessCheckoutView
  • access_checkout_layout.xml - contains the UI layout of the Access Checkout fields (Pan, Expiry and CVC)

android/app/src/main/kotlin/com/example/flutter/MainActivity.kt
package com.example.access_checkout_flutter_native_sdk_demo

import com.example.access_checkout_flutter_native_sdk_demo.AccessCheckoutViewFactory
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    private val METHOD_CHANNEL_NAME = "com.worldpay.flutter/accesscheckout"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        val registry = flutterEngine
            .platformViewsController
            .registry

        registry
            .registerViewFactory(
                "com.worldpay.flutter/accesscheckout",
                AccessCheckoutViewFactory(
                    flutterEngine.dartExecutor.binaryMessenger,
                    METHOD_CHANNEL_NAME,
                    this
                )
            )
    }
}

iOS: create custom view

  • AppDelegate.swift - the entry point responsible for registering the ViewFactory and binding the ViewFactory to a platform channel
  • AccessCheckoutView.swift - renders the Access Checkout UI, handles session generation and validation and communicates to Flutter via the Method Channel
  • AccessCheckoutViewFactory.swift - creates and configures instances of AccessCheckoutView
  • AccessCheckoutViewController.swift - manages the layout in storyboard and connects the UI elements
  • AccessCheckoutView.storyboard - contains the UI layout of the Access Checkout fields (Pan, Expiry and CVC)

ios/Runner/AppDelegate.swift
import Flutter
import UIKit

@main
@objc class AppDelegate: FlutterAppDelegate {
    private var METHOD_CHANNEL_NAME = "com.worldpay.flutter/accesscheckout"

    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

        weak var pluginRegistrar = registrar(forPlugin: "com.worldpay.flutter/accesscheckout")
        
        let factory = AccessCheckoutViewFactory(
            messenger: pluginRegistrar!.messenger(),
            channel: METHOD_CHANNEL_NAME)
        
        pluginRegistrar!.register(
            factory,
            withId: "com.worldpay.flutter/accesscheckout"
    
        )
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

On the Flutter side

Set up method channels for communication

To communicate with the native side you must create a service that handles the communication between Flutter and Native.

In this class, you connect to our previously defined method channel com.worldpay.flutter/accesscheckout on the Native iOS and Android platforms.

You must tell Flutter how to handle the callbacks issues when invoking the generateSession method on the native side.

Optionally you can also define the logic for handling validation updates, in case you would like to handle states.

Prerequisite

The name of the method channel and methods must be the same between the Flutter and Native sides. We are using com.worldpay.flutter/accesscheckout as the method channel and generateSession as the method name, as an example.

lib/service/access_checkout_flutter.dart
import 'package:flutter/services.dart';

class AccessCheckoutFlutter {
  static const channel = MethodChannel('com.worldpay.flutter/accesscheckout');

  static Future<void> listenForValidationUpdates(Function(bool) onValidationUpdated) async {
    channel.setMethodCallHandler((call) async {
      if (call.method case "onValidationUpdated") {
        onValidationUpdated(call.arguments as bool);
      }
    });
  }

  static Future<void> generateSession(
      {required Function(Map<dynamic, dynamic>) onSuccess,
      required Function(String) onError}) async {
    channel.setMethodCallHandler((call) async {
      switch (call.method) {
        case "onSessionGenerated":
          onSuccess(call.arguments);

        case "onSessionError":
          onError(call.arguments);
      }
    });

    await channel.invokeMethod<String>('generateSession');
  }
}

Embed native views in Flutter

To render our native views, you must handle the target platform and display a PlatformViewLink for Android or a UiKitView for iOS.

We recommend to create a widget to handle this logic lib/widgets/access_checkout_native_widget.dart, so that this widget is the only one responsible for rendering the native views.

lib/widgets/access_checkout_native_widget.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

class AccessCheckoutNativeWidget extends StatelessWidget {
  final String checkoutId;
  final String baseUrl;
  final bool useCardValidation;

  const AccessCheckoutNativeWidget({
    super.key,
    required this.checkoutId,
    required this.baseUrl,
    required this.useCardValidation,
  });

  static const StandardMessageCodec _decoder = StandardMessageCodec();

  @override
  Widget build(BuildContext context) {
    const String viewType = "com.worldpay.flutter/accesscheckout";
    final Map<String, dynamic> creationParams = <String, dynamic>{
      "baseUrl": baseUrl,
      "checkoutId": checkoutId,
      "useCardValidation": useCardValidation
    };

    switch (defaultTargetPlatform) {
      case TargetPlatform.android:

  return PlatformViewLink(
    viewType: viewType,
    surfaceFactory: (context, controller) {
      return AndroidViewSurface(
        controller: controller as AndroidViewController,
        gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
        hitTestBehavior: PlatformViewHitTestBehavior.opaque,
      );
    },
    onCreatePlatformView: (params) {
      return PlatformViewsService.initSurfaceAndroidView(
          id: params.id,
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: _decoder,
          onFocus: () {
            params.onFocusChanged(true);
          },
        )
        ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
        ..create();
    },
  );
      case TargetPlatform.iOS:
        return UiKitView(
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: const StandardMessageCodec(),
        );
      default:
        throw UnsupportedError("Unsupported platform view");
    }
  }
}

Render the Flutter component

You can now render our newly created widget that integrates our Native Checkout SDKs into Flutter.

To achieve this, create another widget where you can orchestrate, render and handle some state for when a session is created.

This widget will also be responsible for initializing and configuring the SDKs, using parameters such as checkoutId, baseUrl, useCardValidation

Finally, you must display this AccessCheckoutWidget in our Flutter page and configure the parameters it requires.

lib/screens/native_sdk_page.dart
import 'package:access_checkout_flutter_native_sdk_demo/widgets/access_checkout.dart';
import 'package:flutter/material.dart';

class NativeSdkPage extends StatelessWidget {
  const NativeSdkPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
        child: AccessCheckoutWidget(
            // TODO: Replace the checkout id and base url with the values provided to you
            checkoutId: "00000000-0000-0000-0000-000000000000",
            baseUrl: "https://try.access.worldpay.com",
            useCardValidation: true));
  }
}