我已经创建了一个客户端代码，允许用户从页面表达结帐。
我希望发送多个项目的详细信息，订单的说明。下面是代码
<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>我想从"$('input[type="checkbox"]')中获取paypalItem的值。change(function(){"在外部，这样它就可以传递给从paypal创建订单的items参数。
请建议如何做。
要从.change()事件设置它，您需要在调用paypal.Buttons时使用相同作用域内的变量—最简单的是全局变量，如window.paypalItem。
另一种设计是让您的按钮代码在需要items数组时按需调用函数，从对象参数到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()
});
},
这个问题已经通过在点击函数中初始化选中的复选框值来排序。这样，数组中就不会存储重复的值。