React js中的Paypal动态值

Question

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

默认选项是value: '0.01' 我项目中的动态支付是cart.subtotal.formatted_with_symbol

我尝试添加 [const {amount} = cart.subtotal.formatted_with_symbol;] 这一行以尝试将值更改为 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>
        </>
    );

Answer 1

我仍然不明白你的问题，但如果你想改变你的价值，也许你可以尝试使用反应钩子（useState），或者你可以提供对象内部的内容 cart.subtotal.formatted_with_symbol ?

Answer 2

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]);

React js中的Paypal动态值

Paypal dynamic value in react js

javascript

frontend

paypal

paypal-sandbox

reactjs