Integrating with Your XML‐based Android Codebase

If your Android codebase isn't using Jetpack Compose yet, no worries! Below, we'll guide you on integrating our Jetpack Compose views into your existing XML views.

Steps to Integrate:

1. Add Jetpack Compose Dependencies

To begin, you need to add the necessary Jetpack Compose dependencies to your project:

implementation(platform('androidx.compose:compose-bom:VERSION'))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")

2. Enable Compose in Your Gradle File

Ensure you have Compose enabled in your build.gradle:

android {
    buildFeatures {
        compose true
    }
}

3. Integrate the PaytrailPayment View

If you want to use the PaytrailPayment view from the Paytrail SDK, follow these steps:

Create a new fragment. Add the following to your Fragment XML layout :

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

In your fragment's code, initialize and use the view:

//This is for demo purpose, you can replace with your actual info
val SAMPLE_MERCHANT_ACCOUNT = MerchantAccount(id = 375917, secret = "SAIPPUAKAUPPIAS")
val composeView = view.findViewById(R.id.compose_view)
composeView.apply {
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent {
        PaytrailPayment(
            merchantAccount = SAMPLE_MERCHANT_ACCOUNT,
            paymentRequest = cartAsPaymentRequest(), // create a payment request
            onPaymentStateChanged = {
                Log.v("debugger", "State - ${it.state}")
            }
        )
    }
}

Finally, call the fragment you just created from your MainActivity. Once done, you should be able to see our Payment Providers screen.