Javascript 一页上有多个PayPal智能按钮_Javascript_Html_Paypal

Javascript 一页上有多个PayPal智能按钮

javascript html paypal

Javascript 一页上有多个PayPal智能按钮,javascript,html,paypal,Javascript,Html,Paypal,我试图在我的页面上呈现两个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-

我试图在我的页面上呈现两个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>


贝宝，按钮({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“50”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（“+details.payer.name.given_name+”！”完成的交易）；
});
}
}).render（“#paypal-button-container-50”）；
贝宝，按钮({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“100”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（“+details.payer.name.given_name+”！”完成的交易）；
});
}
}).render（“#paypal-button-container-100”）；

我知道这是非常低效的，我尝试过使用不同的div id名称，但没有效果，还尝试过使用forEach语句。如果有人能帮助使用不同的值渲染这两个脚本，那就太好了。

按照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>


付50英镑
付100

在代码末尾：

<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>


贝宝，按钮({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“50”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（“+details.payer.name.given_name+”！”完成的交易）；
});
}
}).render（“#paypal-button-container-50”）；
paypal_sdk.Buttons({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“100”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（'由'+
details.payer.name.given_name+'！'）；
});
}
}).render（“#paypal-button-container-100”）；

<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>


付50英镑
付100

在代码末尾：

<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>


贝宝，按钮({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“50”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（“+details.payer.name.given_name+”！”完成的交易）；
});
}
}).render（“#paypal-button-container-50”）；
paypal_sdk.Buttons({
风格：{
形状：“rect”，
颜色：'黑色'，
布局：“垂直”，
标签：“贝宝”，
},
createOrder:函数（数据、操作）{
return actions.order.create({
购买单位：[{
金额：{
值：“100”
}
}]
});
},
onApprove：功能（数据、操作）{
返回actions.order.capture（）.then（函数（详细信息）{
警报（'由'+
details.payer.name.given_name+'！'）；
});
}
}).render（“#paypal-button-container-100”）；

我知道我迟到了，但这确实帮了我的忙

<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);
    });


第1项
第2项
第3项

['#按钮-1'、'#按钮-2'、'#按钮-3'].forEach（函数（选择器）{
paypal.Button.render({
//选择权
}，选择器）；
});

我知道我迟到了，但这确实帮了我的忙

<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);
    });


第1项
第2项
第3项

['#按钮-1'、'#按钮-2'、'#按钮-3'].forEach（函数（选择器）{
paypal.Button.render({
//选择权
}，选择器）；
});

有关完整的工作示例，请参见以下内容（由于Paypal安全限制，SO的查看器无法工作）：


1.
2.
document.querySelectorAll（'.paypal button'）.forEach（函数（选择器）{
console.log（selector.dataset.price）//显示父div的属性
console.log（selector.id）//显示父div中的div名称