Ionic Capacitor

This is a guide to implement Incode in the Ionic Capacitor

Requirements

Ionic Capacitor development environment setup

Supported Android Version:

API 24+ & CompileSDK version 34.

Supported iOS Version

iOS 13+

Plugin installation

Install the Incode Cordova plugin in your app using command

npm install https://github.com/Incode-Technologies-Example-Repos/incode-cordova-plugin.git

As our SDK also needs the camera to capture ID and face, use command:

npm install @capacitor/camera  

Our SDK also uses GeoLocation, if it is required, use command

npm install @capacitor/geolocation 

Synchronize Capacitor

npx cap sync

Make sure your Capacitor configuration file (capacitor.config.ts or capacitor.config.json) is configured to support Cordova plugins.

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'App Name',
  webDir: 'www',
  bundledWebRuntime: false,
  cordova: {
    preferences: {}
  }
};

export default config;

{
  "appId": "com.example.app",
  "appName": "App Name",
  "webDir": "www",
  "bundledWebRuntime": false,
  "cordova": {
    "preferences": {}
  }
}


Additional setup for iOS

  • Copy below lines in the podfile
source 'https://github.com/CocoaPods/Specs.git'
source '[email protected]:Incode-Technologies-Example-Repos/IncdDistributionPodspecs.git'
  • Run pod install under ios/app folder or pod install --repo-update under ios/app folder
  • Open the Incode-Info.plist inside your Xcode project and set the following values with a description:
    • NSCameraUsageDescription
    • NSLocationWhenInUseUsageDescription
    • NSMicrophoneUsageDescription
    • NFCReaderUsageDescription
  • Synchronize Capacitor
npx cap sync

Troubleshooting

Android Error: Execution failed for task ':app:processDebugMainManifest'. [capacitor] > Manifest merger failed : Attribute application@allowBackup value=(true) from AndroidManifest.xml:5:9-35 [capacitor] is also present at [com.incode.sdk:welcome:5.19.0] AndroidManifest.xml:31:9-36 value=(false).

Solution:

Add the tools:replace="android:allowBackup" attribute to the <application> element in android/app/src/main/AndroidManifest.xml and declare the tools namespace in the <manifest> element.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.app">

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:allowBackup="false"
        tools:replace="android:allowBackup"
        android:theme="@style/AppTheme">
        ...
    </application>

</manifest>

Synchronize Capacitor

npx cap sync

Android Error: AndroidManifest.xml Error:
[capacitor] uses-sdk:minSdkVersion cannot be smaller than version declared in library [:capacitor-app]

Solution:

You can try forcing the minSdkVersion setting in the global android/build.gradle file to make sure all dependencies are using it.

allprojects {
    repositories {
        google()
        jcenter()
    }

    subprojects {
        afterEvaluate { project ->
            if (project.hasProperty("android")) {
                android {
                    compileSdkVersion = 34
                    defaultConfig {
                        minSdkVersion = 24
                        targetSdkVersion = 34
                    }
                }
            }
        }
    }
}


Add tools:overrideLibrary
If the problem persists, you can add tools:overrideLibrary in the android/app/src/main/AndroidManifest.xml file to force the use of the library.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.app">

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:allowBackup="false"
        tools:replace="android:allowBackup"
        tools:overrideLibrary="com.capacitorjs.plugins.app"
        android:theme="@style/AppTheme">
        ...
    </application>

</manifest>