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

Question

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

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

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

请帮忙，提前谢谢你。

Answer 1

SDK <script> 在呈现任何按钮之前，每页只能加载一次。 <head> 通常是执行此操作的好地方。

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

Answer 2

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

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>

我从下面得到了解决方案 link:

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

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

How to render multiple button for Paypal subscription for more then one plan?

javascript

paypal

paypal-subscriptions

paypal-sandbox

paypal-rest-sdk