Flutter-SDK: відмінності між версіями

Поточна версія на 09:40, 11 вересня 2025

Merchant API

(Токенізація з передачею даних картки у запиті

Введеня

Ця інструкція допоможе вам налаштувати і реалізувати можливості EasyPay SDK у вашому Flutter-додатку як для Android, так і для iOS. Виконуючи кроки в інструкції, ви зможете:

Підключити SDK до вашого Flutter-проекту.
Реалізувати функціонал для здійснення платежів.
Додати можливість перегляду, додавання або видалення карток користувачів.

Незалежно від того, на якій платформі ви працюєте (Android чи iOS), SDK EasyPay забезпечить вам підтримку на обох платформах, дозволяючи вам створювати додатки з потужними платіжними функціями для ваших користувачів.

Android частина

Налаштування залежностей

📄 settings.gradle (рівень проєкту)

Відкрийте файл settings.gradle у вашому проекті та додайте наступні налаштування:

pluginManagement {
    val flutterSdkPath = run {
        val properties = java.util.Properties()
        file("local.properties").inputStream().use { properties.load(it) }
        val flutterSdkPath = properties.getProperty("flutter.sdk")
        require(flutterSdkPath != null) { "flutter.sdk not set in local.properties" }
        flutterSdkPath
    }
    includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

Це дозволить правильно налаштувати плагіни Flutter і залежності для проекту.

build.gradle (рівень додатку):

Додайте у секцію dependencies SDK EasyPay:

dependencies {
    implementation("ua.easypay:EasyPay- Sdk:1.0.0")
}

Ініціалізація SDK в класі Application

В Android потрібно ініціалізувати EasyPay SDK у класі Application. Створіть або відкрийте ваш клас FlutterApp:

class FlutterApp : Application() {

    override fun onCreate() {
        super.onCreate()
        EasyPaySdk.INSTANCE.init(
            PlatformContext(this),
            "test",
            "easypay-test",
            null
        )
    }
}

Створення MethodChannel

На цьому етапі вам потрібно налаштувати MethodChannel, який дозволить вашому Flutter додатку взаємодіяти з нативним кодом Android. Через цей канал ваш додаток зможе надсилати запити на Android для методів навігації на оплату та на перегляд/додавання/видалення карток.

package ua.easypay.sdktestapp_flutter.test_app_with_sdk_flutter

import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import ua.easypay.sdk.data.contracts.SdkPaymentContract
import ua.easypay.sdk.data.model.arguments.SdkCardsContractArgs
import ua.easypay.sdk.data.model.arguments.SdkPaymentContractArgs
import ua.easypay.sdk.presentation.SdkUserCardsActivity
import ua.easypay.sdk.presentation.instruments.PaymentInstrumentArgs

class MainActivity : FlutterFragmentActivity() {
    private val CHANNEL = "com.example.sdk/payment"
    private var pendingResult: MethodChannel.Result? = null

    private val paymentLauncher = registerForActivityResult(SdkPaymentContract()) { sdkResult ->
        println("SdkPaymentContract result: $sdkResult")
        pendingResult?.let { result ->
            result.success(sdkResult?.toString())
            pendingResult = null // clear after use
        }
    }

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                "startPayment" -> {
                    println("call.arguments: ${call.arguments}")
                    val args = call.arguments as? Map<*, *>
                    println("call.arguments after cast: $args")
                    if (args != null) {
                        try {
                            val serviceKey = args["serviceKey"] as? String
                                ?: throw IllegalArgumentException("Missing serviceKey")
                            val orderId = args["orderId"] as? String
                                ?: throw IllegalArgumentException("Missing orderId")
                            val amount = (args["amount"] as? String)?.toDoubleOrNull()
                                ?: throw IllegalArgumentException("Missing or invalid amount")
                            val description = args["description"] as? String
                                ?: throw IllegalArgumentException("Missing description")
                            val additionalItems = (args["additionalItems"] as? Map<*, *>)?.mapKeys { it.key.toString() }?.mapValues { it.value.toString() }
                            val phoneNumber = args["phoneNumber"] as? String
                            val showPaymentResult = args["showPaymentResult"] as? Boolean ?: false

                            val paymentInstrumentArgs = PaymentInstrumentArgs(
                                serviceKey = serviceKey,
                                orderId = orderId,
                                amount = amount,

IOS частина

Підключення EasyPay SDK до iOS проекту

Щоб підключити SDK для iOS у ваш проект, вам потрібно виконати наступні кроки:

Завантажте фреймворк EasyPaySdkIos:
- Завантажте EasyPaySdkIos.xcframework за посиланням https://github.com/EasyPay-Mobile/EasyPay-Sdk-Ios та вставте його в папку вашого iOS проекту - YourProject/iOS/Runner/.

2. Перевірте, чи з'явився фреймворк у Xcode:

Переконайтеся, що EasyPaySdkIos.xcframework з'явився в секції Frameworks, Libraries, and Embedded Content у вашому Xcode проекті.

3. Додайте папку compose-resources до Copy Bundle Resources:

У Xcode додайте папку compose-resources, що знаходиться всередині EasyPaySdkIos.xcframework, до Copy Bundle Resources. Це дозволить SDK використовувати необхідні ресурси.
Виберіть опцію "Create folder references" при додаванні цієї папки.

Важливо: при додаванні compose-resources в діалозі додавання у вас були обрані наступні опції

Destination: Copy items if needed
Added folders: Create folder references

Ініціалізація SDK в AppDelegate.swift

Після підключення фреймворка потрібно ініціалізувати EasyPay SDK у вашому додатку. Це робиться в класі AppDelegate.swift.

Імпортуйте необхідні бібліотеки:

Відкрийте файл AppDelegate.swift і додайте імпорт бібліотек для Flutter та EasyPay SDK:

import Flutter
import UIKit
import EasyPaySdkIos

Ініціалізація EasyPay SDK: Додайте ініціалізацію SDK в метод application(_:didFinishLaunchingWithOptions:

@main
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,

didFinishLaunchingWithOptions launchOptions:
[UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
EasyPaySdk.shared.doInit(
context: PlatformContext(),
secret: “your secret",
partnerKey: “your partner key",
applePayMerchantId: "merchant.com.example"
)
GeneratedPluginRegistrant.register(with: self)
return super.application(application,
didFinishLaunchingWithOptions: launchOptions)
}
}

Створення MethodChannel для методів навігації на оплату та на перегляд/додавання/видалення карток

У цьому кроці налаштовується MethodChannel для взаємодії між Flutter та нативним кодом iOS. Це дозволяє відправляти запити з Flutter для запуску оплати або відкриття екрану для перегляду, додавання чи видалення карток.

import Flutter
import UIKit
import EasyPaySdkIos
@main
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions:
[UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
EasyPaySdk.shared.doInit(
context: PlatformContext(),
secret: “your secret",
partnerKey: “your partner key",
applePayMerchantId: "merchant.com.example"
)
let controller = window?.rootViewController as!
FlutterViewController
let channel = FlutterMethodChannel(name: "com.example.sdk/
payment", binaryMessenger: controller.binaryMessenger)
channel.setMethodCallHandler { [weak controller] call, result in
if call.method == "startPayment" {
guard let args = call.arguments as? [String: Any] else {
result(FlutterError(code: "INVALID_ARGS", message:
"Args were null", details: nil))
return
}
let vc = createPaymentVC(args: args) { sdkResult in

if let sdkResult = sdkResult {
result(sdkResult.description) // send result
back to Flutter
} else {
result("Cancelled")
}
}
controller?.present(vc, animated: true)
} else if call.method == "openCardListScreen" {
let phoneNumber = (call.arguments as? [String: Any])?
["phoneNumber"] as? String ?? ""
let vc =
SdkCardsViewControllerKt.SdkCardsViewController(
args: SdkCardsContractArgs(phoneNumber: phoneNumber,
urlToNotifyMerchant: nil)) {
result(nil)
}
controller?.present(vc, animated: true)
} else {
result(FlutterMethodNotImplemented)
}
}
GeneratedPluginRegistrant.register(with: self)
return super.application(application,
didFinishLaunchingWithOptions: launchOptions)
}
}
func createPaymentVC(args: [String: Any], onResult: @escaping
(EPaySdkResult?) -> Void) -> UIViewController{
let params = SdkPaymentContractArgs(
paymentInstrumentArgs: PaymentInstrumentArgs(
serviceKey: args["serviceKey"] as? String ?? "",
orderId: args["orderId"] as? String ?? "",
amount: Double(args["amount"] as? String ?? "0") ?? 0.0,
description: args["description"] as? String ?? "",
additionalItems: (args["additionalItems"] as? [String:
String]) ?? [:],
phoneNumber: args["phoneNumber"] as? String
),
showPaymentResult: args["showPaymentResult"] as? Bool ?? false
)
let vc = SdkPaymentViewControllerKt.SdkPaymentViewController(args:
params) { result in
onResult(result)
}
vc.modalPresentationStyle = .fullScreen
return vc
}

Ініціалізація оплати

У Flutter додатку створюється кнопка, яка викликає метод для ініціалізації платежу.

Для запуску процесу оплати використовується виклик нативного методу startPayment через MethodChannel. У цьому прикладі ми створюємо кнопку, яка при натисканні передає всі необхідні параметри платежу.

SizedBox(
    width: double.infinity,
    child: FloatingActionButton.extended(
        onPressed: () async {
            final args = {
                'serviceKey': 'SomeServiceKey',
                'orderId': 'SomeOrderId',
                'amount': '3.0',
                'description': 'payment description',
                'phoneNumber': '380990000000',
                'showPaymentResult': true,
            };
            try {
                final result = await platform.invokeMethod('startPayment', args);
                setState(() {
                    _paymentResult = result;
                });
            } on PlatformException catch (e) {
                setState(() {
                    _paymentResult = "Failed to get payment result: '${e.message}'.";
                });
            }
        },
        label: const Text('Make payment'),
    ),
)

Перехід на флоу перегляду/додавання/видалення карток

У цьому етапі необхідно реалізувати функціональність для переходу на екран, на якому користувач зможе переглядати, додавати або видаляти збережені картки. Це можна здійснити за допомогою FloatingActionButton у Flutter, який викликає нативний метод для відкриття екрану карток.

SizedBox(
    width: double.infinity,
    child: FloatingActionButton.extended(
        onPressed: () async {
            final phoneNumber = _phoneNumberController.text;
            try {
                await platform.invokeMethod('openCardListScreen', {
                    'phoneNumber': phoneNumber,
                });
            } on PlatformException catch (e) {
                print('Failed to open card list screen: ${e.message}');
            }
        },
        label: const Text('Navigate to cards'),
    ),
)

@@ Рядок 332: / Рядок 332: @@
 #
-<div style="width: 100%; display: flex; justify-content: space-between; gap: 16px; box-sizing: border-box; padding: 8px 0;">
-  <!-- Ліва кнопка -->
-  <div style="
-    position: relative;
-    flex: 1;
-    min-width: 150px;
-    background: rgba(135, 206, 250, 0.1);
-    padding: 8px 14px;
-    border-radius: 8px;
-    border: 1px solid #007BFF;
-    color: #007BFF;
-    font-weight: bold;
-    font-size: 1em; /* пропорційний розмір */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-  ">
-<!-- Текст у кутку --><span style="position: absolute; top: 6px; left: 8px;">← Назад</span>
-    <!-- Основний текст -->
-<br>
-[[ANDROID-SDK]]
-</div>
-  <!-- Права кнопка -->
-  <div style="
-    position: relative;
-    flex: 1;
-    min-width: 150px;
-    background: rgba(135, 206, 250, 0.1);
-    padding: 8px 14px;
-    border-radius: 8px;
-    border: 1px solid #007BFF;
-    color: #007BFF;
-    font-weight: bold;
-    font-size: 1em; /* пропорційний розмір */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-  ">
-<span style="position: absolute; top: 6px; right: 8px;">Далі →</span>
-    <!-- Основний текст -->
-<span>[[Головна сторінка|На головну]]</span>
-  </div>
-</div>