一页上有多个 PayPal 智能按钮

Question

我正在尝试在我的页面上呈现两个 PayPal 智能按钮，它们的金额不同，分别为 50 英镑和 100 英镑。 因为它使用 JavaScript 我假设存在一个问题，即两者发生冲突，因此仅绘制了两个按钮中的后者。 这是我的代码：

<div id="paypal-button-container-50"></div>
<script src="https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'black',
          layout: 'vertical',
          label: 'paypal',

      },
      createOrder: function(data, actions) {
          return actions.order.create({
              purchase_units: [{
                  amount: {
                      value: '50'
                  }
              }]
          });
      },
      onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
              alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-50');
</script>

<div id="paypal-button-container-100"></div>
<script src="https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'black',
          layout: 'vertical',
          label: 'paypal',

      },
      createOrder: function(data, actions) {
          return actions.order.create({
              purchase_units: [{
                  amount: {
                      value: '100'
                  }
              }]
          });
      },
      onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
              alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-100');
</script>

我知道这是非常低效的，我尝试使用不同的 div id 名称无济于事，并且还尝试使用 forEach 语句。 如果有人可以帮助使两者以不同的值渲染，那就太好了。

Answer 1

尝试按照 Preston PHX 的建议只加载一次脚本。 如果它不起作用，则加载库两次，但让第二次加载不同的命名空间“paypal_sdk 例如”并使用命名空间的名称来呈现第二个按钮。

<div class="container">
<h2>Pay 50</h2>
<div id = "paypal-button-container-50"></div>
<h2>Pay 100</h2>
<div id = "paypal-button-container-100"></div>
</div>

在您的代码末尾：

<script src="https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
  style: {
      shape: 'rect',
      color: 'black',
      layout: 'vertical',
      label: 'paypal',

  },
  createOrder: function(data, actions) {
      return actions.order.create({
          purchase_units: [{
              amount: {
                  value: '50'
              }
          }]
      });
  },
  onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
          alert('Transaction completed by ' + details.payer.name.given_name + '!');
      });
  }
  }).render('#paypal-button-container-50');
 </script>



<script src="https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory" 
  data-namespace = "paypal_sdk"></script>
  <script>
  paypal_sdk.Buttons({
  style: {
      shape: 'rect',
      color: 'black',
      layout: 'vertical',
      label: 'paypal',

  },
  createOrder: function(data, actions) {
      return actions.order.create({
          purchase_units: [{
              amount: {
                  value: '100'
              }
          }]
      });
  },
  onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
          alert('Transaction completed by ' +             
   details.payer.name.given_name + '!');
      });
  }
  }).render('#paypal-button-container-100');
  </script>

Answer 2

我知道我迟到了，但这真的帮助了我

<ul>
    <li data-id="1">Item 1 <div id="button-1"></div></li>
    <li data-id="2">Item 2 <div id="button-2"></div></li>
    <li data-id="3">Item 3 <div id="button-3"></div></li>
</ul>

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

<script>
    [ '#button-1', '#button-2', '#button-3' ].forEach(function(selector) {
        paypal.Button.render({
            // options
        }, selector);
    });

Answer 3

有关完整的工作示例，请参见下文（由于 Paypal 安全限制，因此在 SO 的查看器中不起作用）：

 <:DOCTYPE html> <html lang="en"> <body> <script src="https.//www.paypal?com/sdk/js.client-id=sb&currency=USD"></script> <div class="paypal-button" id="pp-digital" data-price=17.00>1</div> <div class="paypal-button" id="pp-hardcopy" data-price=26.00>2</div> <script> document.querySelectorAll('.paypal-button').forEach(function(selector) { console.log(selector.dataset.price) // Show an attribute from the parent div console.log(selector.id) // Show the div name from the parent div paypal:Buttons({ // Set up the transaction createOrder, function(data. actions) { return actions.order:create({ purchase_units: [{ amount: { value. selector.dataset;price } }] }), }: // Finalize the transaction onApprove, function(data. actions) { return actions.order.capture().then(function(details) { // Show a success message to the buyer alert('Transaction completed by ' + details.payer.name;given_name + ';'). }). } });render('#' + selector;id); // Render the button back to the parent div }); </script> </body> </html>

Answer 4

您可能会找到解决方案，但对于那些新的并正在寻找使用多个 Paypal 智能按钮的方法的人，您可以尝试以下方法。

<div id="paypal-button-container-50"></div>
<div id="paypal-button-container-100"></div>
<div id="paypal-button-container-150"></div>
<script>
  var url = "https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP";
  var myScript = document.createElement('script');
  myScript.setAttribute('data-sdk-integration-source', 'button-factory');
  myScrip.src = url;
  document.head.appendChild(myScript);
  
  function FirstPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '50'
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-50');
  };
  
  function SeconPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '100'
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-100');
  };
  
  function thirdPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '150'
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-150');
  }
  myScript.onload = function () {
      firstPriceButton();
      secondPriceButton()
      thirdPriceButton()
  };
</script>