使用Stripe.js的PaymentElement与AddressElement时姓名输入框重复问题

当启用automatic_payment_methods: { enabled: true }并同时使用AddressElement时，部分支付方式（如iDeal）的PaymentElement会自动渲染姓名输入框，导致和AddressElement中的姓名框重复。这个问题可以通过以下方式解决：

1. 隐藏PaymentElement中的姓名输入框 #

在PaymentElement的配置选项中，强制隐藏姓名字段：

修改你的结账表单代码，给PaymentElement添加options配置：

<form id="payment-form" onSubmit={handleSubmit}>
    <AddressElement options={{mode: 'billing'}}/>
    <!-- 添加fields配置隐藏姓名 -->
    <PaymentElement options={{ fields: { billingDetails: { name: 'never' } } }} />
    <button disabled={isProcessing} id="submit">
        <span id="button-text">
            {isProcessing ? "Processing..." : "Pay now"}
        </span>
    </button>
    {message && <div id="payment-message">{message}</div>}
</form>

name: 'never'是Stripe官方支持的配置项，作用是强制不渲染姓名输入框，不会影响支付流程的合法性。

2. 传递AddressElement收集的姓名到支付确认 #

需要在提交支付时，把AddressElement中收集的姓名传递给Stripe的支付确认接口，确保PaymentIntent能获取到正确的账单姓名：

假设你的handleSubmit函数逻辑如下，修改它添加billing_details参数：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        // 获取AddressElement中的姓名
        const addressElement = elements.getElement('address');
        const billingName = addressElement.value.name;

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: 'https://你的回调地址.com',
                billing_details: {
                    name: billingName
                }
            }
        });

        if (error) {
            // 处理支付错误
            setMessage(error.message);
        } else {
            // 支付成功后的逻辑
        }
    } catch (err) {
        setMessage(err.message);
    }
};

补充说明 #

这种方案适用于你已经通过AddressElement收集了完整账单信息的场景，既解决了输入框重复的问题，又保证了支付流程所需的信息完整。如果后续需要调整其他账单字段的显示逻辑，也可以通过fields.billingDetails下的其他字段（如email、phone）进行配置，可选值包括'auto'（默认，根据支付方式自动显示）、'always'（强制显示）、'never'（强制隐藏）。

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