CheckoutImplementation OverviewMobile App Payments

Android SDK

Embed the Coinflow card tokenization form natively in a Jetpack Compose app.

Overview

coinflow-card-form is a Jetpack Compose SDK that embeds Coinflow’s card tokenization form directly into Android apps. The user enters their card inside your app, the SDK returns a payment token, and your backend charges the card via the standard Coinflow checkout API.

Requirements

  • Android minSdk 24+
  • Kotlin 1.9+
  • Jetpack Compose

Installation

1// settings.gradle.kts
2dependencyResolutionManagement {
3    repositories {
4        google()
5        mavenCentral()
6    }
7}
8
9// app/build.gradle.kts
10dependencies {
11    implementation("cash.coinflow:coinflow-card-form:0.1.0")
12}

Integration

1

Add the card form composable

Drop CoinflowCardFormView into your Compose layout and pass a CoinflowCardFormController you’ll use to trigger tokenization.

1import androidx.compose.foundation.layout.*
2import androidx.compose.material3.*
3import androidx.compose.runtime.*
4import androidx.compose.ui.Modifier
5import androidx.compose.ui.unit.dp
6import cash.coinflow.cardform.*
7import kotlinx.coroutines.launch
8
9@Composable
10fun PaymentScreen() {
11    val controller = remember { CoinflowCardFormController() }
12    val scope = rememberCoroutineScope()
13
14    Column {
15        CoinflowCardFormView(
16            variant = CardFormVariant.CARD_FORM,
17            merchantId = "your-merchant-id",
18            env = CoinflowEnv.SANDBOX,
19            controller = controller,
20            modifier = Modifier.fillMaxWidth().height(52.dp)
21        )
22
23        Button(onClick = {
24            scope.launch {
25                try {
26                    val response = controller.tokenize()
27                    println("Token: ${response.token}")
28                } catch (e: Exception) {
29                    // surface error to user
30                }
31            }
32        }) {
33            Text("Pay")
34        }
35    }
36}

your-merchant-id is an example placeholder. Use your actual merchant ID from the merchant dashboard, or contact the Coinflow integrations team. Typically read from a BuildConfig field, not hard-coded.

2

Configure the environment

1val env = if (BuildConfig.DEBUG) CoinflowEnv.SANDBOX else CoinflowEnv.PROD
  • CoinflowEnv.SANDBOX — test cards, no real money
  • CoinflowEnv.PROD — live cards, real money
3

Charge the token server-side

controller.tokenize() is a suspend function. It returns a TokenizeResponse:

  • token: String — payment token to send to your backend
  • expMonth: String?, expYear: String? — populated only for variants that collect expiry

Send the token to your server and call Coinflow’s checkout API to charge it. See the Checkout API reference for the full request shape.

Variants

VariantCapturesUse case
CardFormVariant.CARD_FORMNumber, expiry, CVVStandard one-shot capture
CardFormVariant.CARD_NUMBER_FORMNumber + expiryFirst step of a two-step flow
CardFormVariant.CVV_FORMCVV onlyRe-collecting CVV for a card-on-file token

Theming

MerchantTheme styles the rendered form. All fields optional.

1val theme = MerchantTheme(
2    primary = "#165DFB",
3    background = "#ffffff",
4    textColor = "#05092E",
5    ctaColor = "#165DFB",
6    font = "Red Hat Display",
7    style = MerchantStyle.ROUNDED
8)
9
10CoinflowCardFormView(theme = theme, /* ... */)
FieldPurpose
primary, ctaColorAccent / action colors (hex strings)
background, backgroundAccent, backgroundAccent2Form background tones
textColor, textColorAccent, textColorActionInput and label text colors
font, fontSize, fontWeightTypography. font must be available on the device.
styleInput shape: ROUNDED, SHARP, PILL
cardNumberPlaceholder, cvvPlaceholder, expirationPlaceholderOverride input placeholder text
showCardIconToggle the card brand icon (Visa/Mastercard/Amex)

Resources