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

【问题标题】：How to render multiple button for Paypal subscription for more then one plan?如何为多个计划呈现 Paypal 订阅的多个按钮？
【发布时间】：2021-04-08 05:51:19
【问题描述】：

我在 Paypal 订阅中创建了产品和计划。通过导航到 sandbox.paypal.com/billing/plans 并选择计划，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>

请帮忙，提前谢谢你。

【问题讨论】：

标签： javascript paypal paypal-sandbox paypal-rest-sdk paypal-subscriptions

【解决方案1】：

对多个订阅计划使用指令。

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>

我从下面的链接得到了解决方案：

https://medium.com/@sumitvekariya7/how-to-integrate-multiple-paypal-buttons-for-your-subscription-plans-using-angular-directive-fdc74e16de32

【讨论】：

【解决方案2】：

SDK <script> 必须在每个页面上仅加载一次，然后才能呈现任何按钮。 <head> 通常是这样做的好地方。

每个按钮的<div> 应该有一个唯一的id 值，并且每个按钮的脚本必须呈现给它的选择器。

【讨论】：