README

This demo shows how to integrate VGS Collect iOS and Android SDK into your Flutter app. VGS don't have official Flutter package. You can easily integrate VGS Collect SDK into your mobile crossplatform Flutter apps.

Table of contents

• Run application
• Run VGSCollect tokenization use case
• Run VGSShow use case
• iOS VGSCollect integration guide
• Android VGSCollect integration guide
• Flutter integration guide

Run application

1. Required environment:

• Installed Flutter
• Setup IDEA
• Setup Xcode
• Install Cocoapods for running iOS
• Organization at VGS

NOTE: Please visit Flutter documentation for more detailed explanation how to setup Flutter and IDEA.
This sample is compatitable with Flutter 3.3.4 version.
Check Flutter issues here.

2. Install Flutter packages

flutter pub get

3. cd to ios folder and run

  pod install

4. cd to lib/utils. Find constants.dart file and set your vault_id and environment

class CollectShowConstants {
  static const vaultID = 'vault_id';
  static const environment = 'sandbox';
}

5. For BlinkCard add your licence keys for iOS and Android to constants.dart file.

class CollectShowConstants {
  static const microBlinkiOSLicenceKey = 'ios_licence_key';
  static const microBlinkAndroidLicenceKey = 'android_licence_key';
}

5. Run flutter app:
   On iOS Simulator (Run iOS app Flutter docs).
   On Android Simulator (Run Android app Flutter docs).

6. In case of possible issues a common fix is to clean project and reinstall packages:

  flutter clean
  flutter pub get

7. In case of error in VS Code Flutter VsCode error: You don't have an extension for debugging YAML please check this answer:

Click on "open a file", then navigate to the main.dart file and then click debug and run.

           

Run VGSCollect tokenization use case

Check VGSCollect tokenization use case here.

Run VGSShow use case

Check VGSShow use case here.

iOS VGSCollect integration guide

Integration to Flutter project can be separated into two parts.

Implementing PlatformView wrappers for native iOS views:

Implementing MethodChannel for communication between dart and native code:

1. Add dependencies into your Podfile in ios folder:

target 'Runner' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for Runner

  pod 'VGSCollectSDK'
  pod 'VGSShowSDK'
  pod 'VGSCollectSDK/CardIO'
  pod 'VGSCollectSDK/BlinkCard'

end

Make sure deployment minimal iOS version of your target and project is set to iOS 10 or later in iOS project settings. Run:

  pod update

You can add a card scanning solution to your application by adding VGSCollect/BlinkCard module. It provides a fast and easy way to scan payment cards and import them to VGS Collect.

<Note message="Note" type="info" description=' VGS offer PCI solution for BlinkCard integration.

Please contact with BlinkCard team if you have any issues related to card scanner work.'/>

Using BlinkCard in your app requires a valid license key. To get your license key you should contact MicroBlink.

For CardIO and BlinkCard include NSCameraUsageDescriptionkey in iOS projectinfo.plist to enable Camera in your iOS application.

    <key>NSCameraUsageDescription</key>
    <string>Camera usage description</string>

2. Review official Flutter documentation how to integrate native and Flutter code.

3. Check our implementation.

File	Description
CustomCardDataCollectView.swift	Native iOS UIKit view, holds UI and VGSTextFields.
FlutterCustomCardDataCollectView.swift	Holds Flutter Platform view implementation, VGSCollect instance and configuration. Encapsulates FlutterMethodChannel implementation. Holds logic for MicroBlink scanner integration.
FlutterCustomCardDataCollectViewFactory.swift	Platform view factory.
FlutterCustomCardDataCollectViewPlugin.swift	Flutter plugin.

Android integration guide

Integration to Flutter project can be separated into two parts.

Implementing PlatformView wrappers for native Android views:

Implementing MethodChannel for communication between dart and native code:

1. Add dependencies into your android/app/build.gradle:

dependencies {

    implementation 'com.verygoodsecurity:vgscollect:latest_version'
    implementation 'com.verygoodsecurity:vgsshow:latest_version'
    implementation 'com.verygoodsecurity:adapter-cardio:latest_version'
}

2. Review official Flutter documentation how to integrate native and Flutter code.

3. Check our implementation.

Package	Description
com.verygoodsecurity.vgs_collect_flutter_demo	Root package.
com.verygoodsecurity.vgs_collect_flutter_demo.view	All platform views and factories.
com.verygoodsecurity.vgs_collect_flutter_demo.view.collect	Platform view and factory used in custom example.
com.verygoodsecurity.vgs_collect_flutter_demo.view.collect_show	Platform views and factories used in collect & show example.
com.verygoodsecurity.vgs_collect_flutter_demo.view.tokenization	Platform views and factories used in tokenization example.

Flutter integration guide

For iOS and Android you need to create Flutter wrappers depending on platform.

  Widget _cardCollectView() {
    if (Platform.isAndroid) {
      return _cardCollectNativeAndroid();
    } else if (Platform.isIOS) {
      return _cardCollectNativeiOS();
    } else {
      throw Exception('Platform is not supported!');
    }
  }

  Widget _cardCollectNativeiOS() {
    final Map<String, dynamic> creationParams = <String, dynamic>{};
    return Column(children: [
      SizedBox(
          height: 290.0,
          child: UiKitView(
              viewType: customCardDataCollectViewType,
              onPlatformViewCreated: _createCardCollectController,
              creationParams: creationParams,
              creationParamsCodec: StandardMessageCodec()))
    ]);
  }

  Widget _cardCollectNativeAndroid() {
    // Pass parameters to the platform side.
    final Map<String, dynamic> creationParams = <String, dynamic>{};

    return SizedBox(
      height: 300,
      child: AndroidView(
        viewType: customCardDataCollectViewType,
        onPlatformViewCreated: _createCardCollectController,
        layoutDirection: TextDirection.ltr,
        creationParams: creationParams,
        creationParamsCodec: const StandardMessageCodec(),
      ),
    );
  }

Check our implementation.

File	Description
custom_card_data_controller.dart	Holds Flutter method channel and method invocation logic.
custom_card_data.dart	Holds Flutter platform views with collect card data page demo.