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

Question

I have created product and plan in Paypal subscription. By navigating to sandbox.paypal.com/billing/plans and selecting plan, paypal documentation provides copy code(provided below) and paste it in your website where the button is needed.

This button is working well for one subscription plan only. I have 3 plan id for other subscription,but it returns only lastly added button.

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

Please help, Thank you in advance.

Answer 1

Use directive for multiple subscription plans.

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);
    }
}

and in HTML component,

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

I got the solution from below link:

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