如何从函数中 return 数组以传递给 paypal 以获取多个项目详细信息

Question

我创建了一个客户端代码，允许用户从页面快速结账。

我希望发送多项商品详细信息和订单说明。以下是代码

 

<script>
//Pull HTML elements and store as JS variables
let pp_div = document.querySelector("#paypal-button-container");
let input_form = document.querySelector("#input_form");
let input = document.querySelector("#input");

$('input[type="checkbox"]').change(function(){
            var totalprice = 0;
            $('input[type="checkbox"]:checked').each(function(){
                        totalprice= totalprice + parseInt($(this).val());
                        return totalprice;
                        });
                        $('#Total').val(totalprice);
                });
let total = document.querySelector("#Total");

        
$('input[type="checkbox"]').change(function(){
            let paypalItem = [];
            $('input[type="checkbox"]:checked').each(function(){
            
                    //let currency = "USD";
                    let quantity = 1;
                    let price = $(this).val(); // price of item taken from checkbox value attribute
                    let name = $(`label[for="${price}"]`).text(); // name of item as per price of item
                    
                    paypalItem.push({"unit_amount": {"currency_code": "USD","value": price},"quantity": quantity,"name": name});
                    this.paypalItem = paypalItem;
                    
                    return paypalItem;
                  });

                });
                
console.log(paypalItem);
    



paypal
    .Buttons({
        //Allows you to style the Smart Payment Buttons
        style: {
            shape: "rect",
            color: "gold",
            layout: "vertical",
            label: "paypal"
        },
        onInit: function (data, actions) {
            // Disable the buttons
            actions.disable();
            // Listen for changes from the form
            input_form.addEventListener("change", function (event) {
                // Enable or disable the button when condition is met or fails
                if (
                    input.value &&
                    total.value
                )
                    actions.enable();
            });
        },
        // onClick is called when the button is clicked
        onClick: function () {
            // Show a validation error if the condition is not met
            if (!input.value) alert(`Please enter your name for Input!`);
            else if (!total.value) alert("Please select a option");
            
        },
        onError: function (err) {
            // Alert customer if there is an error
            alert("There was an error! \n" + err);
        },
        
        createOrder: function (data, actions) {
        
        
            
            //Creates the order
            return actions.order.create({
                application_context: {
                    //Disables shipping information
                    shipping_preference: "NO_SHIPPING"
                },
                purchase_units: [
                    {
                     
                    description: 'input.value',
            
                        amount: {
                          currency_code: "USD",
                          value: total.value,
                          breakdown: {
                            item_total: {
                              currency_code: "USD",
                              value: total.value
                            },
                            shipping: {
                              currency_code: "USD",
                              value: 0
                            }
                          }
                        },
                        
                        items: item
                    }
                ]
          })    
        }
      ,
        onApprove: function (data, actions) {
            return actions.order.capture().then(function (details) {
                //This code will only trigger if the payment completes successfully

                //Restarts payment process if customer's payment method is declined
                if (details.error === "INSTRUMENT_DECLINED") {
                    return actions.restart();
                }
                //Alerts customer of Sucessful Transaction
                alert(
                    `Thank you for your payment ${details.payer.name.given_name} ${details.payer.name.surname}`
                );

                //Record the details from form into databsae

                //redirect customer to confirmation page
                location.href = "https://google.com";
            });
        }
    })
    .render("#paypal-button-container");
</script>

<div style="display: block; width: 30%;">
    <form id="input_form">
        <table>
            <tbody>
                <tr>
                    <td><input name="on0"  type="hidden" value="Please choose one option from drop-down menu below:" />Please choose one option from drop-down menu below:</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="vehicle" name="vehicle1" value="50" price="50" >
                        <label for="50"> per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="60"  price="60">
                        <label for="60">.00 Per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="80" price="80">
                        <label for="80">.00 Per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="90" price="90">
                        <label for="90">.00 per hour</label><br>
                    </td>
                </tr>
                <tr>
                <td><input id="Total" type="text" value="" readonly/> :Total Price</td>
                <td><input id="description" type="text" value=""  style ="display:none"/></td>
                <td><input id="amount" type="text" value=""  style ="display:none"/></td>
                </tr>
                <tr>
                <td><input name="on1" type="hidden" value="Name of Customer" />Name of Customer renting car</td>
                </tr>
                <tr>
                <td><input maxlength="200" name="os1"  id="input" type="text" /></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<div id="paypal-button-container" style="display: block; width: 30%;"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

我想从外部的“$('input[type="checkbox"]').change(function(){”获取paypalItem的值，以便它可以传递给从paypal创建订单的items参数。

请建议如何实现。

Answer 1

要以这种方式从 .change() 事件设置它，您需要在调用 paypal.Buttons 时使用同一范围内的变量——最简单的是全局变量，例如window.paypalItem.

另一种设计是让您的按钮代码在需要项目数组时按需调用函数，从对象参数到 actions.order.create()，即

createOrder: function(data, actions) {
      return actions.order.create({
         "purchase_units": [{
            "amount": {
              "currency_code": "USD",
              "value": "100",
              "breakdown": {
                "item_total": {  /* Required when including the `items` array */
                  "currency_code": "USD",
                  "value": "100"
                }
              }
            },
            "items": getItemsArray()
      });
    },

Answer 2

此问题已通过在点击功能中将选定的复选框值初始化为数组来解决。这样数组中不会存储重复的值。