Javascript 如何为多个计划的Paypal订阅呈现多个按钮？

我已经在Paypal订阅中创建了产品和计划。 通过导航到sandbox.paypal.com/billing/plans并选择plan，paypal文档提供了复制代码（如下所示），并将其粘贴到需要按钮的网站中

此按钮仅适用于一个订阅计划。 我有3个其他订阅的计划id，但它只返回最后添加的按钮

<div id="paypal-button-container"></div>

<script src="https://www.paypal.com/sdk/js?client-id=paypal-clientId&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'pill',
          color: 'gold',
          layout: 'horizontal',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          'plan_id': 'Plan1ID_here'
          //**I have multiple planids for here.**
        });
      },
      onApprove: function(data, actions) {
          console.log(data);
        alert(data.subscriptionID);
      }
  }).render('#paypal-button-container');
</script>

贝宝，按钮({
风格：{
形状：'药丸'，
颜色：“金色”，
布局：“水平”，
标签：“订阅”
},
createSubscription:函数（数据、操作）{
return actions.subscription.create({
“计划id”：“此处计划1ID”
//**我这里有多个平面**
});
},
onApprove：功能（数据、操作）{
控制台日志（数据）；
警报（data.subscriptionID）；
}
}).render（“#贝宝按钮容器”）；

请帮忙， 提前感谢。

在呈现任何按钮之前，SDK

每页只能加载一次<代码>通常是这样做的好地方

---

每个按钮的

应具有唯一的

id

值，并且每个按钮的脚本必须呈现给其选择器。

对多个订阅计划使用指令

paypalSubscription.directive.ts

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
declare var paypal;
@Directive({
    selector: '[paypalSubscription]'
})
export class PaypalSubscriptionDirective implements AfterViewInit {
    @Input('paypalSubscription') planId: string;
    constructor(
        private el: ElementRef
    ) { }
    ngAfterViewInit(): void {
        console.log(this.planId);
        paypal.Buttons({
            /** @see https://developer.paypal.com/docs/checkout/integration-features/customize-button/# */
            style: {
                layout:  'horizontal',
                color:   'blue',
                shape:   'pill',
                label:   'paypal'
            },
            createSubscription: (data, actions) => {
                console.log(data, actions);
                return actions.subscription.create({
                    plan_id: this.planId
                });
            },
            onApprove: (data, actions) => {
                console.log(data, actions);
                /** alert('You have successfully created subscription ' + data.subscriptionID); */
            }
        }).render(this.el.nativeElement);
    }
}

在HTML组件中

<div [paypalSubscription]="p.id" [id]="p.id"></div>

我从以下链接获得了解决方案：