使用智能按钮创建Paypal捐赠按钮，可选择价格或填写自己的价格

Question

当我输入我自己想要的价格时，贝宝支付平台弹出很好，但我的问题是，当我点击选项价格时，paypal似乎没有检测到价格值。这就是我在下面所做的。当我点击这些单独的价格。贝宝似乎没有得到价格的价值。该值显示在输入字段中，但贝宝不会识别它，除非我手动输入我想要的值。

求你了，我需要这个，正在做一个项目。这需要动态工作。javascript有什么问题吗？请告诉我。也告诉我一个更好的方法。

<table border="0" cellpadding="10" cellspacing="0" align="center">  
<img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/26_Blue_PayPal_Pill_Button.png" alt="PayPal" /></table>

<h4 class="text-style-news">Paypal Payment Platform</h4>
<button id="Paypal1" class="btn btn-sm btn-danger" style="margin-right: 15px;">$10</button>
<button id="Paypal2" class="btn btn-sm btn-danger" style="margin-right: 15px;">$20</button>
<button id="Paypal3" class="btn btn-sm btn-danger" style="margin-right: 15px;">$50</button>
<button id="Paypal4" class="btn btn-sm btn-danger">$100</button> 
<label style="float: left;" for="amount" class="mb-2"><p class="support-p"><strong>Any Amount*</strong></p></label>
<br> <br>        
<input type="number" id="amount" class="form-control mb-4" placeholder="in $USD" onchange="Pay()">
<br>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>    
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD">          
</script>
<script>
var amount = 0;
function Pay() {
// body...
amount = document.getElementById("amount").value;
}
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: amount
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Donation completed by ' + details.payer.name.given_name + '!');
location.replace("https://www.example.com/completed_success.php");
});
}
}).render('#paypal-button-container');
</script>
<script>
$("#Paypal1").click(function () {
$("#amount").val("10");   
});  
$("#Paypal2").click(function () {
$("#amount").val("20");   
});  
$("#Paypal3").click(function () {
$("#amount").val("50");   
});

$("#Paypal4").click(function () {
$("#amount").val("100");   
});
</script>

Answer 1

您可以使用一个click函数简化code，并在HTML按钮中添加数据属性，还可以在按钮中添加一个class，用于调用点击事件。

我们只需将data-id分配给每个按钮，并具有相应的金额，当单击按钮时，我们使用jQuerydata来获得id和分配给id的值，即金额。

此外，我将仅使用jQuery或仅使用普通JS进行校正。不喜欢把两者混为一谈，这样就不会有混淆。

要获得金额，只需使用Pay()函数中的.val()函数即可。

我还建议使用parseInt((，它是将string转换为number(整数(的函数。我相信贝宝希望一个数字是amount，而不是字符串值。

使用贝宝的完整工作演示：https://jsfiddle.net/alwayshelping/ncxd26v7/2/

运行下面的代码段以查看其工作情况。(你可以将paypal配置添加回代码中，如果我添加它，这里的代码片段会阻止它。(

//One click function to get data (amount)
$(".Paypal").click(function() {
$('#amount').val($(this).data('id'))

//Call pay function again so the value is update as well for paypal.
Pay()
});

var amount = 0;
function Pay() {
//Get amount 
amount = parseInt($('#amount').val()) //Get value as int with parseInt
console.log(amount)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/optimize/26_Blue_PayPal_Pill_Button.png" alt="PayPal" /></table>
<h4 class="text-style-news">Paypal Payment Platform</h4>
<button class="btn btn-sm btn-danger Paypal" data-id="10" style="margin-right: 15px;">$10</button>
<button class="btn btn-sm btn-danger Paypal" data-id="20" style="margin-right: 15px;">$20</button>
<button class="btn btn-sm btn-danger Paypal" data-id="30" style="margin-right: 15px;">$50</button>
<button class="btn btn-sm btn-danger Paypal" data-id="100">$100</button>
<label style="float: left;" for="amount" class="mb-2"><p class="support-p"><strong>Any Amount*</strong></p></label>
<br> <br>
<input type="number" id="amount" class="form-control mb-4" placeholder="in $USD" onchange="Pay()">
<br>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>