React项目中PayPal订单批量添加购物车商品报错求助

错误原因 #

1. 金额校验不匹配：你代码中breakdown.item_total.value是硬编码的固定值"4.98"，但实际订单总金额是通过cart.reduce计算的动态值。PayPal的订单创建接口会严格校验amount.value与breakdown.item_total.value的一致性，两者不匹配会直接触发接口错误，导致订单窗口关闭。
2. 空购物车未处理：如果购物车为空，生成的items数组为空且总金额为0，这种情况也会触发PayPal的接口校验错误。

解决步骤 #

• 同步金额字段：将breakdown.item_total.value改为和amount.value一致的动态计算逻辑，确保两个金额完全匹配。
• 拦截空购物车：在创建订单前判断购物车是否为空，为空时阻止订单创建并提示用户。
• 校验商品字段：确保每个商品的quantity是大于0的整数字符串，unit_amount.value是标准的两位小数格式字符串，符合PayPal接口要求。

修正后的完整代码 #

export default function Cart(): JSX.Element {
    const [cart, setCart] = useState<Cart>([]);

    // 封装总金额计算逻辑
    const getOrderTotal = () => {
        return cart.reduce((total, item) => total + item.price * item.quantity, 0);
    };

    return <>
        <ShoppingCart onChange={setCart} cart={cart} />
        <PayPalScriptProvider options={{
            "client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || "",
            currency: Currency.EURO
        }}>
            <PayPalButtons 
                style={{ layout: "horizontal" }}
                createOrder={(_data, actions) => {
                    // 拦截空购物车
                    if (cart.length === 0) {
                        alert("购物车为空，请先添加商品");
                        return Promise.reject("Empty cart");
                    }

                    const items = cart.map((item) => ({
                        name: item.name,
                        quantity: item.quantity.toString(),
                        unit_amount: {
                            currency_code: Currency.EURO,
                            value: item.price.toFixed(2).toString()
                        },
                    }));

                    const totalAmount = getOrderTotal();
                    const totalAmountStr = totalAmount.toFixed(2).toString();

                    return actions.order.create({
                        purchase_units: [
                            {
                                items: items,
                                amount: {
                                    currency_code: Currency.EURO,
                                    value: totalAmountStr,
                                    breakdown: {
                                        item_total: {
                                            currency_code: Currency.EURO,
                                            value: totalAmountStr // 与总金额保持一致
                                        }
                                    }
                                },
                            },
                        ],
                    });
                }}
                onApprove={onApprove}
            />
        </PayPalScriptProvider>
    </>
}

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