如何在同一页面同时展示PayPal Smart订阅按钮与Smart Capture按钮

错误原因 #

PayPal JS SDK 不允许在同一页面重复加载，两次传入不同参数加载SDK会导致内部配置冲突，最终两类按钮都无法正常渲染。

正确实现方案 #

仅需加载一次PayPal JS SDK，传入的参数需要同时覆盖订阅和一次性付款的场景要求（携带intent=subscription和vault=true参数，该配置同时兼容两种收款模式），再分别为两类按钮定义独立的业务逻辑即可。
完整可运行示例代码如下：

<!-- 仅加载一次SDK，参数同时兼容两种收款场景 -->
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD&intent=subscription&vault=true"></script>

<div id="one-time-payment-container"></div>
<div id="subscription-container"></div>

<script>
    // 一次性付款按钮
    paypal.Buttons({
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '10.00' // 替换为实际一次性付款金额
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                // 此处替换为付款成功后的自定义业务逻辑
                alert('付款完成，付款人：' + details.payer.name.given_name);
            });
        }
    }).render('#one-time-payment-container');

    // 订阅付款按钮
    paypal.Buttons({
        createSubscription: function(data, actions) {
            return actions.subscription.create({
                plan_id: '{{YOUR SUBSCRIPTION PLAN ID}}' // 替换为PayPal后台创建的订阅计划ID
            });
        },
        onApprove: function(data, actions) {
            // 此处替换为订阅创建成功后的自定义业务逻辑
            alert('订阅创建成功，订阅ID：' + data.subscriptionID);
        }
    }).render('#subscription-container');
</script>

注意事项 #

• 确保你的PayPal商户账号已经同时开通了一次性收款和订阅产品的使用权限，调用SDK使用的客户端ID对应应用配置正确
• 两类按钮的回调逻辑不要混用：一次性付款固定使用createOrder回调生成订单，订阅付款固定使用createSubscription回调生成订阅实例，避免参数校验失败

内容的提问来源于stack exchange，提问作者Alejandro Núñez