如何在同一页面上显示 PayPal 智能订阅按钮和 PayPal 智能捕获按钮？

Question

当尝试将 PayPal 订阅按钮和用于一次性付款的捕获/订购按钮添加到同一页面时，您需要使用不同的参数导入 PayPal 的 Javascript 文件两次（intent=subscription&vault=true 与 intent=capture）

如果您尝试导入两个按钮，则不会呈现。

如何在同一页面上同时显示 PayPal 订阅和 PayPal 一次性付款智能按钮？

重现问题的示例代码：

<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD&intent=subscription&vault=true"></script>

<div id="some-container"></div>
<div id="some-subscription-container"></div>

<script>
    paypal.Buttons().render('#some-container');
    paypal.Buttons().render('#some-subscription-container');
</script>

Answer 1

在与这个问题斗争了几个小时后，我找到了一个解决方案，该解决方案非常适合在同一页面上显示两个按钮（甚至是每个页面上的多个按钮），并希望共享它，这样我就可以避免其他人的痛苦。

1 - 两次导入库

第一个问题是如何使用不同的参数同时导入两个 PayPal Javascript 文件。解决方案是在脚本标签上使用data-namespace，如下所示：

<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD" data-namespace="paypal_one_time"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD&intent=subscription&vault=true" data-namespace="paypal_subscriptions"></script>

2 - 显示两个按钮（或更多）

现在要渲染按钮，您需要使用这些命名空间而不是 paypal 变量。例如：

paypal_one_time.Buttons().render('#some-container');
paypal_subscriptions.Buttons().render('#some-subscription-container');

3 - 一次性付款流程后的订阅中断

您会发现的最后一个问题是单击一次性付款按钮会破坏订阅按钮。如果你尝试在一次性按钮之后点击订阅，它不会起作用（说你没有足够的授权并关闭弹出窗口）。

要解决此问题，最简单的方法是每次一次性付款流程完成时重新呈现页面上的订阅按钮（在一次性付款的 Buttons() 选项中的 onApproved/onCancelled/onError 方法中）付款按钮）。

onApprove: function(data, actions) {
    return actions.order.capture().then(function(orderData) {
             // process your one time payment

             // re-render subscription buttons because now they are broken!
             reRenderSubscriptionButtons();
    });
},
onCancel: function(data) {
             reRenderSubscriptionButtons();
},

在 one_time_button 中的这些事件上，只需调用执行以下操作的函数：

function reRenderSubscriptionButtons() {
   // remove everything from the container
   document.getElementById("some-subscription-container").innerHTML='';

   // render the subscription buttons again (you can call the same function you use to render it the first time too)
   paypal_subscriptions.Buttons().render('#some-subscription-container');
}