javascript - Paypal 客户端 REST : dynamic prices

Question

我正在为我的项目使用 PayPal 客户端 REST。我有不同的产品，每个产品的价格都不同。我有一个文本框，其中包含购物车中所有产品的总价。但是当我尝试获取该文本框的值时，我收到了 paypal API 错误。下面是我的代码:

<input type="number" id="total_amount">
<div id="paypal-button-container" class="text-right"></div>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    var amt =  $('#total_amount').val();
    paypal.Button.render({
    env: 'sandbox',
    client: {
        sandbox:    '<sandbox_api_ey>',
        production: '<insert production client id>'
    },

    payment: function(data, actions) {
        var amt = $('#total_amount').val();
        return actions.payment.create({
            payment: {
                transactions: [
                    {
                        amount: { total: amt, currency: 'JPY' }
                    }
                ]
            }
        });
    },

    onAuthorize: function(data, actions) {
        return actions.payment.execute().then(function() {
            window.alert('Payment Complete!');
        });
    }

}, '#paypal-button-container');
</script>

正如您从我的代码中看到的那样，我将金额存储在变量 var amt = $('#total_amount').val(); 中然后在 json 中使用该变量。

我的问题是我在控制台中遇到此错误，并且无法打开 paypal 窗口。

它指向货币，但我很确定它是正确的，每当我硬编码它正常运行的数量时。

Answer 1

你可以尝试类似的东西

payment: function (data, actions) {

var x = document.getElementById("total_amount");
var currentVal = x.value;

console.log(currentVal);
return actions.payment.create({
  transactions: [{
    amount: {
      total: currentVal,
      currency: 'JPY'
    }
  }]
});
}

此外，确保在 HTTPS 环境中进行测试

在此处查看完整的工作片段

<iframe width="100%" height="300" src="//jsfiddle.net/vwas4cqj/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>