如何在Stripe React中使用Elements组件更新支付金额？

你的问题核心在于Elements组件初始化后，不会自动感知clientSecret的变化——即便你获取了新的clientSecret，旧的PaymentElement仍绑定着之前的Payment Intent，导致金额无法同步更新。以下是两种可行的解决方式：

方法一：给Elements组件添加key属性（推荐） #

通过将clientSecret作为Elements的key属性值，每当clientSecret更新时，React会自动重新挂载Elements组件，从而加载新的Payment Intent并同步显示最新金额。

修改你的返回代码部分：

return (
    <div className="container mt-5">
        <div className="d-flex justify-content-end mb-3"></div>
        {stripePromise && clientSecret && (
            <Elements 
                stripe={stripePromise} 
                options={{ clientSecret }}
                key={clientSecret} {/* 添加该行代码 */}
            >
                <CheckoutForm clientSecrett={clientSecret} />
            </Elements>
        )}
    </div>
);

方法二：使用Stripe API更新Payment Intent #

若你不想重新挂载组件，可以调用stripe.updatePaymentIntent直接更新现有Payment Intent的金额，但这种方式需要后端配合修改Payment Intent，且受Stripe的流程限制（部分支付阶段无法更新金额）。

在CheckoutForm组件中添加如下逻辑：

import { useStripe } from '@stripe/react-stripe-js';
import { useState, useEffect } from 'react';

function CheckoutForm({ clientSecrett }) {
    const stripe = useStripe();
    const [currentSecret, setCurrentSecret] = useState(clientSecrett);
    // 假设新金额从redux或props传入
    const newAmountInCents = useSelector(state => state.cart.grandTotal * 100);

    useEffect(() => {
        if (stripe && clientSecrett !== currentSecret) {
            const updatePaymentIntent = async () => {
                // 先调用后端接口更新Payment Intent的金额
                const response = await fetch('/api/checkout/update-payment-intent', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        paymentIntentId: clientSecrett.split('_secret_')[0],
                        amount: Math.round(newAmountInCents)
                    })
                });
                const data = await response.json();
                
                // 更新前端Payment Intent
                await stripe.updatePaymentIntent(clientSecrett, {
                    amount: data.amount
                });
                setCurrentSecret(clientSecrett);
            };
            updatePaymentIntent();
        }
    }, [stripe, clientSecrett, currentSecret, newAmountInCents]);

    // 组件其余代码...
}

对比来看，方法一实现更简单、兼容性更好，无需额外后端逻辑，推荐优先使用。

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