ReactJs中集成PayPal Checkout：添加多金额支付选项

我在React项目中使用@paypal/react-paypal-js集成PayPal结账功能，目前按钮能正常显示，但金额是硬编码的$2，无法实现下拉菜单选择金额后同步到PayPal结账弹窗的需求。需要让用户选择的金额在点击结账按钮后正确显示在PayPal弹窗里。

解决方案步骤 #

• 在父组件Payments中使用useState管理选中的金额状态，替换硬编码的amount
• 添加下拉菜单组件，绑定状态更新事件，让用户可以选择不同金额
• 将金额状态作为props传递给ButtonWrapper组件，确保PayPal按钮能获取最新金额
• 确保PayPalButtons的forceReRender数组包含amount，保证金额变化时按钮重新渲染

修改后的完整代码 #

import { useEffect, useState } from "react";
import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";

const currency = "USD";
const style = {"layout":"vertical"};

const ButtonWrapper = ({ currency, showSpinner, amount }) => {
    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();

    useEffect(() => {
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: currency,
            },
        });
    }, [currency, showSpinner]);

    return (
        <>
            { (showSpinner && isPending) && <div className="spinner" /> }
            <PayPalButtons
                style={style}
                disabled={false}
                forceReRender={[amount, currency, style]}
                fundingSource={undefined}
                createOrder={(data, actions) => {
                    return actions.order.create({
                        purchase_units: [
                            {
                                amount: {
                                    currency_code: currency,
                                    value: amount,
                                },
                            },
                        ],
                    });
                }}
                onApprove={function (data, actions) {
                    return actions.order.capture().then(function(){
                        alert("交易已完成")
                    });
                }}
            />
        </>
    );
}

export default function Payments() {
    // 用useState管理选中的金额，默认值设为2
    const [selectedAmount, setSelectedAmount] = useState("2");

    // 金额选项列表，可根据需求扩展
    const amountOptions = [
        { value: "2", label: "$2" },
        { value: "5", label: "$5" },
        { value: "10", label: "$10" },
        { value: "20", label: "$20" }
    ];

    return (
        <div style={{ maxWidth: "750px", minHeight: "200px", padding: "20px" }}>
            {/* 金额选择下拉菜单 */}
            <div style={{ marginBottom: "20px" }}>
                <label>选择支付金额：</label>
                <select 
                    value={selectedAmount}
                    onChange={(e) => setSelectedAmount(e.target.value)}
                    style={{ padding: "8px", marginLeft: "10px" }}
                >
                    {amountOptions.map(opt => (
                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                    ))}
                </select>
            </div>

            <PayPalScriptProvider
                options={{
                    'client-id': process.env.NEXT_PUBLIC_CLIENT_ID,
                    "disable-funding": "paylater",
                    components: "buttons",
                    currency: "USD"
                }}
            >
                <ButtonWrapper
                    currency={currency}
                    showSpinner={false}
                    amount={selectedAmount}
                />
            </PayPalScriptProvider>

            {/* 原问题截图 */}
            <div style={{ marginTop: "30px" }}>
                <h4>原问题截图：</h4>
                <p>PayPal按钮显示硬编码金额：</p>
                <img src="https://i.sstatic.net/elBps.png" alt="PayPal按钮显示硬编码金额" style={{ maxWidth: "400px" }} />
                <p>PayPal弹窗显示固定金额：</p>
                <img src="https://i.sstatic.net/Fj9HL.png" alt="PayPal弹窗显示固定金额" style={{ maxWidth: "400px" }} />
            </div>
        </div>
    );
}

关键修改说明 #

• 在Payments组件中新增selectedAmount状态，绑定下拉菜单的onChange事件来更新选中金额
• 将selectedAmount作为props传递给ButtonWrapper，替代原来的硬编码amount
• PayPalButtons的createOrder方法中使用传入的amount参数，确保创建订单时用最新选中的金额
• 保留forceReRender包含amount，确保金额变化时按钮重新渲染，避免缓存旧值

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