Jetpack Compose集成Stripe付款表单相关技术咨询

你的判断正确：Stripe暂未推出Jetpack Compose专属预构建付款组件 #

截至目前，Stripe官方并未发布针对Jetpack Compose的原生预构建付款表单组件，该需求自2021年起就被纳入开发者反馈列表，但官方尚未公布明确的上线时间。你可以通过Stripe官方开发者博客或更新日志关注后续动态。

利用Stripe原生Android SDK实现Compose付款表单的两种方案 #

方案1：在Compose中嵌入Stripe官方View组件（推荐）

Stripe Android SDK提供了现成的CardMultilineWidget卡片输入组件，可通过Compose的AndroidView将其嵌入界面，直接复用官方的预构建UI和验证逻辑：

1. 引入Stripe Android SDK依赖（替换为最新版本）

dependencies {
    implementation 'com.stripe:stripe-android:<latest-version>'
}

2. 在Compose中嵌入卡片输入组件：

@Composable
fun StripeCardInputForm(
    onCardInputComplete: (PaymentMethodCreateParams) -> Unit
) {
    AndroidView(
        factory = { context ->
            CardMultilineWidget(context).apply {
                setCardInputListener(object : CardInputListener {
                    override fun onCardComplete() {
                        cardWidget.card?.let { card ->
                            val cardParams = PaymentMethodCreateParams.Card.Builder()
                                .setNumber(card.number)
                                .setExpiryMonth(card.expMonth)
                                .setExpiryYear(card.expYear)
                                .setCvc(card.cvc)
                                .build()
                            onCardInputComplete(PaymentMethodCreateParams.create(cardParams))
                        }
                    }

                    override fun onExpirationComplete() {}
                    override fun onCvcComplete() {}
                })
            }
        }
    )
}

3. 结合你已有的PaymentLauncher完成完整付款流程：

@Composable
fun PaymentScreen() {
    val stripe = Stripe(LocalContext.current, "你的发布密钥")
    val paymentLauncher = PaymentLauncher.rememberLauncher(
        onResult = { result ->
            when (result) {
                is PaymentResult.Success -> {/* 处理付款成功逻辑 */}
                is PaymentResult.Failure -> {/* 处理付款失败逻辑 */}
            }
        }
    )

    var paymentMethodParams by remember { mutableStateOf<PaymentMethodCreateParams?>(null) }

    Column(modifier = Modifier.padding(16.dp)) {
        StripeCardInputForm { params ->
            paymentMethodParams = params
        }

        Button(
            onClick = {
                paymentMethodParams?.let { params ->
                    val clientSecret = "你的Payment Intent客户端密钥"
                    paymentLauncher.launch(
                        PaymentIntentConfirmParams.createWithPaymentMethodCreateParams(
                            params,
                            clientSecret
                        )
                    )
                }
            },
            enabled = paymentMethodParams != null,
            modifier = Modifier.fillMaxWidth().padding(top = 24.dp)
        ) {
            Text("确认付款")
        }
    }
}

方案2：自定义Compose付款表单组件

如果需要完全自定义UI风格，可以基于Compose的TextField构建卡片输入界面，再调用Stripe API处理卡片信息：

1. 实现自定义卡片输入UI：

@Composable
fun CustomCardInputForm(
    onCardValidated: (Card) -> Unit
) {
    var cardNumber by remember { mutableStateOf("") }
    var expMonth by remember { mutableStateOf("") }
    var expYear by remember { mutableStateOf("") }
    var cvc by remember { mutableStateOf("") }
    var isCardValid by remember { mutableStateOf(false) }

    LaunchedEffect(cardNumber, expMonth, expYear, cvc) {
        val card = runCatching { Card.create(cardNumber, expMonth, expYear, cvc) }.getOrNull()
        isCardValid = card?.isValid ?: false
        if (isCardValid && card != null) {
            onCardValidated(card)
        }
    }

    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        TextField(
            value = cardNumber,
            onValueChange = { cardNumber = it },
            label = { Text("银行卡号") },
            visualTransformation = CardNumberVisualTransformation()
        )
        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            TextField(
                value = expMonth,
                onValueChange = { expMonth = it.take(2) },
                label = { Text("到期月") },
                modifier = Modifier.weight(1f)
            )
            TextField(
                value = expYear,
                onValueChange = { expYear = it.take(2) },
                label = { Text("到期年") },
                modifier = Modifier.weight(1f)
            )
        }
        TextField(
            value = cvc,
            onValueChange = { cvc = it.take(4) },
            label = { Text("CVC码") }
        )
    }
}

2. 验证通过后创建PaymentMethodCreateParams，再调用PaymentLauncher完成付款，流程与方案1一致。

内容的提问来源于stack exchange，提问作者elishapiro