Question

我正在关注贝宝快速入门教程。我有一个输入字段，可以捕获用户输入的金额。 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

In transactions it could be as simple as getting the input's value from the field, for example:

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

Although I would also do a bit of input sanitation before blindly accepting their keyboard input.

Here is a working example:

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>

动态添加变量到贝宝按钮呈现

1 个答案: