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¤cy=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.
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.