React JS 中的 Paypal 集成

Question

我正在尝试将贝宝支付整合到我的电子商务应用程序中。到目前为止，付款仅适用于 createOrder 函数中的预定义金额。我有一个值（作为 prop 传递），我想将其设置为付款金额，但我没能弄明白。

下面是我的代码

     function paymentForm({item}) {

    
    const createOrder = (data, actions) =>{
        return actions.order.create({
           purchase_units: [
             {
                amount: {
                   value: "1",
                },
             },
          ], 
      });
    };
    
    
    
    return (
    <>
        {/*item.totalPrice: is the value I want to set the payment amount to(passed as prop) */}

        <p> Subtotal: {item.totalPrice} </p>
    
         <PayPalButton className="paypal"
           createOrder={(data, actions) => createOrder(data, actions)}
           onApprove={(data, actions) => onApprove(data, actions)}
          />
    
    </>
   

  )

    }

我所做的是直接将值设置为 {item.totalPrice} 但这不起作用。

感谢您的提前帮助:)

Answer 1

这是一个例子...

() => {
    const [amount, setAmount] = useState(2);
    const [orderID, setOrderID] = useState(false);

    function createOrder(data, actions) {
        return actions.order
            .create({
                purchase_units: [
                    {
                        amount: {
                            value: amount,
                        },
                    },
                ],
            })
            .then((orderID) => {
                setOrderID(orderID);
                return orderID;
            });
    }

    function onChange({ target: { value } }) {
        setAmount(value);
        setOrderID(false);
    }

    return (
        <>
            <label htmlor="amount">Order Amount: </label>
            <select onChange={onChange} name="amount" id="amount">
                <option value="2">.00</option>
                <option value="4">.00</option>
                <option value="6">.00</option>
            </select>
            <p>Order ID: {orderID ? orderID : "unknown"}</p>

            <PayPalButtons createOrder={createOrder} forceReRender={[amount]} />
        </>
    );
}

来源：https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--dynamic-amount

React JS 中的 Paypal 集成

Paypal Integration in React JS

paypal

reactjs