时间戳

首页 > 解决方案 > 如何将 PayPal 项目数组更改为每个订单？

javascript - 如何将 PayPal 项目数组更改为每个订单？

问题描述

我有以下 JavaScript 在我的网站上加载 PayPal 按钮，我需要更改此代码，以便添加到购物车中的项目也在 PayPal 发票中：

<script src="cart.js"></script>

    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                // This function sets up the details of the transaction, including the amount and line item details.
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: countCartTotal()
                        }
                    }]
                });
            },
            onApprove: function(data, actions) {
                // This function captures the funds from the transaction.
                return actions.order.capture().then(function(details) {
                    // This function shows a transaction success message to your buyer.
                    window.location.href = "orderConfirmed.php"
                    clearCart()
                });
            }
        }).render('#paypal-button-container');
        //This function displays Smart Payment Buttons on your web page.
    </script>

它加载在我的网页底部，“cart.js”保存整个购物车的价值，例如，如果总金额为 20.00 美元，则在 PayPal 窗口中将向用户收取 20.00 美元。我已经在 PayPal 的沙盒环境中测试了这段代码，它可以工作。但它没有给我购物车中的物品。

我从这里的用户那里得到了以下代码：

"purchase_units": [{
      "description": "Stuff",
      "amount": {
        "value": "20.00",
        "currency_code": "USD",
        "breakdown": {
          "item_total": {
            "currency_code": "USD",
            "value": "20.00"
          },
        }
      },
      "items": [
        {
          "unit_amount": {
            "currency_code": "USD",
            "value": "10.00"
          },
          "quantity": "1",
          "name": "Item 1",
        },
        {
          "unit_amount": {
            "currency_code": "USD",
            "value": "10.00"
          },
          "quantity": "1",
          "name": "Item 2",
        },
      ],
    }
  ]

所以我将它插入到我的脚本文件中，使它看起来像这样：

 <script src="cart.js"></script>

    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                // This function sets up the details of the transaction, including the amount and line item details.
                return actions.order.create({
                    "purchase_units": [{
                        "description": "Stuff",
                        "amount": {
                            "value": "20.00",
                            "currency_code": "USD",
                            "breakdown": {
                                "item_total": {
                                    "currency_code": "USD",
                                    "value": "20.00"
                                },
                            }
                        },
                        "items": [
                            {
                                "unit_amount": {
                                    "currency_code": "USD",
                                    "value": "10.00"
                                },
                                "quantity": "1",
                                "name": "Item 1",
                            },
                            {
                                "unit_amount": {
                                    "currency_code": "USD",
                                    "value": "10.00"
                                },
                                "quantity": "1",
                                "name": "Item 2",
                            },
                        ],
                    }
                    ]
                });
            },
            onApprove: function(data, actions) {
                // This function captures the funds from the transaction.
                return actions.order.capture().then(function(details) {
                    // This function shows a transaction success message to your buyer.
                    window.location.href = "orderConfirmed.php"
                    clearCart()
                });
            }
        }).render('#paypal-button-container');
        //This function displays Smart Payment Buttons on your web page.
    </script>

这适用于输入的数据，但我需要根据提交的任何订单更改输入的数据。一个项目的例子是：

<div class="mm-quarter">
    <img class="product__image" src="images/image.jpg" alt="Product" style="width:100%">
    <h2 class="product__name">Mobile Trigger Attachments</h2>
    <h3 class="product__price">10.00</h3>
    <button class="btn btn--primary" data-action="ADD_TO_CART">Add To Cart</button>
</div>

在“cart.js”中，我使用以下几行来引用产品名称、价格和数量：

addToCartButtonsDOM.forEach(addToCartButtonDOM => {
    const productDOM = addToCartButtonDOM.parentNode;

    // this function get the name of the item for the cart
    if (productDOM.querySelector('.product__name').innerText === product.name) {
        handleActionButtons(addToCartButtonDOM, product);
    }
});


// this function gets the name, image, price, and quantity
addToCartButtonsDOM.forEach(addToCartButtonDOM => {
    addToCartButtonDOM.addEventListener('click', () => {
        const productDOM = addToCartButtonDOM.parentNode;
        const product = {
            image: productDOM.querySelector('.product__image').getAttribute('src'),
            name: productDOM.querySelector('.product__name').innerText,
            price: productDOM.querySelector('.product__price').innerText,
            quantity: 1,
        };

        const isInCart = (cart.filter(cartItem => (cartItem.name === product.name)).length > 0);

        if (!isInCart) {
            insertItemToDOM(product);
            cart.push(product);
            saveCart();
            handleActionButtons(addToCartButtonDOM, product);
        }
    });
});

另外，当我添加countCartTotal()两个“值：”时它停止工作了吗？

给我答案的用户说这是直截了当的 JS，但我的知识有限。

标签： javascripthtmlpaypal

解决方案

另外，当我将 countCartTotal() 添加到两个“值：”时，它会停止工作吗？

由于您使用的是逐项细分，因此有这 2 个值加上与您拥有的项目一样多的值。您将需要计算和更新所有内容的值，并且它们必须以数学方式相加。如果您更改总数而不使项目加起来等于总数，它确实会停止工作。

我建议的方法是创建一个新函数getPurchaseUnits()或类似函数。

这应该返回一个与您硬编码的数组非常相似的数组purchase_units，但所有项目和正确的总数都已更新。当然，编写这种类型的代码需要一定程度的编程知识，因此您可以借此机会学习一些 Javascript——就像家庭作业问题一样。

一旦你有了这样一个返回你需要的数组的函数，你就可以把它放在里面，

return actions.order.create({
    getPurchaseUnits()
});

推荐阅读