javascript - 动态添加变量到 Paypal 按钮渲染

Question

我正在学习 Paypal 快速入门教程。我有一个输入字段，用于捕获用户输入的金额。在 javascript 中有什么方法可以动态更改以下脚本的数量。我试过添加一个全局变量，但它不起作用。

<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
    paypal.Button.render({
        // Configure environment
        env: 'sandbox',
        client: {
            sandbox: 'demo_sandbox_client_id',
            production: 'demo_production_client_id'
        },
        // Customize button (optional)
        locale: 'en_US',
        style: {
            size: 'small',
            color: 'gold',
            shape: 'pill',
        },

       // Enable Pay Now checkout flow (optional)
       commit: true,

       // Set up a payment
       payment: function(data, actions) {
          return actions.payment.create({
                transactions: [{
                    amount: {
                        total: '0.01',
                        currency: 'USD'
                    }
                }]
           });
         },
         // Execute the payment
         onAuthorize: function(data, actions) {
             return actions.payment.execute().then(function() {
             // Show a confirmation message to the buyer
             window.alert('Thank you for your purchase!');
         });
     }
 }, '#paypal-button');

Answer 1

在交易中，它可以像从字段中获取输入值一样简单，例如:

transactions: [{
  amount: {
    total: document.getElementById("paymentInput").value,
    currency: 'USD'
  }
}]

虽然在盲目接受他们的键盘输入之前我也会做一些输入卫生。

这是一个工作示例:

document.getElementById("submitButton").addEventListener("click", handleSubmit);

function handleSubmit() {
  let payment = function(data, actions) {
    return {
      transactions: [{
        amount: {
          total: document.getElementById("paymentInput").value,
          currency: 'USD'
        }
      }]
    }
  }
  
  console.log(`payment of ${payment().transactions[0].amount.total} submitted`)

}

<input id="paymentInput" />
<button id="submitButton">Submit</button>