динамически добавить переменную для рендеринга кнопки 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>