MVP ukázka

Tato stránka ukazuje minimální funkční implementaci Mobilního SDK — kompletní příklad, který integruje karetní platby, Apple Pay, 3D Secure autentizaci, overlay indikátoru načítání a zobrazení výsledku platby v jediné SwiftUI obrazovce.

Cílem je poskytnout přehledný výchozí bod při integraci SDK do vlastní aplikace. Detailní popis jednotlivých komponent a konfiguračních možností naleznete v navazujících sekcích dokumentace.

Co MVP obsahuje

• Inicializaci session (ComgateSecureSession) včetně konfigurace 3D Secure
• Formulář se Secure Fields pro karetní platbu (číslo karty, datum expirace, CVV, jméno držitele)
• Tlačítko pro karetní platbu (SecurePayButton)
• Tlačítko pro Apple Pay (SecureApplePayButton)
• Overlay indikátoru načítání (.secureLoadingOverlay)
• Zobrazení výsledku platby (SecurePaymentStatusView)

Zdrojový kód

import SwiftUI
import ComgateSDK

@main
struct MvpDemoApp: App {
    @StateObject private var session = ComgateSecureSession(
        checkoutId: "<CHECKOUT_ID>",
        applePayMerchantIdentifier: "merchant.<YOUR_MERCHANT_ID>",
        applePayDisplayName: "<MERCHANT_NAME>",
        threeDSConfig: ThreeDSConfig(
            uiCustomization: ThreeDSUiCustomization(
                toolbarStyle: ThreeDSToolbarStyle(headerText: "<APP_NAME>")
            ),
            challengeTimeoutMinutes: 5
        ),
        translation: .forCurrentLocale()
    )

    var body: some Scene {
        WindowGroup {
            PaymentScreen(session: session)
                .task {
                    if case .notInitialized = session.state {
                        try? await session.initialize()
                    }
                }
        }
    }
}

@MainActor
final class CollectorHolder: ObservableObject {
    let collector: SecureCardDataCollector
    init(pan: SecurePanFieldState, expiry: SecureExpiryFieldState, cvv: SecureCvvFieldState) {
        self.collector = secureCardDataCollector(pan: pan, expiry: expiry, cvv: cvv)
    }
}

struct PaymentScreen: View {
    @ObservedObject var session: ComgateSecureSession

    @StateObject private var panState: SecurePanFieldState
    @StateObject private var expiryState: SecureExpiryFieldState
    @StateObject private var cvvState: SecureCvvFieldState
    @StateObject private var nameState: SecureFullNameFieldState
    @StateObject private var statusState = PaymentStatusState()
    @StateObject private var holder: CollectorHolder

    init(session: ComgateSecureSession) {
        self._session = ObservedObject(wrappedValue: session)
        let pan = SecurePanFieldState()
        let expiry = SecureExpiryFieldState()
        let cvv = SecureCvvFieldState()
        let name = SecureFullNameFieldState()
        _panState = StateObject(wrappedValue: pan)
        _expiryState = StateObject(wrappedValue: expiry)
        _cvvState = StateObject(wrappedValue: cvv)
        _nameState = StateObject(wrappedValue: name)
        _holder = StateObject(wrappedValue: CollectorHolder(pan: pan, expiry: expiry, cvv: cvv))
    }

    private var collector: SecureCardDataCollector { holder.collector }

    private func params() -> PaymentParams {
        try! PaymentParams(
            email: "test@example.com",
            price: 100,
            curr: "CZK",
            country: "CZ",
            label: "Test payment",
            refId: "mvp-001"
        )
    }

    private func handle(_ result: PaymentResult) {
        statusState.translation = session.translation
        statusState.show(result: result)
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 12) {
                SecureFullNameField(state: nameState)
                SecurePanField(state: panState)
                SecureExpiryField(state: expiryState)
                SecureCvvField(state: cvvState)

                SecurePayButton(
                    session: session,
                    collector: collector,
                    paymentParams: params,
                    onResult: handle
                )

                SecureApplePayButton(
                    session: session,
                    paymentParams: params,
                    onResult: handle
                )

                SecurePaymentStatusView(state: statusState)
            }
            .padding(.horizontal, 20)
            .padding(.top, 60)
        }
        .onAppear {
            panState.translation = session.translation
            expiryState.translation = session.translation
            cvvState.translation = session.translation
            nameState.translation = session.translation
            nameState.attachTo(session)
        }
        .onDisappear { nameState.detachFrom(session) }
        .secureLoadingOverlay(session: session)
    }
}