React集成Stripe实现网银/UPI/卡支付及CardElement布局调整问询

你当前使用的是Stripe单功能的CardElement，仅支持卡类支付。如果要一次性覆盖你需要的四类支付方式，推荐替换为Payment Element，它会自动根据你的商户地区、用户所在地、订单金额自动适配可用支付方式，无需单独为UPI、网银做单独适配开发。
对接注意事项：

• 需确保你的Stripe商户账户开通了对应地区的UPI、网银支付权限，否则对应支付方式不会展示
• 服务端创建PaymentIntent时，在配置参数中添加payment_method_types字段，传入你需要的支付方式标识：['card', 'upi', 'netbanking']，借记卡属于卡类支付，包含在card类型中无需额外配置
• 前端移除CardElement相关代码，替换为PaymentElement组件，提交逻辑调整为调用stripe.confirmPayment方法完成支付即可

默认的合并CardElement不支持拆分布局和自定义标签，你需要将其替换为三个独立的拆分组件：CardNumberElement、CardExpiryElement、CardCvcElement，即可自由控制布局、添加自定义标签。
修改后的CheckOutForm组件代码示例：

import React, { useState } from 'react'
import { CardNumberElement, CardExpiryElement, CardCvcElement, useElements, useStripe } from '@stripe/react-stripe-js'
import axios from 'axios'

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "#c4f0ff",
            color: "#fff",
            fontWeight: 500,
            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
            fontSize: "16px",
            fontSmoothing: "antialiased",
            ":-webkit-autofill": { color: "#fce883" },
            "::placeholder": { color: "#87bbfd" }
        },
        invalid: {
            iconColor: "#ffc7ee",
            color: "#ffc7ee"
        }
    }
}

export default function MyCheckoutForm() {
    const [success, setSuccess] = useState(false)
    const stripe = useStripe()
    const elements = useElements()

    const handleSubmit = async (e) => {
        e.preventDefault()

        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardNumberElement)
        })

        if (!error) {
            try {
                const { id } = paymentMethod
                const response = await axios.post("http://localhost:3000/payment", {
                    amount: 1000,
                    id
                })

                if (response.data.success) {
                    console.log("Payment successful")
                    setSuccess(true)
                }
            } catch (error) {
                console.log("Error: ", error)
            }    
        } else {
            console.log("error", error.message)
        }
    }
    
    return (
        <>
            {!success ? 
                <form onSubmit={handleSubmit}>
                    <fieldset className="FormGroup">
                        {/* 卡号单独一行 */}
                        <div className="FormRow">
                            <label>卡号</label>
                            <CardNumberElement options={CARD_OPTIONS} />
                        </div>
                        {/* 有效期和CVV同一行 */}
                        <div className="FormRow" style={{display: 'flex', gap: '20px', marginTop: '12px'}}>
                            <div style={{flex: 1}}>
                                <label>有效期</label>
                                <CardExpiryElement options={CARD_OPTIONS} />
                            </div>
                            <div style={{flex: 1}}>
                                <label>CVV</label>
                                <CardCvcElement options={CARD_OPTIONS} />
                            </div>
                        </div>
                    </fieldset>
                    <button className="Stripebutton"> Pay</button>
                </form>
            :
                <div>
                    <h2>You just bought a sweet </h2>
                </div>
            }
        </>
    )
}

你可以根据需求自定义对应样式类的CSS规则，调整标签样式、输入框间距、行宽等细节，完全匹配你的设计要求。

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