如何在 html 页面上有多个单独的 Paypal 购买按钮答案

【问题标题】：how to have multiple individual Paypal purchase buttons on html page如何在 html 页面上有多个单独的 Paypal 购买按钮
【发布时间】：2021-03-05 15:30:25
【问题描述】：

我使用的是 paypal 集成支付按钮，您只需将代码复制到您的 html 中，paypal 按钮就会显示为现在购买。

这只有在代码被复制一次时才能正常工作在我的 html 页面上，我有 3 个订阅可供用户选择（每天、每周、每月）如果我将代码复制到我的每日 div 区域它可以正常工作，然后如果我将代码复制到每周 div 它不会出现并且只会出现每日 div paypal 按钮。但如果我从每日 div 中删除代码，按钮将出现在每周 div 下方。

好像只能使用一次代码？

我尝试通过更改 id 名称和函数名称来修改代码，但仍然没有。

有没有办法让我的网页上有多个链接到贝宝的按钮？

这是paypal生成的代码

<div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"daily","amount":{"currency_code":"AUD","value":1}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>
<br><br><br>
<p> gefwdsa</p>
<div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"weekly sub","amount":{"currency_code":"AUD","value":5}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
        },

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

这只会让第一个按钮出现

【问题讨论】：

标签： html paypal paypal-sandbox

【解决方案1】：

SDK 脚本，

 <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>

每页只应仅加载一次，高于所有按钮。

同样在沙盒模式下，您需要来自 https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications 中应用的“实时”部分的实时客户端 ID

【讨论】：