PayPal Checkout JS SDK - 动态设置金额

Question

我正在使用以下 js 代码在页面上显示 paypal 按钮。 我添加了两个单选按钮来选择付款金额，但无法设置。 我将金额保存在名为 importoSelezionato 的变量中。 但如果我用变量替换 50，它就不起作用。 如何用变量正确替换购买单元中的数字？ 谢谢

  <script>
    function initPayPalButton() {
        // Radiobutton IMPORTO  $(document.getElementsByName('CustImporto')).on('click',function(){
            var getSelectedValue = document.querySelector( 'input[name="CustImporto"]:checked');  
            //alert("importo selezionato: euro "+getSelectedValue.value);
            var importoSelezionato = getSelectedValue.value;
        });
        // Radiobutton IMPORTO

      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'horizontal',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"Ricarica standard account","amount":{"currency_code":"EUR","value":50}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';
        //aggiungere un log in una tabella di database
            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

<div class="row">
  <div class="col-lg-6 in-gp-tl">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" name="CustImporto" required="" value="25" aria-label="...">
      </span>
      <input type="text" class="form-control" readonly="readonly" value="25" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6 in-gp-tb">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" name="CustImporto" required="" value="50" aria-label="...">
      </span>
      <input type="text" class="form-control" readonly="readonly" value="50" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Answer 1

从

createOrder

查询 DOM，单击 PayPal 按钮时运行。不需要 onclick 监听器...

2024 年编辑：actions.order.create 和 actions.order.capture 现已弃用，不应在任何新集成中使用。这个答案和集成模式已经过时，只能通过服务器的 API 创建和捕获订单。

<script>
    function initPayPalButton() {

        function getAmount() {
            var getSelectedValue = document.querySelector( 'input[name="CustImporto"]:checked');  
            //alert("importo selezionato: euro "+getSelectedValue.value);
            return getSelectedValue.value;
        };
        
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'horizontal',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            "purchase_units": [
              {
                "amount": {
                  "currency_code": "EUR",
                  "value": getAmount()
                },
                "description": "Ricarica standard account"
              }
            ]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';
        //aggiungere un log in una tabella di database
            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>