[FIXED] How to return array from function in order to pass to paypal for multiple item details

Issue

I have created a client-side code that allows users to express checkout from the page.

I am looking to send multiple item details, instructions for the order. Following is the code

 

<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">$50 per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="60"  price="60">
                        <label for="60">$60.00 Per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="80" price="80">
                        <label for="80">$80.00 Per hour</label><br>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="90" price="90">
                        <label for="90">$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>

I would like to get value of paypalItem from "$('input[type="checkbox"]').change(function(){" outside so that it can be passed to the items parameter of create order from paypal.

Please suggest how it can be done.

Solution

This issue has been sorted by initiating the selected checkbox value to the array within on click function. This way no repeated values will be stored in the array.

Answered By - Swapnil Deshmukh

Answer Checked By - Terry (PHPFixing Volunteer)