React应用中PayPal Checkout显示金额与购物车总额不符问题

你使用的@paypal/react-paypal-js是新版PayPal React组件，它不再支持直接通过total属性传递金额，旧的total属性会被组件忽略，导致PayPal始终显示默认的$0.01金额。新版组件要求通过createOrder回调函数动态设置订单金额。

修改PayPalButton组件代码，改用createOrder函数指定订单金额：

import React from "react";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default class PayPalButton extends React.Component {
  render() {
    const onApprove = (data, actions) => {
      return actions.order.capture().then((payment) => {
        console.log("The payment was succeeded!", payment);
        this.props.tranSuccess(payment);
      });
    };

    const onCancel = (data) => {
      console.log("The payment was cancelled!", data);
    };

    const onError = (err) => {
      console.log("Error!", err);
    };

    // 动态创建订单并设置金额
    const createOrder = (data, actions) => {
      return actions.order.create({
        purchase_units: [
          {
            amount: {
              value: this.props.total.toFixed(2), // 转换为两位小数的字符串，符合PayPal格式要求
              currency_code: "USD"
            }
          }
        ]
      });
    };

    const env = "sandbox"; // 生产环境改为'production'
  
    const client = {
      sandbox:
        "ARhnfWu_QrcGQa-PdvaY1RVriEmqGiSkfEWf-plauZQpQN_gyxaLjH9RXOhdQw7fxxxxxxxxxxxx",
      production: "YOUR-PRODUCTION-APP-ID",
    };

    const style = {
      size: "small",
      color: "blue",
      shape: "rect",
      label: "checkout",
      tagline: false,
    };

    return (
      <PayPalScriptProvider
        options={{
          "client-id": "ARhnfWu_QrcGQa-PdvaY1RVriEmqGiSkfEWf-plauZQpQN_gyxaLjH9RXOhdQw7fxxxxxxxxxxxx",
          "currency": "USD"
        }}
      >
        <PayPalButtons
          env={env}
          client={client}
          commit={true}
          createOrder={createOrder}
          onApprove={onApprove}
          onCancel={onCancel}
          onError={onError}
          style={style}
        />
      </PayPalScriptProvider>
    );
  }
}

• 确保total是合法的数值类型，通过toFixed(2)转换为两位小数的字符串，避免PayPal格式校验报错
• 新版组件中支付成功的回调是onApprove，而非旧版的onSuccess，需要替换以保证支付完成后能正确触发后续逻辑
• Cart组件中计算total的逻辑是正确的，无需修改，只要PayPal组件能正确接收并使用这个值即可

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