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.

Package: cash.coinflow:coinflow-card-form
Distribution: Maven Central
Current version: 0.2.0

Requirements

Android minSdk 24+
Kotlin 1.9+
Jetpack Compose

Installation

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

Integration

Add the card form composable

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

1 import androidx.compose.foundation.layout.*
2 import androidx.compose.material3.*
3 import androidx.compose.runtime.*
4 import androidx.compose.ui.Modifier
5 import androidx.compose.ui.unit.dp
6 import cash.coinflow.cardform.*
7 import kotlinx.coroutines.launch
8 
9 @Composable
10 fun 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.

Configure the environment

1 val env = if (BuildConfig.DEBUG) CoinflowEnv.SANDBOX else CoinflowEnv.PROD

CoinflowEnv.SANDBOX — test cards, no real money
CoinflowEnv.PROD — live cards, real money

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

Variant	Captures	Use case
`CardFormVariant.CARD_FORM`	Number, expiry, CVV	Standard one-shot capture
`CardFormVariant.CARD_NUMBER_FORM`	Number + expiry	First step of a two-step flow
`CardFormVariant.CVV_FORM`	CVV only	Re-collecting CVV for a card-on-file token

Theming

MerchantTheme styles the rendered form. All fields optional.

1 val 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 
10 CoinflowCardFormView(theme = theme, /* ... */)

All theme fields

Field	Purpose
`primary`, `ctaColor`	Accent / action colors (hex strings)
`background`, `backgroundAccent`, `backgroundAccent2`	Form background tones
`textColor`, `textColorAccent`, `textColorAction`	Input and label text colors
`font`, `fontSize`, `fontWeight`	Typography. `font` must be available on the device.
`style`	Input shape: `ROUNDED`, `SHARP`, `PILL`
`cardNumberPlaceholder`, `cvvPlaceholder`, `expirationPlaceholder`	Override input placeholder text
`showCardIcon`	Toggle the card brand icon (Visa/Mastercard/Amex)

Dynamic height

The hosted form reflows responsively — at narrow widths the inputs wrap to multiple rows. To keep your Compose container fitted, listen for height changes via the onHeightChange callback:

1 var formHeight by remember { mutableStateOf(52.dp) }
2 
3 CoinflowCardFormView(
4     merchantId = "your-merchant-id",
5     controller = controller,
6     modifier = Modifier
7         .fillMaxWidth()
8         .height(formHeight),
9     onHeightChange = { formHeight = it.dp }
10 )

The callback receives the rendered content height in CSS pixels (1:1 with dp at default WebView density). Without this wiring the form may be clipped if it wraps.

Resources

Source: github.com/coinflow-labs-us/coinflow-android
Maven Central: cash.coinflow:coinflow-card-form
License: Apache 2.0
Checkout API: Card Checkout endpoint

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

1	import androidx.compose.foundation.layout.*
2	import androidx.compose.material3.*
3	import androidx.compose.runtime.*
4	import androidx.compose.ui.Modifier
5	import androidx.compose.ui.unit.dp
6	import cash.coinflow.cardform.*
7	import kotlinx.coroutines.launch
8
9	@Composable
10	fun 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	}

1	val 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
10	CoinflowCardFormView(theme = theme, /* ... */)

1	var formHeight by remember { mutableStateOf(52.dp) }
2
3	CoinflowCardFormView(
4	merchantId = "your-merchant-id",
5	controller = controller,
6	modifier = Modifier
7	.fillMaxWidth()
8	.height(formHeight),
9	onHeightChange = { formHeight = it.dp }
10	)