Quick Start

This guide explains how to integrate the Ottu Checkout SDK into a Flutter application from scratch. It walks you through project setup, SDK installation, and configuration steps for both Android and iOS, ensuring a smooth and efficient checkout experience within your Flutter app.

Video Tutorial: Flutter SDK Integration

This video walks you through the complete Flutter SDK integration process. Follow along to easily set up, configure, and explore the core features in action.

Installation

Create a New Flutter Project

Here are tutorials on how to create a new Flutter project from scratch for different IDEs: Create a new Flutter app

You can use any IDE of your choice; however, it is recommended to use Android Studio and select “New Flutter Project”, ensuring the selected programming language is Kotlin.

Once the project is created, you can proceed to add the Ottu Checkout SDK.

Add the Ottu Checkout SDK Dependency

Open the pubspec.yaml file, navigate to the dependencies section, and add the following block:

ottu_flutter_checkout:
  git:
    url: https://github.com/ottuco/ottu-flutter.git
    ref: 2.1.10

Then, run the following command to download the dependencies:

flutter pub get

SDK Configuration

Integrate the Ottu Checkout SDK into your Flutter app for Android and iOS to enable seamless in-app payment processing.

Android SDK Configuration

To integrate the SDK with Android, follow these steps.

Add JitPack Repository

The Ottu SDK is a Flutter plugin that includes a native platform view.

From the root directory of your project, open the android folder and locate the Gradle file: app/build.gradle (for Groovy) or app/build.gradle.kts (for Kotlin).

At the bottom of this file, add the following lines:

allprojects {
  repositories {
    ...
    maven { url = uri("https://www.jitpack.io") }
  }
}

Update Android Build Properties

The Ottu SDK requires specific Android build configurations. Ensure the following values are set in your Gradle script:

compileSdk version: 36 or newer
minSdk version: 26

Update these values if they differ from your current setup.

Verify MainActivity Inheritance

Go to the Android part of your project and open MainActivity (or your custom Android activity). Ensure that it extends FlutterFragmentActivity:

import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity : FlutterFragmentActivity()

Apply Material Theme

Check if your app theme uses a Material theme. If not, extend it with Theme.Material3.DayNight. If you define a night theme, make sure to update it accordingly.

<style name="LaunchTheme" parent="Theme.Material3.DayNight">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

Run the App

Run the application using the command line with the following command:

flutter run

Running the app via command line is mandatory. If all dependencies are configured correctly, the app should launch without errors.

iOS SDK Configuration

To integrate the SDK into an iOS app, follow these steps:

Open the iOS Project

Open Xcode.
Select “Open Project” and choose the .xcworkspace file located inside the ios directory within your Flutter app’s root directory.

Configure iOS Deployment Target

Select the Runner target.
Go to the General tab.
Find the Minimum Deployment section and set its value to 15.

Run the App

Run the application for the first time from the terminal using the same command:

flutter run

This command ensures that all necessary iOS plugin registration files are created automatically.

Add OttuCheckoutWidget

Open the screen or widget where you plan to add the Ottu SDK widget.

Define ValueNotifier

In the State class of your screen widget, define a new member of type ValueNotifier<int>:

final _checkoutHeight = ValueNotifier(300);

Here, the default value of 300 represents the most suitable height for the OttuCheckoutWidget.

Add and Wrap OttuCheckoutWidget

Add the OttuCheckoutWidget to the desired location in your layout.

Wrap the OttuCheckoutWidget inside a SizedBox, then wrap this SizedBox within a ValueListenableBuilder<int> to dynamically adjust the widget height based on the ValueNotifier value.

Set the valueListenable parameter of the builder to the value you created earlier in previous step

ValueListenableBuilder(
  valueListenable: _checkoutHeight,
  builder: (context, height, child) {
    return SizedBox(
      height: height.toDouble(),
      child: OttuCheckoutWidget(
          arguments: CheckoutArguments(
          merchantId: "alpha.ottu.net",
          apiKey: 'your Api key',
          sessionId: 'your session id',
          amount: 20.0,
          showPaymentDetails: true,
          paymentOptionsListMode: PaymentOptionsListMode.LIST,
          paymentOptionsListCount: 5,
          defaultSelectedPgCode: '',
        ),
      ),
    );
  },
),

Define MethodChannel and Constant

Next, define your MethodChannel as a top-level member of the file. It listens to messages from the native Android or iOS view:

const _methodChannel = MethodChannel("com.ottu.sample/checkout");

Also, define a constant string member to identify the channel’s method name:

const _methodCheckoutHeight = "METHOD_CHECKOUT_HEIGHT";

Register MethodChannel Handler

Register a handler for this MethodChannel. It is recommended to do this inside the didChangeDependencies() widget state callback method:

  @override
  void didChangeDependencies() {
    _methodChannel.setMethodCallHandler((call) async {
      switch (call.method) {
        case _methodCheckoutHeight:
          int height = call.arguments as int;
          _checkoutHeight.value = height;
      }
    });
    super.didChangeDependencies();
  }

Run the App

This is the final step to complete the integration. Run your Flutter app using the following command or by pressing the Run/Launch icon in your IDE:

flutter run

If all configurations and dependencies are correctly set, the app should build successfully and display the Ottu Checkout Widget.

Releasing Your App

Android

Follow these steps to prepare and release your Android app properly:

Update the proguard-rules.pro File

When you are ready to release your app, the first thing to do is update your proguard-rules.pro file.

Navigate to your project directory:
```
App/android/app/
```
Open the build.gradle.kts file.

Verify or Add ProGuard Configuration

Scroll to the buildTypes section.
Check whether the ProGuard configuration has been added.

If it’s missing, add the following lines:

buildTypes {
    getByName("release") {
       ...
       ...
        // Verify this configuration in your build.gradle file
        proguardFiles(
            getDefaultProguardFile("proguard-android-optimize.txt"),
            "proguard-rules.pro"
        )
        signingConfig = signingConfigs.getByName("debug")
    }
}

Ensure that the proguard-rules.pro file exists in the App/android/app/ directory.
- If it doesn’t exist, create it manually.

Build the Release APK

Run the following command to build your release APK and verify that all required properties are properly configured:

flutter build apk

Resolve R8 Compilation Errors (If Any)

If you encounter an error such as the following:

ERROR: Missing classes detected while running R8. Please add the missing classes or apply additional keep rules that are generated in /build/app/outputs/mapping/release/missing_rules.txt.
ERROR: R8: Missing class com.google.devtools.ksp.processing.SymbolProcessorProvider (referenced from: com.squareup.moshi.kotlin.codegen.ksp.JsonClassSymbolProcessorProvider)
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:minifyReleaseWithR8'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.R8Task$R8Runnable
   > Compilation failed to complete

Do the following:

Navigate to the file path below:

build/app/outputs/mapping/release/missing_rules.txt

Copy the rules listed in this file.
Paste them into your proguard-rules.pro file.

Rebuild and Verify

After updating the ProGuard rules, run the release command again to ensure all issues are resolved:

flutter build apk

If the build completes successfully, your app is ready for release.

PreviousFlutter NextInstallation

Last updated 3 hours ago