将数组的所有项目放入 Paypal 订单函数

问题描述 投票:0回答:1

我在 React 中有一个项目,我想将数组的每个项目放入 Paypal 订单函数中。 下面是文件。我怎样才能做到这一点?

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

    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) => {
                    // TODO: Make this object be build with cart items including every single item
                    return actions.order.create({
                        purchase_units: [
                            {
                                amount: {
                                    currency_code: Currency.EURO,
                                    value: "1.99",
                                },}, ], }); }}
                onApprove={onApprove}
            />
        </PayPalScriptProvider>
    </>
}

我试图将每个项目映射到一个数组中,然后像这样将其放入 creatyOrder 函数中

<>
                <PayPalButtons style={{layout: "horizontal"}}
                               createOrder={(_data, actions) => {
                                   const items = cart.map((item) => ({
                                       name: item.name,
                                       quantity: item.quantity.toString(),
                                       unit_amount: {
                                           currency_code: Currency.EURO,
                                           value: item.price.toFixed(2).toString()
                                       },
                                   }));
                                   return actions.order.create({
                                       purchase_units: [
                                           {
                                               items:  items,
                                               amount: {
                                                   currency_code: Currency.EURO,
                                                   value: cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2).toString(),
                                                   breakdown: {
                                                       item_total: {
                                                           currency_code: Currency.EURO,
                                                           value: "4.98"
                                                       } } },}, ], }); }}
                               onApprove={onApprove}
                />
            </PayPalScriptProvider>
        </>```

But unfortunatly the order windows closes immediately after pressing the button and i cat this error in the console.
 [enter image description here](https://i.stack.imgur.com/CEwgK.png)

I really dont know whats the problem here. Does anyone know what the error means or how i can solve this?
Paypal seems to be a bit special when it comes to make own Requests.
reactjs typescript paypal paypal-sandbox paypal-rest-sdk
1个回答
0
投票

actions.order.create 和 actions.order.capture 已弃用,不应在任何新集成中使用。特定于 React 的文档可能尚未更新以反映这一点,但您可以在 standard integration guide 的 JS/node 示例中看到这些功能不再使用(并且永远不应该使用)。

相反,使用 v2/checkout/orders API 从后端/服务器创建和捕获 PayPal 订单。

我不知道前端部分使用 React 的当前示例(编辑:啊 this 集成构建器 中的新示例可能),但是 here 你可以找到一个强大的 Typescript 示例(纯 JS 前端)您可以与现有的 React 代码集成/配对(据我所知,它使用官方的@paypal/react-paypal-js)

© www.soinside.com 2019 - 2024. All rights reserved.