反应js中的Paypal动态值答案

【问题标题】：Paypal dynamic value in react js反应js中的Paypal动态值
【发布时间】：2022-01-16 07:58:34
【问题描述】：

我的项目需要帮助我想在 PayPal 支付流程中添加一个动态选项。（将值更改为动态）

默认选项是值：'0.01'，我项目中的动态支付是cart.subtotal.formatted_with_symbol

我尝试添加 [const {amount} = cart.subtotal.formatted_with_symbol;] 这一行以尝试将 value 更改为 value: amount 但这对我不起作用。

感谢帮助

import React from 'react'
import ReactDOM from "react-dom"
import CartItem from './CartItem';

const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });

// paypal payment buttons
    const createOrder = (data, actions) => {
        const {amount} = cart.subtotal.formatted_with_symbol;
        return actions.order.create({
          purchase_units: [
            {
              amount: {
                  value: amount,
              },
            },
          ],
        });
      }

      const onApprove = (data, actions) => {
        return actions.order.capture();
      }
      
onst FilledCart = () => (
        <>
            <div>
                {cart.line_items.map((item) => (
                    <div key={item.id}>
                        <CartItem item={item} handleUpdateCratQty={handleUpdateCratQty} handleRemoveFromCart={handleRemoveFromCart} />
                    </div>
                ))}
            </div>
            <div>
                <div>
                    <button onClick={handleEmptyCart}>EmptyCart</button>
                </div>
            </div>
        </>
    );

【问题讨论】：

标签： javascript reactjs paypal frontend paypal-sandbox

【解决方案1】：

react-paypal-js documentation 很简单...

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

// This values are the props in the UI
const amount = "2";
const currency = "USD";
const style = {"layout":"vertical"};

// Custom component to wrap the PayPalButtons and handle currency changes
const ButtonWrapper = ({ currency, showSpinner }) => {
    // usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
    // This is the main reason to wrap the PayPalButtons in a new component
    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();

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

【讨论】：

【解决方案2】：

我仍然不明白你的问题，但如果你想改变你的价值，也许你可以尝试使用 react hook (useState)，或者你可以提供对象 cart.subtotal.formatted_with_symbol 内部的内容？

【讨论】：

我正在使用 Commerce.js，所以这个 cart.subtotal.formatted_with_symbol 行来自 Commerce.js，这是购物车中所有产品的小计。但我不知道如何将 PayPal 中的值更改为动态的（我的意思是使用相同的小计）。